몇 분 안에 React와 Three.js를 사용하는 방법 ⏳

이 글을 읽고 있다면 Three.js를 사용하여 함께 반응하는 놀라운 예제를 보았을 것입니다. 하지만 시작하는 방법이 간단하고 명확한 단계를 찾지 못했을 수도 있으므로 이 내용은 여러분을 위한 것입니다 💙.

이 섹션에서는 다음을 수행합니다.

React 앱 만들기

종속성 설치

Three.js용 React 구성 요소 만들기

Three.js로 React 구성 요소 가져오기/사용

자원

시작하기 전에

계속 진행하기 전에 다음을 설치 또는 구성해야 하며 사용에 대한 최소한의 기본 사항을 알고 있어야 합니다.

NodeJS 설치됨(12 이상 권장)

React 기본 지식

create-react-app의 이전 사용

반응 앱 만들기

npx create-react-app cra-threejs
npm run start

모든 것이 예상대로 작동하면 다음으로 이동할 수 있습니다. http://localhost:3000/
그러면 React 앱이 표시됩니다

.

종속성 설치

three.js 패키지 설치

npm i three

Three.js용 React 구성 요소 만들기

새 구성 요소에 대한 새 파일을 만들고 src 폴더

아래에 이름을 지정합니다Three.js.

생성된Three.js 파일

에 다음을 복사합니다.

여기서 수행하는 작업:

앱

으로 three.js 가져오기

useEffect를 사용하여 three.js 구성 요소

의 장면을 렌더링합니다.

우리는 three.js 문서에 나와 있는 것처럼 본문 문서가 아니라 우리가 만들고 있는 구성 요소에 three.js 구성 요소를 마운트하기를 원하기 때문에 useRef를 사용하고 있습니다.

import * as THREE from 'three';

import { useEffect, useRef } from "react";

function MyThree() {
  const refContainer = useRef(null);
  useEffect(() => {
    // === THREE.JS CODE START ===
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    // document.body.appendChild( renderer.domElement );
    // use ref as a mount point of the Three.js scene instead of the document.body
    refContainer.current && refContainer.current.appendChild( renderer.domElement );
    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    camera.position.z = 5;
    var animate = function () {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    };
    animate();
  }, []);
  return (
    <div ref={refContainer}></div>

  );
}

export default MyThree

React

와 작동하도록 약간 변경하여 here에서 참조를 가져왔습니다.

Three.js로 React 컴포넌트 가져오기/사용

파일 열기:/src/App.js

파일 맨 위에 추가하여 만든 구성 요소를 가져옵니다.

import Three from './Three';

앱 구성 요소 내에서 구성 요소를 사용하십시오.

<Three />

흥, 예상대로 모든 것이 브라우저에 다음과 같이 표시되어야 합니다

.

자원

Link 작업 예제

에 대한 github repo로

Create React App

threejs.

읽어 주셔서 감사합니다