Hi,
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} />
<directionalLight
castShadow
position={[0, 10, 0]}
intensity={1.5}
shadowMapHeight={1024}
shadowMapWidth={1024}
shadowCameraFar={50}
shadowCameraLeft={-10}
shadowCameraRight={10}
shadowCameraTop={10}
shadowCameraBottom={-10} />
<pointLight position={[-10, 0, -20]} intensity={0.5} />
<pointLight position={[0, -10, 0]} intensity={1.5} />
<group>
<mesh receiveShadow rotation={[-Math.PI / 2, 0, 0]} position={[0, -2, 0]} >
<planeBufferGeometry attach="geometry" args={[100, 100]} />
<shadowMaterial attach="material" opacity={0.3} />
</mesh>
</group>
<Suspense fallback={null}>
<mesh castShadow>
<Model scale={[0.2, 0.2, 0.2]} url="/lotusModel.glb" />
</mesh>
</Suspense>
<OrbitControls autoRotate />
</Canvas>
<Loader />
</>
)
}