CODEWITHSUNDEEP
reactjsthree.jsreact-three-fiber
Jargalsaikhan Erdenetsetseg
Jargalsaikhan Erdenetsetseg

Reputation: 111

React-fiber-three cast shadows not working

I'm new to three.js and @react-fiber/three, and I created a simple box with 3 planes, used a spotLight. I'm trying to cast shadows of the box on the planes but it doesn't work.

Let me show you my code:

Test.js

The following code is imported in App.js

import React from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import Scene from "./Scenes/Scene";

const Test = () => {
  return (
    <Canvas
      colorManagement
      shadowMap
      camera={{ position: [15, 15, 15], fov: 60 }}
    >
      {/* <ambientLight color="#ffffff" intensity={0.1} /> */}
      <spotLight
        position={[2, 5, 2]}
        color="#ffffff"
        intensity={2.5}
        shadow-mapSize-height={1024}
        shadow-mapSize-width={1024}
        shadow-camera-far={50}
        shadow-camera-left={-10}
        shadow-camera-right={10}
        shadow-camera-top={10}
        shadow-camera-bottom={-10}
        castShadow
      />

      <Scene />
      <OrbitControls enablePan={true} enableZoom={true} enableRotate={true} />
    </Canvas>
  );
};

export default Test;

Scene.js in src/Scenes/

The following code is imported in Test.js (above)


import React, { useRef } from "react";
import { useFrame } from "@react-three/fiber";
import { Box, Plane } from "@react-three/drei";

const Scene = () => {
  const boxRef = useRef();
  useFrame(() => {
    boxRef.current.rotation.y += 0.001;
    boxRef.current.rotation.x += 0.001;
    boxRef.current.rotation.z += 0.001;
  });
  return (
    <group>
      <Box
        ref={boxRef}
        castShadow
        receiveShadow
        position={[0, 0.5, 0]}
        args={[3, 3, 3]}
      >
        <meshStandardMaterial attach="material" color="#C42727" />
      </Box>

      <Plane
        receiveShadow
        rotation={[-Math.PI / 2, 0, 0]}
        position={[0, -2, 0]}
        args={[15, 15]}
      >
        <meshPhongMaterial attach="material" color="#ffffff" />
      </Plane>

      <Plane
        receiveShadow
        rotation={[0, 0, 0]}
        position={[0, 5.5, -7.5]}
        args={[15, 15]}
      >
        <meshPhongMaterial attach="material" color="#ffffff" />
      </Plane>

      <Plane
        receiveShadow
        rotation={[0, Math.PI / 2, 0]}
        position={[-7.5, 5.5, 0]}
        args={[15, 15]}
      >
        <meshPhongMaterial attach="material" color="#ffffff" />
      </Plane>
    </group>
  );
};

export default Scene;

As you can see I've added castShadow to the following:

And receiveShadow to the Planes.

To my surprise, it still doesn't work.

Upvotes: 3

Views: 2520

Answers (2)

Siyavash vaez afshar
Siyavash vaez afshar

Reputation: 1493

Instead of using meshPhongMaterial for your plane use meshStandardMaterial, it will fix the issue. you can see live example here https://codesandbox.io/s/nice-cloud-rb6tj?file=/src/App.js

Upvotes: 1

Jargalsaikhan Erdenetsetseg
Jargalsaikhan Erdenetsetseg

Reputation: 111

Turns out property of the Canvas component from react-three-fiber (@react-three/fiber): shadowMaps didn't work as intended but after researching (aka googling) for a bit I've found this video.

<Canvas
    shadows
>
</Canvas>

shadows property was what I was missing.

Upvotes: 6

Related Questions