Ability to change z-index or z position to control stacking order

[shenghan97]

Hi!

Is it possible to change the layering order of different objects while using react three fiber? I change the z position of the object but once the useCircle hook takes into effect, the object gets snapped to z-0 again.

I tried arranging objects by changing the line order in jsx but it's not editable and not reliable - sometimes it produces artifacts.

Is there anything in use-p2 or p2.js like z-index in CSS where I can manually set the position on z-axis?

Thank you!

[isaac-mason]

You can pass the body ref to a group, then change the relative position of the mesh in that group

e.g.

function Box() {
  const [ref] = useBox(() => ({ mass: 0, position: [0, -2] }))
  return (
    <group ref={ref}>
      <mesh position-z={1}>
        <boxGeometry />
      </mesh>
    </group>
  )
}