GLTF 모델에 대한 리엑트 컴포넌트 코드를 작성해 주는 명령 예시
npx gltfjsx ./public/Robot.glb -o ./src/components/Robot.jsx
공간정보시스템 / 3차원 시각화 / 딥러닝 기반 기술 연구소 @지오서비스(GEOSERVICE)
GLTF 모델에 대한 리엑트 컴포넌트 코드를 작성해 주는 명령 예시
npx gltfjsx ./public/Robot.glb -o ./src/components/Robot.jsx
React는 선언형 프로그래밍을 지향합니다. 어떤 시각적인 요소를 자식으로 선언해서 웹브라우저에 표시하는데요. 어떤 요소를 참조하기 위해 useRef 훅을 사용합니다. 그런데 처음 컴포넌트가 마운트 될때 useRef로 참조하고자 하는 요소가 아직 참조되지 않을 때가 있습니다. 이럴 때 useRef로 어떤 요소가 제대로 참조될 때 다시 컴포넌트를 렌더링해 줄 필요가 있는데요.
import { OrbitControls } from "@react-three/drei" import { useRef, useState } from "react"; import * as THREE from "three" function Outline(props) { const material = useMemo( () => new THREE.LineBasicMaterial({ color: 0xffff00 }), [] ) return <lineSegments geometry={props.geometry} material={material} /> } function MyElement3D() { const refMesh = useRef() const [, setRefAllocated ] = useState(false) return ( <> <OrbitControls /> <ambientLight intensity={0.1} /> <directionalLight position={[2, 1, 3]} intensity={0.5} /> <mesh ref={self => { refMesh.current = self; setRefAllocated(true) }} position={[-1.2, 0, 0]}> <boxGeometry args={[1,1,1,10,10,10]} /> <meshStandardMaterial color="#8e44ad" /> <Outline geometry={refMesh.current?.geometry} /> </mesh> </> ) } export default MyElement3D
상관없는 코드가 90%고 이 글과 관련된 코드가 10%인데요. 14번에 useRef에 대한 refMesh가 있고, refMesh가 참조하는 것이 25번 코드에 보입니다. 그런데 ref에 대한 지정을 함수로 지정하고 있다는 점입니다. refMesh에 요소가 참조되면 15번 코드에서 만들어 둔 상태 변경 함수를 호출하는데요. React에서 상태 변경은 컴포넌트 함수의 재실행을 의미하므로 refMesh에 어떤 요소가 할당되면 다시 컴포넌트를 렌더링하도록 유도합니다.
먼저 다음처럼 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 /> ) }
결과는 다음과 같습니다.
“하루에 배우는 리엑트 기본” 중 아래 15개의 영상이 리엑트의 기본 내용을 정리한 것입니다. 전체 시간은 100분 정도니 단디 맘 먹고 집중해 학습하면 하루에 다 이해할 수 있는 내용이므로 학습 후 바로 React 실무에 풍덩 빠져 치열하게 싸워 보시기 바랍니다.