<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>
body{
  overflow: hidden;
  margin: 0;
}
console.clear();
var edges;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
  60,
  window.innerWidth / window.innerHeight,
  1,
  1000
);
camera.position.set(0, 0, 25);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor(0x404040);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

var loader = new THREE.OBJLoader();
loader.load("https://threejs.org/examples/models/obj/emerald.obj", function(object) {
  object.traverse(function(child) {
    if (child instanceof THREE.Mesh) {
      child.material = new THREE.MeshBasicMaterial({color: 0x999999});
      //scene.add(child);
      var edgesGeom = new THREE.EdgesGeometry(child.geometry, 5);
      edges = new THREE.LineSegments(edgesGeom, new THREE.LineDashedMaterial({color: 0x999999}));
      edges.computeLineDistances();
      console.log(edges);
      edges.material.dashSize = 0;
      edges.material.gapSize = edges.geometry.attributes.lineDistance.array[edges.geometry.attributes.lineDistance.count - 1];
      scene.add(edges);
      child.scale.setScalar(0.999);
      child.visible = false;
      edges.add(child);
    }
  });
});

render();
function render() {
  requestAnimationFrame(render);
  if (edges){
    edges.material.dashSize += 1;
    if (edges.material.dashSize >= edges.material.gapSize){
      edges.material.color.set(0xffffff);
      edges.children[0].visible = true;
    }
    edges.rotation.y += 0.01;
  }
  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.