How can I load a GLTF model and use it to cast a shadow?

[alishobeiri]

I am able to load the model by using:

    const gtlf = useLoader(GLTFLoader, "arwing.glb");

    gtlf.scene.children.forEach((mesh, i) => {
        mesh.castShadow = true;
    })
    gtlf.castShadow = true;
    gtlf.scene.castShadow = true;
    
    return (
        <primitive object={gtlf.scene.children[0]}/>
   );

However, when I render the scene the mesh does not cast a shadow, how can I resolve this?

Thanks in advance :D

[alishobeiri]

This is my full code:

import ReactDOM from "react-dom"
import React, { useRef, useMemo, useCallback, Suspense } from "react"
import {Canvas, useFrame, useThree, extend, useLoader} from "react-three-fiber"
import { Stars, Sky, TrackballControls } from 'drei'
import { softShadows } from "drei"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import "./styles.css"
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader";

// Inject soft shadow shader
softShadows()

extend({ OrbitControls });

const CameraControls = () => {
    // Get a reference to the Three.js Camera, and the canvas html element.
    // We need these to setup the OrbitControls component.
    // https://threejs.org/docs/#examples/en/controls/OrbitControls
    const {
        camera,
        gl: { domElement },
    } = useThree();
    // Ref to the controls, so that we can update them on every frame using useFrame
    const controls = useRef();
    useFrame((state) => controls.current.update());
    return <orbitControls ref={controls} args={[camera, domElement]} />;
};

function Lights() {
    const dirLight1 = useRef()
    const dirLight2 = useRef()
    const dirLight3 = useRef()

    const { size, viewport } = useThree()
    const aspect = size.width / viewport.width
    const zPos = 10;
    useFrame(({ mouse }) => {
        const x = (mouse.x * viewport.width) / 2
        const y = (mouse.y * viewport.height) / 2
        dirLight1.current.position.set(x, y, zPos)
        dirLight2.current.position.set(-x, y, zPos)
        dirLight3.current.position.set(0, y, zPos)


        // light.current.rotation.set(-y, x, 0)
    })

    return (
        <group>
            <spotLight
                ref={dirLight1}
                castShadow
                intensity={0.5}
                lookAt={[0, 0, 0]}
                shadow-mapSize-width={1024}
                shadow-mapSize-height={1024}
                shadow-camera-far={5000}
                shadow-camera-left={-10}
                shadow-camera-right={10}
                shadow-camera-top={10}
                shadow-camera-bottom={-10}
            />
            <spotLight
                ref={dirLight2}
                castShadow
                intensity={0.1}
                lookAt={[0, 0, 0]}
                shadow-mapSize-width={1024}
                shadow-mapSize-height={1024}
                shadow-camera-far={5000}
                shadow-camera-left={-10}
                shadow-camera-right={10}
                shadow-camera-top={10}
                shadow-camera-bottom={-10}
            />
            <spotLight
                ref={dirLight3}
                castShadow
                intensity={0.1}
                lookAt={[0, 0, 0]}
                shadow-mapSize-width={1024}
                shadow-mapSize-height={1024}
                shadow-camera-far={5000}
                shadow-camera-left={-10}
                shadow-camera-right={10}
                shadow-camera-top={10}
                shadow-camera-bottom={-10}
            />
        </group>

    )
}


function Sphere({ position = [0, 0, 0], ...props }) {
    const ref = useRef()
    return (
        <mesh ref={ref} position={position} {...props} castShadow>
            <sphereBufferGeometry attach="geometry" args={[2, 32, 32]} />
            <meshStandardMaterial attach="material" color="orange" roughness={0} metalness={0.1} />
        </mesh>
    )
}

function Spheres({ mouse, lights, number = 1}) {
    const ref = useRef()
    const positions = useMemo(() => [...new Array(number)].map(() => [0, 2, 0]), [])
    return (
        <group ref={ref}>
            {positions.map((pos, index) => (
                <Sphere key={index} position={pos} />
            ))}
        </group>
    )
}

function ArWing() {
    const gtlf = useLoader(GLTFLoader, "arwing.glb");

    gtlf.scene.children.forEach((mesh, i) => {
        mesh.castShadow = true;
    })
    gtlf.castShadow = true;
    gtlf.scene.castShadow = true;

    return (
        <primitive object={gtlf.scene.children[0]}/>
   );
}


function App() {
    const lights = useRef()

    return (
        <Canvas colorManagement
                shadowMap camera={{ position: [-5, 2, 10], fov: 60 }}>
            <ambientLight intensity={0.5} />
            <Lights/>
            <group position={[0, -3.5, 0]}>
                <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.5, 0]} receiveShadow>
                    <planeBufferGeometry attach="geometry" args={[100, 100]} />
                    <shadowMaterial attach="material" transparent opacity={0.0} />
                    <meshStandardMaterial attach="material" color={0xffffff} />
                </mesh>
                <mesh rotation={[0, 0, 0]} position={[0, 24.5, -50]} receiveShadow>
                    <planeBufferGeometry attach="geometry" args={[100, 50]} />
                    <shadowMaterial attach="material" transparent opacity={0.0} />
                    <meshStandardMaterial attach="material" color={0xffffff} />
                </mesh>
                {/*<Spheres light={lights}/>*/}
                <Suspense fallback={null}>
                    <ArWing/>
                </Suspense>

            </group>

            <Stars/>
            <CameraControls/>
        </Canvas>
    )

}

ReactDOM.render(
    <App/>,
    document.getElementById("root")
)

[alishobeiri]

I was able to resolve my own issue by doing the following:

function ArWing() {
    const gtlf = useLoader(GLTFLoader, "arwing.glb");

    gtlf.scene.children.forEach((mesh, i) => {
        mesh.castShadow = true;
    })
    gtlf.castShadow = true;
    gtlf.scene.castShadow = true;

    const geo = useMemo(() => gtlf.__$[2].geometry, [])
    const mat = useMemo(() => gtlf.__$[2].material, [])

    return (
        <mesh castShadow>
            <bufferGeometry attach="geometry" {...geo} />
            <meshStandardMaterial attach="material" {...mat} />
        </mesh>
    );

[drcmda]

the only node than can cast and receive shadow is mesh, putting these flags onto the scene does nothing.
i would suggest you check out https://github.com/react-spring/gltfjsx
it makes it so, so much easier to deal with gltf, because the entire tree is declarative. now it becomes trivial to add individual properties without having to traverse, like in plain threejs.

also __$ is obsolete, it will be removed. better use:

const { nodes, material } = useLoader(GLTFLoader, "arwing.glb")

[ThorstenBux]

Actually, (as this approach wasn't working for me) it should be gltf.scene.traverse to catch all children in the scene not gltf.scene.children.forEach.