Explain how to use the extension in the README file #67

Activity

1. trusktr commented on Jan 7, 2022

   

   trusktr

   on Jan 7, 2022

   More actions

   How do we make the UI appear?

   Do we need to dispatch those event on every render? Does it need to happen before or after the scene is rendered?

   Can you please add details to README?
2. RilDev commented on Jan 9, 2022

   

   RilDev

   on Jan 9, 2022

   Last edited by RilDev

   Author

   More actions

   Hi @trusktr, I'd give you an answer in a nanosecond but I lost the technology and it would be a painful process to build it back again... https://www.youtube.com/watch?v=6SlTNI0fzJc

   Alright, jokes apart, it seems they fixed the issue. Now you just need the extension and open it in your Devtool:
   https://chrome.google.com/webstore/detail/threejs-developer-tools/ebpnegggocnnhleeicgljbedjkganaek

   

   You should be able to interact with your scene's objects:

   

   If you're still having issues, I went through the pain of rebuilding a minimal working example of the legacy solution:

   <!DOCTYPE html>
   <html>
   	<head>
   		<meta charset="utf-8">
   		<title>My first three.js app</title>
   		<style>
   			body { margin: 0; }
   		</style>
   	</head>
   	<body>
   		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
   		<script>
   			const scene = new THREE.Scene();
   			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
   
   			const renderer = new THREE.WebGLRenderer();
   			renderer.setSize( window.innerWidth, window.innerHeight );
   			document.body.appendChild( renderer.domElement );
   
   			const geometry = new THREE.BoxGeometry();
   			const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
   			const cube = new THREE.Mesh( geometry, material );
   			scene.add( cube );
   
   			camera.position.z = 5;
   
   			function animate() {
   				requestAnimationFrame( animate );
   
   				cube.rotation.x += 0.01;
   				cube.rotation.y += 0.01;
   
   				renderer.render( scene, camera );
   
                                   /** HERE IS THE CODE THAT WILL ENABLE THE THREEJS EXTENSION **/                                
                                   // Observe a scene or a renderer
                                   if (typeof __THREE_DEVTOOLS__ !== "undefined") {
                                             __THREE_DEVTOOLS__.dispatchEvent(
                                                       new CustomEvent("observe", { detail: scene })
                                             );
                                             __THREE_DEVTOOLS__.dispatchEvent(
                                                       new CustomEvent("observe", { detail: renderer })
                                             );
                                   }
                                   /**  END OF THE CODE THAT WILL ENABLE THE THREEJS EXTENSION **/
   			};
   
   			animate();
   		</script>
   	</body>
   </html>

   Hope it helps!