react-three-fiber: 행성 화성 애니메이션 🚀

내가 기억하는 한, 나는 항상 Space에 매료되었습니다. 하지만 프로그래밍에 대해 들었을 때...

안녕! 오늘 우리는 three.js과 react-three-fiber을 사용하여 화성 행성을 만들 것입니다.

Link to the finished project

three.js와 react-three-fiber는 무엇인가요?

이 튜토리얼은 three.js의 기초를 이미 알고 있는 사람들을 위한 것입니다. 이미 소개 가이드가 너무 많기 때문에 자세한 내용은 다루지 않겠습니다. 오늘은 연습에 집중하고 싶습니다.

그러나 간단히 말해서:

three.js — 3D 그래픽을 만들기 위한 JavaScript 라이브러리입니다.

react-three-fiber — 웹 및 react-native에서 three.js용 React 렌더러입니다.

시작합니다!

첫 번째! 이 가이드의 파일 구조:



이제 세부 사항에 대해 살펴 보겠습니다. 우리 프로젝트에서는 세 가지 주요 구성 요소를 만들어야 합니다.

구체 — 이것은 행성 화성이 될 것입니다

SkyBox — 이것은 우리의 공간입니다. CubeTextureLoader()를 사용하여 만들 것입니다. 이 구성 요소의 경우 큐브 각 측면의 배경에 대해 6개의 이미지를 가져와야 합니다.

CameraControls — 매우 중요한 구성 요소입니다. 이렇게 하면 원하는 대로 구(화성)를 회전하고 크기를 조정할 수 있습니다.

구체 생성

Sphere 구성 요소부터 시작하겠습니다.

import React, { useRef } from "react";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { useFrame, useLoader } from "react-three-fiber";

const Sphere = () => {
  const planet = useRef();

  const { nodes } = useLoader(GLTFLoader, "models/mars.glb");

  useFrame(() => (planet.current.rotation.y += 0.0002));

  return (
    <mesh
      ref={planet}
      visible
      position={[0, 0, 0]}
      // Adding data from mars.glb to the geometry and material of the sphere
      geometry={nodes.Cube008.geometry}
      material={nodes.Cube008.material}
    />
  );
};

export default Sphere;

우리는 구의 기하학과 재료를 생성하는 미리 만들어진 gltf 3D 파일을 사용하고 있습니다. the official NASA website에서 얻을 수 있습니다. gltf 파일로 작업하려면 three.js의 GLTFLoader과 react-three-fiber의 useLoader() 후크를 사용합니다. 또한 행성에 회전을 추가하는 후크useFrame()를 사용합니다.

스카이박스 생성

SkyBox가 null을 반환하는 방법에 주목하십시오. 장면에서 이 구성 요소로 새 객체를 생성하지 않기 때문입니다. 대신 스카이박스 텍스처를 로드하고 적용할 때 다음 단계에서 볼 수 있듯이 장면에서 속성을 설정하는 컨트롤러로 사용할 것입니다.

import { useThree } from "react-three-fiber";
import { CubeTextureLoader } from "three";

// Loads the skybox texture and applies it to the scene.
const SkyBox = () => {
  const { scene } = useThree();
  const loader = new CubeTextureLoader();
  // The CubeTextureLoader load method takes an array of urls representing all 6 sides of the cube.
  const texture = loader.load([
    "/images/front.jpg",
    "/images/back.jpg",
    "/images/top.jpg",
    "/images/bottom.jpg",
    "/images/left.jpg",
    "/images/right.jpg",
  ]);

  // Set the scene background property to the resulting texture.
  scene.background = texture;
  return null;
};

export default SkyBox;

시작하려면 Three.JS 장면의 참조를 가져와야 하며 이를 위해 useThree() 후크를 사용합니다. 그런 다음 CubeTextureLoader의 인스턴스를 생성한 다음 이미지의 6개 URL을 포함하는 배열로 로드 메서드를 호출합니다. 그러면 CubeTexture가 반환됩니다. 우리가 scene.background 로 참조를 얻는 전역 useThree() 에 할당하는 CubeTexture , 그리고 이것으로 스카이박스가 완성됩니다.

스카이박스 텍스처

Skybox 텍스처 생성에 대해 이야기하는 것도 중요합니다. 이를 위해 Spacescape 프로그램을 사용하고 있었습니다. 이것은 간단한 공간 풍경 생성기입니다. 그것을 사용하거나 Photoshop 등에서 자산을 만들 수 있습니다.

카메라 컨트롤

그리고 카메라 제어에 대한 마지막 사항입니다. 여기서는 OrbitControls 을 사용하여 카메라가 대상 주위를 회전할 수 있도록 합니다.

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

extend({ OrbitControls });

const CameraControls = () => {
  const {
    camera,
    gl: { domElement },
  } = useThree();

  // Ref to the controls, so that we can update them on every frame with useFrame
  const controls = useRef();

  camera.position.z = 999;

  useFrame(() => controls.current.update());

  return (
    <orbitControls
      ref={controls}
      args={[camera, domElement]}
      autoRotate={false}
      enableZoom={false}
    />
  );
};

export default CameraControls;

마치다

이제 생성된 모든 구성 요소를 App 구성 요소에 사용할 수 있습니다.

import React, { Suspense } from "react";
import { Canvas } from "react-three-fiber";
import "./styles.css";

import { CameraControls, Sphere, SkyBox } from "./components";

const App = () => {
  return (
    <>
      <Canvas className="canvas">
        <CameraControls />
        <directionalLight intensity={1} />
        <ambientLight intensity={0.6} />
        <Suspense fallback="loading">
          <Sphere />
        </Suspense>
        <SkyBox />
      </Canvas>
    </>
  );
};

export default App;

또한 styles.css에 스타일을 추가합니다.

* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

그게 다야. 읽어주셔서 감사합니다 =)