Download

Common Gotchas

There are certain scenarios that causes the editor to bail out from being able to edit or be represented in the scene panel.

Dynamically rendering elements

A common pattern in code is to render elements from data, like:

const data = [{ position: [0, 0, 0] }, { position: [1, 1, 1] }];
 
data.map((d) => <mesh {...d} />);

While there isn't anything wrong with this you won't get the best results inside the editor. Only the single element will be represented in the elements list, as well the position being exclusively controlled in code.

Instead declaring the elements statically, like:

<mesh position={[0, 0, 0]} />
<mesh position={[1, 1, 1]} />

Means the editor can pick up each element and display them in the elements list, as well as being able to interacted and transformed in the scene.