Wireframe#4

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 report(node) {
  node.traverse((n) => {
  	console.log("report", n.id, n.name, n.type, n.position, n.quaternion, n.matrixWorld)
	})
}

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

    //const rootNode = scene.getObjectByName( "Scene", true );
    //const meshNode = scene.getObjectByName( "node_damagedHelmet_-6514", true );
    //report(rootNode)
    //meshNode.removeFromParent()
    //report(rootNode)
    //report(meshNode)
    //meshNode.rotation.set(0, 0, 0)
    //report(meshNode)
    //rootNode.attach(meshNode)
    //report(rootNode)

  }, 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...