<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<script>
  var uLogoPoints = [
    -41.75,27,0, -32,22.5,0, 
    -32,22.5,0, -26.875,19.25,0, 
    -26.875,19.25,0, -25,17.5,0, 
    -25,17.5,0, -23.625,15.75,0, 
    -23.625,15.75,0, -22.5,13.75,0, 
    -22.5,13.75,0, -21.625,11.5,0, 
    -21.625,11.5,0, -20.875,5.75,0, 
    -20.875,5.75,0, -21,4.5,0, 
    -21,4.5,0, -21.375,3.75,0, 
    -21.375,3.75,0, -22.125,3.5,0, 
    -22.125,3.5,0, -36.125,2.25,0, 
    -36.125,2.25,0, -27.625,-1,0, 
    -27.625,-1,0, -22.25,-4.25,0, 
    -22.25,-4.25,0, -21.625,-5.25,0, 
    -21.625,-5.25,0, -21.75,-6,0, 
    -21.75,-6,0, -22.75,-6.5,0, 
    -22.75,-6.5,0, -24.25,-7,0, 
    -24.25,-7,0, -34.375,-7.5,0, 
    -34.375,-7.5,0, -24.25,-12.5,0, 
    -24.25,-12.5,0, -22.5,-13.75,0, 
    -22.5,-13.75,0, -21.25,-15.25,0, 
    -21.25,-15.25,0, -20.625,-16.75,0, 
    -20.625,-16.75,0, -20.625,-18.25,0, 
    -20.625,-18.25,0, -21,-19.75,0, 
    -21,-19.75,0, -21.875,-21,0, 
    -21.875,-21,0, -22.875,-22.25,0, 
    -22.875,-22.25,0, -27.125,-25.75,0, 
    -27.125,-25.75,0, -21.125,-25.5,0, 
    -21.125,-25.5,0, -18.125,-25.75,0, 
    -18.125,-25.75,0, -14.75,-26.5,0, 
    -14.75,-26.5,0, -11.25,-27.75,0, 
    -11.25,-27.75,0, -7.25,-29.75,0, 
    -7.25,-29.75,0, -2.875,-32.75,0, 
    -2.875,-32.75,0, 2.625,-26.75,0, 
    2.625,-26.75,0, 8.5,-22.5,0, 
    8.5,-22.5,0, 9.625,-22.5,0, 
    9.625,-22.5,0, 10.125,-22.75,0, 
    10.125,-22.75,0, 10.25,-23.25,0, 
    10.25,-23.25,0, 9.875,-25,0, 
    9.875,-25,0, 9.75,-25.5,0, 
    9.75,-25.5,0, 10,-26,0, 
    10,-26,0, 11.25,-26.75,0, 
    11.25,-26.75,0, 27.25,-34.25,0, 
    27.25,-34.25,0, 28.75,-34.5,0, 
    28.75,-34.5,0, 28.625,-35.25,0, 
    28.625,-35.25,0, 26.875,-36.75,0, 
    26.875,-36.75,0, 23.5,-39,0, 
    23.5,-39,0, 18.625,-41.5,0, 
    18.625,-41.5,0, 12.375,-43.5,0, 
    12.375,-43.5,0, 5,-45,0, 
    5,-45,0, -3.375,-45,0, 
    -3.375,-45,0, -12,-43.75,0, 
    -12,-43.75,0, -19.625,-40.75,0, 
    -19.625,-40.75,0, -26,-37,0, 
    -26,-37,0, -31.375,-32.75,0, 
    -31.375,-32.75,0, -35.375,-28.5,0, 
    -35.375,-28.5,0, -38,-25,0, 
    -38,-25,0, -39.25,-22.5,0, 
    -39.25,-22.5,0, -39.375,-21,0, 
    -39.375,-21,0, -39,-19.5,0, 
    -39,-19.5,0, -38.125,-18,0, 
    -38.125,-18,0, -36.75,-16.75,0, 
    -36.75,-16.75,0, -31.75,-13.25,0, 
    -31.75,-13.25,0, -39.5,-6,0, 
    -39.5,-6,0, -40.875,-4,0, 
    -40.875,-4,0, -42,-2.25,0, 
    -42,-2.25,0, -42.75,-0.5,0, 
    -42.75,-0.5,0, -46.75,17.5,0, 
    -46.75,17.5,0, -48.875,10.25,0, 
    -48.875,10.25,0, -49.875,2.5,0, 
    -49.875,2.5,0, -49.75,-4.75,0, 
    -49.75,-4.75,0, -48.875,-10,0, 
    -48.875,-10,0, -47.625,-14.75,0, 
    -47.625,-14.75,0, -45.875,-19.5,0, 
    -45.875,-19.5,0, -43.625,-24,0, 
    -43.625,-24,0, -41,-28.25,0, 
    -41,-28.25,0, -38,-32,0, 
    -38,-32,0, -33.75,-36.5,0, 
    -33.75,-36.5,0, -29.125,-40.25,0, 
    -29.125,-40.25,0, -23.875,-43.5,0, 
    -23.875,-43.5,0, -18.375,-46,0, 
    -18.375,-46,0, -12.5,-48,0, 
    -12.5,-48,0, -6.375,-49.25,0, 
    -6.375,-49.25,0, 0,-49.75,0, 
    0,-49.75,0, 5.75,-49.25,0, 
    5.75,-49.25,0, 11.5,-48.25,0, 
    11.5,-48.25,0, 17.125,-46.5,0, 
    17.125,-46.5,0, 22.375,-44.25,0, 
    22.375,-44.25,0, 27.25,-41.5,0, 
    27.25,-41.5,0, 31.75,-38,0, 
    31.75,-38,0, 35.875,-34.25,0, 
    35.875,-34.25,0, 28.75,-28.25,0, 
    28.75,-28.25,0, 28.375,-2.25,0, 
    28.375,-2.25,0, 28.5,13,0, 
    28.5,13,0, 29,15.25,0, 
    29,15.25,0, 29.875,17.5,0, 
    29.875,17.5,0, 31.375,19.5,0, 
    31.375,19.5,0, 33.25,21.25,0, 
    33.25,21.25,0, 35.75,22.75,0, 
    35.75,22.75,0, 38.875,24,0, 
    38.875,24,0, 41.25,20.5,0, 
    41.25,20.5,0, 42.875,17,0, 
    42.875,17,0, 43.25,15.25,0, 
    43.25,15.25,0, 43.25,13.75,0, 
    43.25,13.75,0, 42.875,12.75,0, 
    42.875,12.75,0, 39.125,9,0, 
    39.125,9,0, 35.5,6.5,0, 
    35.5,6.5,0, 40.375,0,0, 
    40.375,0,0, 42.5,-4.75,0, 
    42.5,-4.75,0, 43,-9.5,0, 
    43,-9.5,0, 42.125,-23.5,0, 
    42.125,-23.5,0, 41.75,-26.5,0, 
    41.75,-26.5,0, 45.5,-19.5,0, 
    45.5,-19.5,0, 47,-16,0, 
    47,-16,0, 49.125,-8,0, 
    49.125,-8,0, 49.75,0,0, 
    49.75,0,0, 49.625,4.25,0, 
    49.625,4.25,0, 49,8.75,0, 
    49,8.75,0, 46.75,17,0, 
    46.75,17,0, 45.125,20.75,0, 
    45.125,20.75,0, 43.25,24.5,0, 
    43.25,24.5,0, 41,28,0, 
    41,28,0, 34.25,27.25,0, 
    34.25,27.25,0, 28.5,25.25,0, 
    28.5,25.25,0, 23.625,22.25,0, 
    23.625,22.25,0, 12.5,13,0, 
    12.5,13,0, 3.875,14.5,0, 
    3.875,14.5,0, 3.5,14,0, 
    3.5,14,0, 9.125,7.5,0, 
    9.125,7.5,0, 9.625,6.5,0, 
    9.625,6.5,0, 10,5,0, 
    10,5,0, 11.5,-9.5,0, 
    11.5,-9.5,0, 11.25,-10.75,0, 
    11.25,-10.75,0, 10.5,-12.25,0, 
    10.5,-12.25,0, 5.75,-16,0, 
    5.75,-16,0, 1.5,-18.5,0, 
    1.5,-18.5,0, 0,-18.25,0, 
    0,-18.25,0, -1,-17.5,0, 
    -1,-17.5,0, -2,-16.25,0, 
    -2,-16.25,0, -2.875,-15,0, 
    -2.875,-15,0, -4.5,-9.75,0, 
    -4.5,-9.75,0, -4.125,8,0, 
    -4.125,8,0, -2.125,13.25,0, 
    -2.125,13.25,0, 0.875,19.25,0, 
    0.875,19.25,0, 0.25,19.5,0, 
    0.25,19.5,0, -5.75,14.25,0, 
    -5.75,14.25,0, -7.125,13.75,0, 
    -7.125,13.75,0, -8.25,13.25,0, 
    -8.25,13.25,0, -9.25,13.5,0, 
    -9.25,13.5,0, -31,26.5,0, 
    -31,26.5,0, -34.875,28.5,0, 
    -34.875,28.5,0, -32.625,31.75,0, 
    -32.625,31.75,0, -29.75,34.5,0, 
    -29.75,34.5,0, -23.625,39.25,0, 
    -23.625,39.25,0, -20.75,40.75,0, 
    -20.75,40.75,0, -18.375,41.75,0, 
    -18.375,41.75,0, -16.75,42.25,0, 
    -16.75,42.25,0, -15.5,42,0, 
    -15.5,42,0, -14.375,41.25,0, 
    -14.375,41.25,0, -13.25,40.25,0, 
    -13.25,40.25,0, -8.75,34.25,0, 
    -8.75,34.25,0, -8,34,0, 
    -8,34,0, -3.75,38.25,0, 
    -3.75,38.25,0, 1.5,41.5,0, 
    1.5,41.5,0, 8.75,43,0, 
    8.75,43,0, 25.5,42.5,0, 
    25.5,42.5,0, 18.75,46,0, 
    18.75,46,0, 11.5,48.5,0, 
    11.5,48.5,0, 3.75,49.75,0, 
    3.75,49.75,0, 0,50,0, 
    0,50,0, -7.375,49.25,0, 
    -7.375,49.25,0, -14.375,47.75,0, 
    -14.375,47.75,0, -21,45.25,0, 
    -21,45.25,0, -27.125,41.75,0, 
    -27.125,41.75,0, -32.75,37.5,0, 
    -32.75,37.5,0, -37.625,32.5,0, 
    -37.625,32.5,0, -41.75,27,0
  ]
