#why my material is visible from one side but not the other even tho I'm using an ambient light?

14 messages · Page 1 of 1 (latest)

open prawn
#

here's my code
`import { OrbitControls } from "@react-three/drei";
import { DirectionalLight, PerspectiveCamera } from "three";
import { Canvas, useFrame } from "@react-three/fiber";
import { useState, useRef } from "react";

export default function Home() {
const [mosPos, setMosPos] = useState([0, 0]);

const Box = () => {
const mesh = useRef()
return (
<mesh position={[0, 0, 0]} ref={mesh}>
<boxGeometry args={[2, 2, 2, 5, 5, 5]} />
<meshStandardMaterial color={"hotpink"} />
</mesh>
);
};

const CameraHelper = () => {
const camera = new PerspectiveCamera(45, 1, 0.1, 1000);
return (
<group position={[0, 0, 10]}>
<cameraHelper args={[camera]} />
</group>
);
};

const Plan = () => {
return (
<mesh position={[0, -2, 0]} rotation={[Math.PI / 2, 0, 0]}>
<planeGeometry args={[10, 10]} />
<meshStandardMaterial color={"white"} />
</mesh>
);
};
const directionaligntProps = {
position: [0, 5, 2],
rotateX: Math.PI / 2,
rotateY: 0,
intensity: 10,
};
const LightHelper = () => {
const light = new DirectionalLight(0xffffff, 1);
return (
<group {...directionaligntProps}>
<directionalLightHelper args={[light]} />
</group>
);
};
return (
<div className="w-screen h-screen">
<Canvas
className="bg-black"
camera={{
fov: 45,
near: 0.1,
far: 1000,
position: [0, 0, 10],
}}
>
{/* <directionalLight /> /}
<ambientLight intensity={0.5} />
<directionalLight
{...directionaligntProps}
color={"white"}
castShadow
/>
<LightHelper />
<Box />
<Plan />
{/ <CameraHelper /> */}
<OrbitControls></OrbitControls>
</Canvas>
</div>
);
}
`

#

I fixed it by flipping the plane 270 degrees instead of 90 but I don't know why it works but now, why I don't have shadows on it ? it should show shadow right?

quiet bronze
#

The material you put on the plane is single sided. to see the material when you look from the top and bottom, be sure to set it to double side. However, if you don't need it two sided it's a little more efficent to have it one sided

#

For the shadows, your directional light needs to be set to cast shadows

#

as does the cube

#

then the plane needs to be set to recieve shadows

open prawn
#

`
import { DoubleSide } from "three";

export default function Home() {
const [mosPos, setMosPos] = useState([0, 0]);

const Box = () => {
const mesh = useRef()
return (
<mesh position={[0, 0, 0]} ref={mesh} castShadow={true}>
<boxGeometry args={[2, 2, 2, 5, 5, 5`]} />
<meshStandardMaterial color={"hotpink"} side={DoubleSide} />
</mesh>
);
};

const CameraHelper = () => {
const camera = new PerspectiveCamera(45, 1, 0.1, 1000);
return (
<group position={[0, 0, 10]}>
<cameraHelper args={[camera]} />
</group>
);
};

const Plan = () => {
return (
<mesh
position={[0, -2, 0]}
rotation={[(3 * Math.PI) / 2, 0, 0]}
receiveShadow={true}
>
<planeGeometry args={[10, 10]} />
<meshStandardMaterial color={"white"} />
</mesh>
);
};
const directionaligntProps = {
position: [0, 5, 2],
rotateX: Math.PI / 2,
rotateY: 0,
intensity: 1,
};
const LightHelper = () => {
const light = new DirectionalLight(0xffffff, 1);
return (
<group {...directionaligntProps}>
<directionalLightHelper args={[light]} />
</group>
);
};
return (
<div className="w-screen h-screen">
<Canvas
className="bg-black"
camera={{
fov: 45,
near: 0.1,
far: 1000,
position: [0, 0, 10],
}}
>
<ambientLight intensity={0.5} />
<directionalLight
{...directionaligntProps}
color={"white"}
castShadow={true}
shadow={true}
/>
<LightHelper />
<Box />
<Plan />
{/* <CameraHelper /> */}
<OrbitControls></OrbitControls>
</Canvas>
</div>
);
}
`

#

this is my code now I still can't see shadow and the material is one sided

quiet bronze
#

You only made the box doubleSided not the plane

open prawn
#

my bad, works now but not the shadow

quiet bronze
#

You need to add shadows to the canvas to activate them for the scene

#

be sure to checkout the r3f docs, there's tons of examples