Isn't it possible to render RigidBody tags dynamically?

Questions
, ,
1

I have a piece of code, to render an array of scenes (as React state):

{scenes.map((scene, index) => {
  if (true) {
    return (
      <RigidBody
        key={ index }
        type="dynamic"
        colliders="trimesh"
        position={ [ 0, index * 8.1, 0 ] } >
        <primitive
          castShadow
          object={ scene } />
      </RigidBody>
    )
  }
})}

I wanted to put some condition inside if, but nothing rendered at all in the scene… Even no console error appeared… Any idea?

2

Did you check the devtools console for errors? If nothing renders, that usually means something invalidates the code entirely, some typo or syntax error.

3

of course you can render them dynamic. but as always when using primitive object, you must be aware that threejs can only ever have one thing in one place.

this is not valid in threejs

const mesh = new THREE.Mesh(...)
sceneA.add(mesh)
sceneB.add(mesh)

<primitive object={...} is fibers way of adding a pre-existing node. you add it in multiple places then threejs will delete it from the previous places. i would generally try to avoid that because you can’t re-use it. better use GLTFJSX for your models and/or drei/Gltf.

another bug that i see is this

scenes.map((scene, index) => {
  if (condition) {
    return <RigidBody key={index}

you need key to give react a hint so it can find the item back back re-ordering. if you use index and you start messing with conditions, then what was previously 2 might now be 1 or something else. it won’t know which item is which. at least use scene.uuid or something unique.

ps, trimeshing a whole scene can be challenging for any physics engine, be careful with that.

4

You’re right, maybe it’s a code-related issue… Could you please check my code?

return (
  scenes.map((scene, index) =>
    {index === 0 && <RigidBody
      key={ index }
      type="dynamic"
      colliders="trimesh"
      position={ [ 0, index * 8.1, 0 ] } >
      <primitive
        castShadow
        object={ scene } />
    </RigidBody>}
  )
)

Even using conditional rendering, nothing rendered at all…

5

Didn’t know that! Thanks for the help! But there are too many instances of one model accross the scene, while having each one in a unique place (as you can see, I set the position for each one in the loop).

However, even using Logical AND operator doesn’t sovle any problem…