Wireframe#3

by ccammack

HTML

<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/libs/dat.gui.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://threejs.org/examples/js/lines/LineMaterial.js"></script>
<script src="https://threejs.org/examples/js/lines/Wireframe.js"></script>
<script src="https://threejs.org/examples/js/lines/LineSegmentsGeometry.js"></script>
<script src="https://threejs.org/examples/js/lines/WireframeGeometry2.js"></script>

<body>
  <button onclick="reattachFunction();">Reattach</button>
  <button onclick="wireframeFunction();">Wireframe</button>
</body>

JavaScript

const scene = new THREE.Scene();
scene.add(new THREE.GridHelper(100, 10));
scene.add(new THREE.AxesHelper(50));
scene.background = new THREE.Color(0x444444);

const camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.01, 10000);
camera.position.set(3, 3, 3)

const light = new THREE.DirectionalLight('white', 8);
light.position.set(0, 10, 10);
scene.add(light)

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animation);
renderer.physicallyCorrectLights = true
document.body.appendChild(renderer.domElement);

function animation(time) {
	renderer.render(scene, camera);
}

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

let loadedModel = null
let attachedModel = null
let wireframeModel = null

function attachModel() {
	scene.remove(attachedModel)
  scene.remove(wireframeModel)
  setTimeout(() => {
    attachedModel = loadedModel.clone(true)
    scene.attach(attachedModel)
  }, 1000);
}

new THREE.GLTFLoader().load(
	'https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf',
  function(gltf) {
  	loadedModel = gltf.scene
    attachModel()
});

function reattachFunction(e) {
	attachModel()	
}

const material = new THREE.LineMaterial({
  color: 0x4080ff,
  linewidth: 1,
  dashed: false
});
const size = renderer.getSize(new THREE.Vector2())
material.resolution.set(size.width, size.height)

function wireframeFunction(e) {
  scene.remove(attachedModel)

  // find Mesh nodes and generate Wireframes nodes; store that info in replacements map
  const replacements = new Map()
	wireframeModel = loadedModel.clone(true)
  wireframeModel.traverse((n) => {
  	n.updateWorldMatrix()
  	//console.log("#1", n.id, n.name, n.type, n.rotation, n.matrixWorld)

		const value={node: n, id: n.id, name: n.name, type: n.type, rotation: n.rotation, matrixWorld: n.matrixWorld}

		// convert each Mesh node into a new Wireframe...