R3F : react three fiber

three.js journey강의를 듣고 작성합니다.

 

리액트 스크립트로 하려니까 계속 에러가 났음

vite로 하니까 빠르고 잘된다 

import {Canvas} from "@react-three/fiber";
import Three from "./Three.jsx";

function App() {
  return (
    <>
      <Canvas>
          <Three/>
      </Canvas>
    </>
  )
}

export default App

 

컴포넌트 호출하듯이 사용하면 된다

부모 Canvas로 감싸주고 그안에 three라는 컴포넌트 호출함 

아래는 three 컴포넌트 코드이다 

import { extend, useFrame, useThree} from "@react-three/fiber";
import { useRef} from "react";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js"

extend({OrbitControls}) //jsx처럼 사용하게 해줌

const Three = () => {
    const cubeRef = useRef()
    const {camera, gl} = useThree()

    useFrame((state, delta)=>{
        cubeRef.current.rotation.y += delta
    })

    return (
        <>
            <orbitControls args={[camera,gl.domElement]}/>
            <directionalLight position={[1,2,3]} intensity={4.3}/>
            <ambientLight intensity={1.2}/>
            <mesh position-x={-1.5}>
                <sphereGeometry/>
                <meshStandardMaterial />
            </mesh>
            <mesh ref={cubeRef} position-x={1} scale={1.5} >
                <boxGeometry/>
                <meshStandardMaterial color="pink"/>
            </mesh>
            <mesh position-y={-1} scale={10} rotation-x={-Math.PI * 0.5}>
                <planeGeometry/>
                <meshStandardMaterial color="yellow"/>
            </mesh>
        </>
    );
};

export default Three;

 

 • extend  

extend({ OrbitControls: OrbitControls })
extend({OrbitControls})
//둘 다 사용 가능

: R3F에서 지원함 코드와 같이 기입하면 jsx 문법으로 사용할 수 있다 

 • useThree  

: R3F에서 지원하는 훅으로 three.js 기본적인 상태와 context를 가져온다 

 • OrbitControls  

 : 카메라를 마우스로 드래그 줌인, 줌아웃등 할 수 있는 컨트롤러

OrbitControls( object : Camera, domElement : HTMLDOMElement )

useThree에서 오빗컨트롤에 필요한 인자들을 가져와서 썼다 

주요 옵션

enableZoom	마우스 휠로 줌 가능 여부	true
enableRotate	마우스로 회전 가능 여부	true
enablePan	오른쪽 버튼 드래그로 카메라 이동 가능 여부	true
minDistance	줌 아웃할 수 있는 최소 거리	0
maxDistance	줌 인할 수 있는 최대 거리	Infinity
minPolarAngle	아래쪽 회전 각도 제한	0
maxPolarAngle	위쪽 회전 각도 제한	Math.PI

 • directionalLight  

 : 일정방향으로 빛을 쏘아줌 마치 태양처럼 ~ 

주요 옵션

position	빛이 오는 방향 ([x, y, z])	[0, 1, 0]
intensity	빛의 밝기 (0이면 꺼짐)	1
color	빛의 색상 (hex 값)	white
castShadow	그림자 활성화 여부	false