[javascript] Three.js와 React.js의 조합 활용

29 Nov 2023

javascript

Three.js는 웹 기반 3D 그래픽을 구현하기 위한 JavaScript 라이브러리이고, React.js는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. 이 두 가지 기술을 조합해 사용하면 3D 그래픽과 상호작용하는 웹 애플리케이션을 구현할 수 있습니다.

React.js와 Three.js의 차이

React.js는 UI를 효율적으로 개발하기 위한 컴포넌트 기반 접근 방식을 제공합니다. 이렇게 UI를 작은 단위로 나누고 관리함으로써 코드의 재사용성을 높이고 유지보수를 용이하게 할 수 있습니다. 반면 Three.js는 WebGL을 기반으로 3D 그래픽을 렌더링하는 것에 중점을 둔 라이브러리입니다.

Three.js와 React.js 조합하기

React.js와 Three.js를 조합해서 사용하는 방법은 크게 두 가지로 나눌 수 있습니다.

1. React 컴포넌트 내에서 Three.js 사용하기

React 컴포넌트는 Three.js를 활용하여 원하는 3D 그래픽을 구현하는 역할을 할 수 있습니다. 이때 Three.js의 렌더러, 재질, 레이트레이서 등의 요소들을 React 컴포넌트 안에서 생성하고 조작할 수 있습니다. 이 방식은 React의 생명주기 메서드를 활용하여 Three.js 요소들을 초기화하거나 업데이트할 수 있습니다.

import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';

const Scene = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ canvas });

    // Three.js 코드로 원하는 3D 그래픽 구현

    const animate = () => {
      // Three.js 코드로 애니메이션 구현

      renderer.render(scene, camera);
      requestAnimationFrame(animate);
    };

    animate();

    return () => {
      // Three.js 이벤트 리스너 해제 등의 정리 작업
    };
  }, []);

  return <canvas ref={canvasRef} />;
};

export default Scene;

2. Three.js 컴포넌트를 React에 통합하기

다른 방법은 Three.js를 사용하는 독립적인 컴포넌트를 만들고 이를 React 애플리케이션에 통합하는 것입니다. 이때 Three.js 컴포넌트는 React 컴포넌트와 상호작용할 수 있는 이벤트나 콜백 함수를 제공할 수 있습니다.

import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';

const ThreeComponent = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ canvas });

    // Three.js 코드로 원하는 3D 그래픽 구현

    const animate = () => {
      // Three.js 코드로 애니메이션 구현

      renderer.render(scene, camera);
      requestAnimationFrame(animate);
    };

    animate();

    return () => {
      // Three.js 이벤트 리스너 해제 등의 정리 작업
    };
  }, []);

  return <canvas ref={canvasRef} />;
};

export default ThreeComponent;

위의 예시 코드에서는 React 컴포넌트와 Three.js를 조합하여 3D 그래픽을 생성하고 애니메이션을 구현하는 방법을 보여줍니다.

결론

Three.js와 React.js를 조합하여 웹 기반 3D 그래픽을 구현할 수 있습니다. React 컴포넌트 내에서 Three.js를 사용하거나 Three.js 컴포넌트를 React에 통합하는 방법을 선택할 수 있습니다. 이를 통해 3D 그래픽과 React.js의 장점을 모두 활용하여 상호작용성과 사용자 경험을 향상시킬 수 있습니다.