[react-three/fiber] 오브젝트 내부 렌더링

🍕 문제 상황

검은색 커다란 구를 생성한 후, 검은색 구 내부에 초록색 구, 노란색 구 등을 배치시켰다.

의도는 해당 초록, 노란 구들의 배경이 검은색으로 깔리는 것이였는데 외부에서는 검은색 구가 정상적으로 출력되나 검은색 구 내부에서는 검은 면이 출력되지 않았다.

 

🍔 문제 해결

 렌더링 대상이 되는 오브젝트의 material 속성에는 오브젝트의 내부, 외부, 양면 모두 렌더링 옵션을 선택할 수 있는 속성이 존재했고, 따로 지정해주지 않으면 외부만 렌더링 하는 것이 기본값이다.

 따라서 이 옵션을 내부 렌더링으로 바꿔 검은색 구 내부에서 검은 배경을 깔 수 있게 되었다.

function Sphere({ position, size, color, type }) {
  const mesh = useRef(null);

  return (
    <mesh ref={mesh} position={position}>
      <sphereGeometry args={size} />

		// material의 side 속성값을 조절해 오브젝트의 외부, 내부, 양면 렌더링
      <meshStandardMaterial color={color} side={type === "double" ? THREE.DoubleSide : type === "front" ? THREE.FrontSide : THREE.BackSide} />
    </mesh>
  );
}

 

🍟 REFERENCE

THREE.JS: Seeing geometry when inside mesh