React Three Fiber(model opacity)

Questions
,
1

Hello!

How to change opacity for model ?

thought it was possible to use the parameter children-0-material-opacity={0}
but its dont worked

2

this would typically return the first child of the gltf.scene, which in your case is an Object3D and not a mesh, your meshes seem to be deeply nested within children of children, the more logical approach would be to deconstruct the gltf and modify the material by it’s name like so…

function App() {
  const {scene, materials} = useGLTF('/rocket.glb')
  const glass = materials['window_glass']
  glass.transparent = true
  glass.opacity = 0.8

  return (
    <div className="App" style={{ height: '100vh' }}>
      <Canvas
        camera={{ position: [0, 1.7, 5] }}
        style={{ background: '#0f0f0f' }}
        gl={{
          antialias: true,
          alpha: true,
          powerPreference: 'high-performance'
        }}>
        <pointLight />
        <ambientLight intensity={0.5} color="#eaeaea" />
        <primitive
          object={scene}
          position={[1, 0.47, -3.3]}
          children-0-castShadow={true}
        />

        <color attach="background" />
        <group helpers>
          <gridHelper args={[10, 10, 'blue', 'hotpink']} />
          <axesHelper args={[5, 5]} />
          <OrbitControls />
        </group>
      </Canvas>
    </div>
  )
}

or use gltfjsx to build a comprehensive jsx component from your model whereby you can modify materials and set castShadow on meshes for each mesh of the model…

1 Like
3

Thanks :crazy_face: :love_you_gesture: :smiley:

4

This could work but then again I believe the order of children is random, not deterministic ever since gltfloader started to use workers. getObjectByName is what you would use in vanilla, this would work in Fiber as well but like @Lawrence3DPK said, gltfjsx has been made for that purpose, too to allow you to change model contents without resorting to traversal and querying.

The biggest difference between the declarative (react) and the imperative (oop) is that with the former you know the scene graph whereas with the latter you don’t, hence you must query.

5

The point is that this option works
if the model has layers but no material.

children-0-material-opacity={0}

So I thought maybe that’s the problem.

6

As I said, children is not deterministic, if child A is first today, it will be last tomorrow, the order is random.