2

I'm using react three fiber and gltf from vectary and I'm trying to add shadow of my gltf on my <planeBufferGeometry/>. It doesn't work and I don't know what I'm doing wrong.

Here is the code:

softShadows();

const ArcCircleGltf = () => {
   const gltf = useLoader(GLTFLoader, '/assets/gltf/portfolio.gltf');
   return (
      <Suspense fallback={null}>
         <primitive object={gltf.scene} />
      </Suspense>
   );
};

const ArcCircle = () => {
   const reactGltf= useRef<three.Mesh>();

   useFrame(() => {
      reactGltf.current!.rotation.x += 0.003;
      reactGltf.current!.rotation.y += 0.003;
   });

   return (
      <mesh ref={reactGltf} position={[0, 0, 0]} castShadow>
         <ArcCircleGltf />
      </mesh>
   );
};

const Plane = () => {
   const plane = useRef<three.Mesh>(null);

   return (
      <mesh ref={plane} rotation={[-Math.PI / 2, 0, 0]} position={[0, -4, 0]} receiveShadow>
         <planeBufferGeometry attach='geometry' args={[100, 100]} />
         <shadowMaterial attach='material' color='white' opacity={0.2} />
      </mesh>
   );
};

const CanvasComp = () => {
   return (
      <Canvas shadows camera={{ position: [5, 0, 5], fov: 5 }}>
         <ambientLight intensity={0.1} />
         <directionalLight
            position={[5, 5, 4]}
            intensity={1}
            castShadow
            shadow-mapSize-height={512}
            shadow-mapSize-width={512}
            shadow-camera-far={50}
            shadow-camera-left={-10}
         />
         <pointLight position={[1, 1, 0]} intensity={1} />
         <ArcCircle />
         <Plane />
         <OrbitControls />
      </Canvas>
   );
};

Regarding all the tutorials and on forum it looks like I'm doing everything all right. I think that the planeBufferGeometry is not set correctly but I'm not sure obviously.

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
Simon
  • 209
  • 4
  • 12

1 Answers1

0

Hi I'm not sure if this is still relevant to you but I couldn't get my gltfs to cast a shadow either until I added this line of code.

gltf.scene.traverse( function( node ) {
        if ( node.isMesh ) { node.castShadow = true; }
    } );

Apparently you need to add the castShadow property to all the child meshes that make up your gltf model.

How to cast a shadow with a gltf model in three.js?

ktynktynktyn
  • 1