[카테고리:] Three.JS

작성일자

R3F에서 Shader를 통한 Material

먼저 다음처럼 drei의 shaderMaterial를 이용해 GLSL로 재질을 만들 수 있습니다.

import { shaderMaterial } from '@react-three/drei'

const WaveShaderMaterial = shaderMaterial(
  {
    uColor: new THREE.Color(1, 0, 0)
  },

  /* glsl */`
    varying vec2 vUv;

    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,

  /* glsl */`
    uniform vec3 uColor;
    varying vec2 vUv;

    void main() {
      gl_FragColor = vec4(vUv.y * uColor, 1.0);
    }
  `
)

리엑트는 선언형 프로그래밍(?) 방식을 권장하므로 위에서 만든 WaveShaderMaterial을 Tag처럼 선언해서 사용할 수 있도록 해야 합니다. 이때 R3F의 extend가 사용됩니다.

import { Canvas, extend } from '@react-three/fiber'

extend({ WaveShaderMaterial })

실제 사용은 다음과 같습니다.

const MyCanvas = () => {
  return (
    <Canvas>
      <pointLight position={[10,10,10]} />
      <mesh>
        <planeGeometry args={[5,5]} />
        <waveShaderMaterial uColor={"white"} />
      </mesh>
    </Canvas>
  )
}

function App() {
  return (
    <MyCanvas />
  )
}

결과는 다음과 같습니다.

작성일자

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 ... />

        ...
    </>
}