React three fiber阴影材质不起作用。

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;

输出结果

- Varun Pandey

---

嗯，有趣，React 调试工具可能会有所帮助。 - jspcal

命名空间为@react-three/fiber而不是react-three-fiber。阴影的属性名为"shadows"。网格需要castShadow和可选的receiveShadow属性，材质需要receiveShadow属性。这里有一个例子：https://codesandbox.io/s/gltf-animations-re-used-k8phr - hpalu

Answer 1

使用shadows属性而不是在Canvas中使用shadowMap

- Shivam

---

还是不行，出了什么问题？React Three Fiber版本为7.0.17。 - crapthings

请问您能否详细说明为什么在这里应该使用shadows属性而不是shadowMap？所有的教程都要求使用shadowMap属性。 - Archie

@Archie 可能是由于道具引用的更改。正如您在文档中所看到的，没有shadowMap的引用 https://docs.pmnd.rs/react-three-fiber/api/canvas。因此很有可能教程已经过时了。 - Beaumont

Answer 2

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

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

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

- Reiko Ochiai

Answer 3

不要忘记，如果您希望旋转的网格投射阴影，还需要将castShadow设置为true：

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

在文档中查看一个快速示例

- M -