Explain how to use the extension in the README file

Question

Explain how to use the extension in the README file

RilDev opened this issue 3 years ago · comments

Hi there,

I just got started with ThreeJS and the devtool is very nice to experiment with the lights and the scene's composition! Thank you!

I saw on the Chrome Store comments that some users have trouble using the extension though.

Wouldn't it be nice to add an example in the README file to explain to new users how to implement the observer code?

Maybe something like this:

Current API

This API has not been thought out at all, but this will register your
THREE.Scene and THREE.Renderer to be observed by the tools.

// 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 }));
}

Simply add it at the end of your animate loop, like this:

function animate() {
    requestAnimationFrame(animate);
    // ...
    // 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 })
      );
    }
  }

Joe Pea · Answer 1 · Fri Jan 07 2022 09:04:19 GMT+0800 (China Standard Time)

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?

RilDev · Answer 2 · Mon Jan 10 2022 03:09:22 GMT+0800 (China Standard Time)

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!