Hi,
I have this project where multiple html/css 2D button navigation has to be added to a three.js webgl brain:
http://imajinnation.432.co.za/Neural-Network/Neural-Network-2/
I’ve tried following this article but as a newbie, I’m totally lost:
https://manu.ninja/webgl-three-js-annotations/
The visualization of the neural network looks really great!
Can you please explain what parts of the tutorial are difficult to comprehend for you?
The implementing - either I get that the canvas has already been declared, it doesn’t load or the navigation doesn’t go to the correct coordinates.
Neural-Network-Nav-master.zip (919.0 KB)
I’ve updated your code so the pure HTML/CSS approach should work. I’ve added all changes to app.js, meaning the query for the annotation element and the updateScreenPosition() function.
Not sure you really need the sprite approach. In any event, because you are using three.js in version r71, it’s not yet possible to use THREE.CanvasTexture. However, you can replace it with the following code:
const texture = new THREE.Texture( canvas );
texture.needsUpdate = true;
You Rock!
Thank you so much.