Cannot cast shadow

[SeakyLuo]

Code:

import React, { useRef } from 'react';
import * as THREE from 'three';
import { Canvas, useFrame, useThree, extend } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei'

const Box = (props: any) => {
	const ref = useRef<any>();
	useFrame(state => {
		ref.current.rotation.x += 0.03;
		ref.current.rotation.y += 0.02;
		ref.current.rotation.z += 0.01;
    });
	return (
		<mesh ref={ref} {...props} castShadow receiveShadow>
			<boxBufferGeometry />
			<meshBasicMaterial color='red' />
		</mesh>
	)
}

const Floor = (props: any) => {
	return (
		<mesh {...props} receiveShadow>
			<boxBufferGeometry args={[10, 1, 10]}/>
			<meshBasicMaterial />
		</mesh>
	)
}

const Bulb = (props: any) => {
	return (
		<mesh {...props}>
			<spotLight castShadow/>
			<sphereBufferGeometry args={[0.2, 20, 20]}/>
			<meshPhongMaterial emissive='yellow' />
		</mesh>
	)
}

export default class ThreeJsPage extends React.Component<{}, {}> {

	render() {
		return (
			<div style={{height: '100vh', width: '100vw'}}>
				<Canvas
					shadows
					style={{ background: 'black' }}
					camera={{ position: [10, 0, 1] }}
				>
					<Bulb position={[0, 5, 0]} />
					<OrbitControls />
					<axesHelper args={[5]} />
					<Box position={[1, 3, 0]} />
					<Floor />
				</Canvas>
			</div>
		)
    }
}

Result:

Dependencies

"dependencies": {
    "@react-three/drei": "^9.40.0",
    "@react-three/fiber": "^8.9.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.3",
    "@types/react": "^18.0.25",
    "@types/react-dom": "^18.0.8",
    "@types/three": "^0.146.0",
    "babylonjs": "^5.31.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "three": "^0.137.5",
    "typescript": "^4.8.4",
    "web-vitals": "^2.1.4"
  }

[conor-v]

hey @SeakyLuo, I changed your floor and box materiaal to meshStandaardMaterial and then you get the shadows. I hope this helps.

Your code with my change (Sorry for deleting the typescript don't use it):

import React, { useRef } from 'react';
import * as THREE from 'three';
import { Canvas, useFrame, useThree, extend } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei'

const Box = (props) => {
	const ref = useRef();
	useFrame(state => {
		ref.current.rotation.x += 0.03;
		ref.current.rotation.y += 0.02;
		ref.current.rotation.z += 0.01;
    });
	return (
		<mesh ref={ref} {...props} castShadow receiveShadow>
			<boxBufferGeometry />
			<meshStandardMaterial color='red' />
		</mesh>
	)
}

const Floor = (props) => {
	return (
		<mesh {...props} receiveShadow>
			<boxBufferGeometry args={[10, 1, 10]}/>
			<meshStandardMaterial />
		</mesh>
	)
}

const Bulb = (props) => {
	return (
		<mesh {...props}>
			<spotLight castShadow intensity={0.5}/>
			<sphereBufferGeometry args={[0.2, 20, 20]}/>
			<meshPhongMaterial emissive='yellow' />
		</mesh>
	)
}

export default class ThreeJsPage extends React.Component {

	render() {
		return (
			<div style={{height: '100vh', width: '100vw'}}>
				<Canvas
					shadows
					style={{ background: 'black' }}
					camera={{ position: [10, 0, 1] }}
				>
					<Bulb position={[0, 5, 0]} />
					<OrbitControls />
					<axesHelper args={[5]} />
					<Box position={[1, 3, 0]} />
					<Floor />
				</Canvas>
			</div>
		)
    }
}