primitive object not displaying correctly on multi view?

[DDman1984]

HI ,
I try to implement split view like view-skissor
but I find a strange thing ....
if I replece code to

the model only display on right bottom view....

why?
the View unsupport primitive object multi display?

pls, help me~thx

[neursh]

From my experience, so this might not be the actual reason.

Let say you have two pieces of drawing paper, the scene is the whole paper.

Then when you put one on top, you can only see that one that you put on top.

So when displaying GLTF models using primitive and set the model's scene to object, you're asking three to put the whole scene of that first loaded object, just like the drawing paper scenarios.

This also explains why when we're editing or adding new changes in one of them, it will display the latest edited primitive, because now that object is the latest added object after hot reload.

Components in three doesn't have scene to it, think of it like a pencil for you to draw on the drawing paper.

Adding components to the scene doesn't affect the scene overall.

For example, I'll use this code:

<Canvas eventSource={document.getElementById("root")} className="canvas">
  <OrbitControls />
  <Environment preset="city" />
  <Soda key={1} scale={3} position={[0, 0, 0]} />
  <Soda key={2} scale={3} position={[1, 1, 1]} />
</Canvas>

This is what I got after changing <Soda> component to use primitive:

And when I change the second one to anything, causing it to reload, its scene will be on top, making the first one disappear:

And this is what I got using the example code provided:

The second one works because it's using actual mesh of the object, instead of the whole scene of the object.

Finally, one of them is primitive:

FYI, you can convert your object to reusable JSX component using gltfjsx, try out the official demo here.

After that, your View scene should work as intended!

I don't know much about three, so I would love to see someone correct me 🥲.