시리즈를 계속 진행하면서 이 게시물에서는 이 프로젝트의 실제 코드를 볼 것입니다. 항상 그렇듯이 전체 프로젝트는 아래의 개인 저장소에서 사용할 수 있습니다.

jgcarrillo / 반응 fp-운동

1인칭 카메라에서 캐릭터를 제어하기 위한 기하학 및 gLTF 모델이 있는 기본 장면

React Three Fiber - 1인칭 움직임

목차 👇

✨ Motivation

🚩 Technologies

🕸️ Project Structure

🚀 Basic Explanation

🌎 Contact

✨ 동기

몇 달 전에 저는 React Three Fiber로 작업하기 시작했습니다. 라이브러리가 제공하는 3D 환경 생성 가능성에 깊은 인상을 받았습니다. R3F website에서 다양한 예를 보았기 때문에 프로젝트에 대해 더 알아보기 시작했습니다.
좋은 예가 너무 많지만 그 중 일부(예: a Ping Pong game 또는 이벤트 a simple Arkanoid clone)로 동기를 부여받습니다.
그 이후로 저는 React Three Fiber와 Three.js의 핵심 개념을 이해하기 위해 많은 프로젝트에 참여했습니다. 나는 스스로를 R3F 프로도, 초보자도 아니라고 생각하지만, 이제는 이런 3D 시나리오를 만들 수 있다는 사실에 자신이 있다.
…

View on GitHub

물리학 🧲

이 예에서는 특정 라이브러리Reac Three Cannon를 사용하여 물리학을 생성할 것입니다. 또 다른 멋진 라이브러리인 Rapier 을 사용할 수 있지만 현재 개발 중입니다.

물리를 설정하려면 평면 기하학, 구 기하학 등과 같은 적절한 기하학을 가져와야 합니다. 그런 다음 질량, 위치 등과 같은 물리 옵션을 설정해야 합니다.

아래 코드에서 2D 평면인 바닥 구성 요소를 볼 수 있습니다. 우리는 평면이 물리학을 가지지만 질량이 없어야 합니다. 이 경우 하향 루프에 빠지기 때문입니다.

// Floor.js

import { usePlane } from '@react-three/cannon';

const Floor = (props) => {
  const [ref] = usePlane((index) => ({ type: 'Static', mass: 0, ...props }));

  return (
    <mesh receiveShadow rotation={props.rotation} ref={ref}>
      <planeGeometry args={[1000, 1000]} />
      <meshStandardMaterial color={props.color} />
    </mesh>
  );
};

지금부터 우리의 모든 구성 요소는 무한 드롭으로 이동하여 이상하게 작동하므로 물리학을 갖게 됩니다.

중요한 구성 요소 📚

구성 요소의 모든 코드를 볼 수는 없지만 몇 가지 주요 개념을 아는 것이 중요합니다. 다음 구성 요소는 세 가지의 모델인 ThreeModel.js입니다. 이를 위해 gLTF에서 React 구성 요소를 생성하기 위해 인터넷 및 this utility의 모델을 사용했습니다.

glTF (derivative short form of Graphics Language Transmission Format or GL Transmission Format) is a standard file format for three-dimensional scenes and models. Wikipedia

요점은 다음과 같이 물리를 설정해야 한다는 것입니다. 알아야 할 중요한 점은 모델에 해당하는 히트 박스의 크기를 설정해야 한다는 것입니다.

following image from here에서 개념을 볼 수 있습니다.



따라서 이 코드를 사용하여 3개와 동일한 크기의 적중 상자를 만들었습니다. 처음에는 어렵다는 것을 압니다. 구성 요소를 더 재사용할 수 있도록 소품을 통해 이러한 모든 옵션을 받고 있습니다.

// Physics for ThreeModel.js
// Don't forget to put your models inside the public folder

const [ref] = useBox((index) => ({
  type: 'Static',
  mass: 1,
  args: props.args,
  position: props.position,

  ...props,
}));

물리, 움직임 및 카메라 위치를 정의해야 하기 때문에 아마도 가장 까다로운 구성 요소는 캐릭터일 것입니다. 많은 코드가 있지만 가장 흥미로운 코드를 볼 것입니다.

카메라, 렌더러, 장면 등과 같은 상태 모델에 액세스하기 위해 후크useThree를 사용합니다. 그런 다음 세계의 위치를 ​​정의해야 합니다. 마지막으로 캐릭터 이동을 설정합니다.

// BaseCharacter.js

// Access to the state model
const { camera } = useThree();

// Set the current World position
ref.current.getWorldPosition(camera.position);

// Set the direction of the character
direction.subVectors(frontVector, sideVector).normalize().multiplyScalar(SPEED).applyEuler(camera.rotation);

또 다른 중요한 구성 요소는 장면입니다. 이 경우 기본 장면* 하나를 만들었습니다. 알아야 할 중요한 사항은 장면을 재사용하기 위해 React 자식prop을 사용하는 것입니다.

여기에서 FPS에서 사용하는 것과 같은 방식으로 마우스를 사용하기 위해 Drei 라이브러리의 구성 요소<PointerLockControls />를 사용하고 있음을 알아야 합니다.

import { Canvas } from '@react-three/fiber';
import { Loader, PointerLockControls } from '@react-three/drei';
import { Physics } from '@react-three/cannon';

import Lights from '../components/Lights.js';
import Floor from '../components/Floor.js';

const BasicScene = ({ children }) => {
  return (
    <div>
      <Canvas shadows camera={{ fov: 50 }}>
        <Lights />

        <Physics gravity={[0, -9.8, 0]}>
          {children}

          <Floor rotation={[Math.PI / -2, 0, 0]} color="white" />
        </Physics>

        <PointerLockControls />
      </Canvas>
      <Loader />
    </div>
  );
};

export default BasicScene;

또 다른 중요한 점은 물리학이 Physics 구성 요소 내에서만 작동한다는 것입니다.
helper.js 파일에는 다양한 형상에 대한 이동이 포함되어 있습니다. 인터넷에서 R3F 예제 중 하나를 찾았고 설정하는 것이 어렵지 않기 때문에 설명하지 않겠습니다.

장면 만들기 🎭

그게 다야! 다음 단계는 App.js 구성 요소 내에 장면을 만드는 것입니다. 캔버스에 대한 CSS 스타일을 설정하는 것도 중요합니다.

* {
  box-sizing: border-box;
}

html,
body,
canvas {
  width: 100%;
  max-height: 100vh;
  max-width: 100wh;
  height: 100%;
  margin: 0;
  padding: 0;
}

저처럼 유용하게 사용하시길 바랍니다. 최종 프로젝트here를 볼 수 있습니다. 언제든지 저에게 연락하여 나만의 프로젝트를 만들어 보세요. 💪💪