Hot to position multiple 3d objects along webpage with them interacting with the mouse all the time?


I can imagine that someone might have asked this before, but I wanted to load multiple 3d models with the following hover interaction into my webpage.

I thought it would be cool to structure them like this so that the hover event only occurs in a given frame:

Does anyone have a tip or lead for me on how to do such a thing? I don’t really know where to start structuring my .js in order to achieve the desired position of the gltf object.

Any tips would be much appreciated!

webgl can be cut into pieces with gl.scissor, there’s a threejs example for that: multiple elements. for this to be useful you will be pouring a lot more work into it. my own experience has been quite frustrating, mostly because the dom is broken, it’s not easy to just track a dom element especially in scroll containers.

if you pair threejs with react what you want is already there: it’s using drei/View.

1 Like