Three js - Fiber example

전에 언급한 Fiber를 한번 사용해봤는데

 

생산성이 어마어마하게 올라갈 수 있겠다는 생각이 들었습니다

 

그럼 바로 예제로 들어가보겠습니다

 

index.tsx

import { Canvas } from "@react-three/fiber";
import React from "react";
import Box from "./Box";
import Camera from "./Camera";

const FiberExample = () => {
  return (
    <Canvas>
      <Camera />
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Box position={[-1.2, 0, 0]} />
      <Box position={[1.2, 0, 0]} />
    </Canvas>
  );
};

export default FiberExample;

Fiber에 정의되어있는 Canvas 태그 내부에 Camera, light, Box(mesh) 등을 넣어주면 되는데

 

scene에 add하는것과 동일한 맥락으로 보시면 됩니다

 

Camera.tsx

import { useThree } from '@react-three/fiber';
import { useEffect } from 'react';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

const Camera = () => {
  const { camera, gl } = useThree();

  useEffect(() => {
    const controls = new OrbitControls(camera, gl.domElement);

    controls.minDistance = 3;
    controls.maxDistance = 20;
    return () => {
      controls.dispose();
    };
  }, [camera, gl]);


  return null
}

export default Camera

orbit control을 사용하기 위해 다음과 같은 작업을 해줘야되는데

 

camera와 renderer.domElement를 가져와서 셋팅해줄 때

 

조금 더 편하도록 Fiber 내부에 있는 useThree를 사용하면 간단하게 가져올 수 있습니다

 

Box.tsx

import { Vector3, useFrame } from "@react-three/fiber";
import React, { useRef, useState } from "react";
import { Mesh } from "three";

type BoxProps = {
  position: Vector3;
};

const Box = (props: BoxProps) => {
  const mesh = useRef<Mesh>(null);

  const [active, setActive] = useState(false);

  const [hover, setHover] = useState(false);

  useFrame((state, delta) => {
    if (mesh.current !== null) {
      mesh.current!.rotation.x += delta;
      mesh.current!.rotation.y += delta;
    }
  });

  return (
    <mesh
      ref={mesh}
      position={props.position}
      scale={active ? 1.2 : 1}
      onClick={() => setActive(!active)}
      onPointerOver={() => setHover(true)}
      onPointerOut={() => setHover(false)}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hover ? "white" : "green"} />
    </mesh>
  );
};

export default Box;

개인적으로 mesh를 적용하는 부분이 가장 만족스러웠는데

 

먼저 raycaster를 사용하지 않고 정말 간단하게 hover, active를 구현할 수 있었고

 

mesh태그 내부에 원하는 속성들 정의하는 부분이

 

React 컴포넌트 사용하듯이 사용할 수 있어서 정말 편했던거 같습니다

 

< Fiber로 작업한 결과물 >