[카테고리:] Three.JS

작성일자

R3F Shadow의 Camera에 대한 Helper 추가

three.js는 다양한 Helper를 통해 시각적으로 디버깅이 가능한데, React three Fiber에서 이 Helper를 사용하는게 그다지 명확한 API로 가능하지 않다. 다음은 R3F에서 그림자의 카메라에 대한 Helper를 추가해 표시하는 코드이다.

import * as THREE from 'three'
import { OrbitControls } from '@react-three/drei';
import { useEffect, useRef } from 'react';
import { useFrame, useThree } from '@react-three/fiber';

export default function Experience() {
    const lightRef = useRef()
    const shadowCameraRef = useRef()

    const scene = useThree((state) => state.scene)

    useEffect(() => {
        shadowCameraRef.current = new THREE.CameraHelper(lightRef.current.shadow.camera)
        scene.add(shadowCameraRef.current)

        return () => {
            scene.remove(shadowCameraRef.current)
        }
    }, [lightRef.current])

    useFrame(() => {
        shadowCameraRef.current.update()
    })

    return <>
        <ambientLight intensity={0.5} />
        <directionalLight ref={lightRef} castShadow ... />

        ...
    </>
}

작성일자

주변 환경을 비추는 객체 표현

환경맵(envmap)을 사용해서 주변 환경의 모습을 비추는 객체를 표현할 때 적용할 수 있는 코드입니다. 먼저 아무런 재질도 적용되지 않은 검정색 구체입니다.

위의 검정색 구에 주변 환경 이미지를 환경 맵 소스로 활용하는 코드는 다음과 같습니다.

const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 1024 );
this._mirrorSphereCamera = new THREE.CubeCamera( 0.05, 50, cubeRenderTarget );
this._scene.add( this._mirrorSphereCamera );
const mirrorSphereMaterial = new THREE.MeshBasicMaterial( { envMap: cubeRenderTarget.texture } );
this._sphere.material = mirrorSphereMaterial;

환경맵을 생성하는 CubeCamera 객체의 상태가 변경될 경우… 예를들어 카메라의 위치 등이 변경될 경우 다음처럼 update 매서드를 호출해줘야 합니다.

this._mirrorSphereCamera.update( this._renderer, this._scene );

이 글에 사용된 코드와 결과는 Three.js에서 제공되는 예제 코드 중 webgl_animation_skinning_ik.html에서 환경맵 적용에 대한 내용만을 정리한 것입니다.