3D Model doesn't cast shadow

I’m experimenting three.js on React. I’ve loaded a 3D model that I exported in a .glb with blender.
Lotus 3D Model

B ut when I try to make it cast a shadow, nothing happens. Being new to threeJS I cast the shadow the same way as you cast it on a build in component like sphere etc.

import { Loader, OrbitControls } from "@react-three/drei"

import { Suspense } from "react"

import { Canvas } from "react-three-fiber"

import { Model } from "./Robot"

import "./App.css"

export const Home = () => {


    return (


        <Canvas shadowMap colorManagement >

            <ambientLight intensity={0.3} />



                position={[0, 10, 0]}








                shadowCameraBottom={-10} />

            <pointLight position={[-10, 0, -20]} intensity={0.5} />

            <pointLight position={[0, -10, 0]} intensity={1.5} />


                <mesh receiveShadow rotation={[-Math.PI / 2, 0, 0]} position={[0, -2, 0]} >

                    <planeBufferGeometry attach="geometry" args={[100, 100]} />

                    <shadowMaterial attach="material" opacity={0.3} />



            <Suspense fallback={null}>

                <mesh castShadow>

                    <Model scale={[0.2, 0.2, 0.2]} url="/lotusModel.glb" />



            <OrbitControls autoRotate />


        <Loader />




in order to cast shadows meshes must have receiveShadow and castShadow props. when you load a model via GLTFLoader it gives you a scene with nested meshes, none of which have these props. if you use vanilla three you’d now traverse it and mutate the data which is not optimal. in react you could do the same, but better use GitHub - pmndrs/gltfjsx: 🎮 Turns GLTFs into JSX components