反应三纤维阴影材料不起作用

Question

以下是代码，旋转网格不会在阴影材质上投射任何阴影。planeBufferGeometry似乎就在那里。------------------------------------------------------------------------------------------------------------------------------------------

import React from 'react';
import './App.scss';
import {Canvas, useFrame} from 'react-three-fiber';

const SpinningMesh = ({position, args, color}) => {
const mesh = React.useRef(null);
useFrame(()=> (mesh.current.rotation.x = mesh.current.rotation.y += 0.01))
return(
<mesh castShadow ref={mesh} position={position}> 
<boxBufferGeometry attach='geometry' args={args}/>
<meshStandardMaterial attach='material' color={color}/>
</mesh>
);
}
function App() {
return (
<>
<Canvas shadowMap colorManagement camera={{position:[-5,2,10], fov:60}}>
<ambientLight intensity={0.3}/>
<directionalLight
castShadow
position={[0,10,0]}
intensity={1.5}
shadow-mapSize-width={1024}
shadow-mapSize-height={1024}
shadow-camera-far={50}
shadow-camera-left = {-10}
shadow-camera-right = {10}
shadow-camera-top = {10}
shadow-camera-bottom = {-10}
/>
<pointLight position={[-10,0,-20]} intensity={.5}/>
<pointLight position={[0,-10,0]} intensity={1.5}/>
<group>
<mesh receiveShadow rotation={[-Math.PI / 2 , 0 , 0]} position={[0,-3,0]}>
<planeBufferGeometry attach='geometry' args={[100,100]}/>
<shadowMaterial attach='material' opacity={0.3} color="blue"/>
</mesh>
</group>

<SpinningMesh position={[0,1,0]} args={[3,2,1]} color='lightblue'/>
<SpinningMesh position={[-2,1,-5]} color='pink'/>
<SpinningMesh position={[5,1,-2]} color='pink'/>
</Canvas>
</>
);
}
export default App;

输出

Answer 1

<Canvas shadows colorManagement camera={{position:[-5,2,10], fov:60}}>

使用阴影属性，而不是在Canvas 中使用shadowMap

Answer 2

如果您想让旋转网格进行任何阴影投射，请不要忘记您还必须将castShadow设置为true：

<SpinningMesh castShadow position={[0,1,0]} args={[3,2,1]} color='lightblue'/>

请参阅此处获取文档中的快速示例

Answer 3

除了Shivam和hpalu的答案外，您还可以通过更改以下内容来修复此错误：

<Canvas **shadows** colorManagement camera={{position:[-5,2,10], fov:60}}>

使用@react three/光纤，而不是react-three-fiber