</script>
body{
  overflow: hidden;
  margin: 0;
}
console.clear();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  60,
  window.innerWidth / window.innerHeight,
  1,
  1000
);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
//renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var uLogoGeom = new THREE.BufferGeometry();
uLogoGeom.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array(uLogoPoints), 3 ) );
var uLogo = new THREE.LineSegments(
  uLogoGeom,
  new THREE.LineDashedMaterial({ color: 0xff9900 })
);
uLogo.computeLineDistances();
var logoLength =
  uLogoGeom.attributes.lineDistance.array[
    uLogoGeom.attributes.lineDistance.count - 1
  ];
uLogo.material.dashSize = 0;
uLogo.material.gapSize = 1000;
uLogo.scale.setScalar(0.1);
scene.add(uLogo);

var loader = new THREE.OBJLoader();
loader.load("https://cywarr.github.io/small-shop/UTbeta/U.obj", u => {
  u.children[0].geometry.computeVertexNormals();
  u.children[0].material = new THREE.MeshStandardMaterial({
    color: 0xff9900,
    metalness: 0.75,
    roughness: 0.55
  });
  u.rotation.y = Math.PI;
  u.visible = false;
  uLogo.add(u);
});

var clock = new THREE.Clock();
var time = 0;
var delta = 0;
var speed = 50;
var dash = 0;
var aSpeed = THREE.Math.degToRad(20);

render();
function render() {
  requestAnimationFrame(render);
  delta = clock.getDelta();
  time += delta;
  dash = speed * time;
  uLogo.material.dashSize = dash;
  if (dash > logoLength) {
    if (!uLogo.children[0].visible){
      uLogo.material.color.set("yellow");
      uLogo.children[0].visible = true;
    }
    uLogo.material.dashSize = logoLength;
    uLogo.rotation.y += aSpeed * delta;
  }
  renderer.render(scene, camera);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.