Explain how to use the extension in the README file #67
Comments
|
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? |
|
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:
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! |
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.
Simply add it at the end of your animate loop, like this:
The text was updated successfully, but these errors were encountered: