反应三纤维阴影 material 不工作
React three fiber Shadow material not working
下面是代码,旋转的网格不在阴影上投射任何阴影material。
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;
output
如果您希望旋转网格进行任何阴影投射,请不要忘记还必须将 castShadow
设置为 true:
<SpinningMesh castShadow position={[0,1,0]} args={[3,2,1]} color='lightblue'/>
<Canvas shadows colorManagement camera={{position:[-5,2,10], fov:60}}>
在 Canvas
中使用 shadows 属性而不是使用 shadowMap
下面是代码,旋转的网格不在阴影上投射任何阴影material。 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;
output
如果您希望旋转网格进行任何阴影投射,请不要忘记还必须将 castShadow
设置为 true:
<SpinningMesh castShadow position={[0,1,0]} args={[3,2,1]} color='lightblue'/>
<Canvas shadows colorManagement camera={{position:[-5,2,10], fov:60}}>
在 Canvas
中使用 shadows 属性而不是使用 shadowMap