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

Questions
1

Hi!

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:

Frame 1368
Frame 13681920×4925 159 KB

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!

2

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: https://codesandbox.io/s/view-tracking-bp6tmc it’s using drei/View.

1 Like