react three.js 적용법

은근 자료가 많은 게 아니여서 많이 헤맸다.
일단 무료 3D이미지를 다운 받는다.

https://sketchfab.com/3d-models/smg-90-3b5371ff0db24407ab592997e5038ad3

클릭한다

gltp를 다운 받는다.

압축을 풀면 이렇게 폴더 내용이 보인다.
그럼 이 폴더에 cmd를 연다.

npx gltfjsx scene.gltf

입력하고 엔터를 치면

Scene.js 라는 파일이 생긴 것을 확인 할 수 있다.
이 파일을 메모장에 연결해서 열어본다.

연결하기전 설치해야한다.

yarn add three
yarn add @react-three/fiber
yarn add @react-three/drei

혹시나 다른 게 없다고 뜨면 그걸 설치해주면 됨!

public 폴더 안에 아까전 파일에 있던건 license.txt를 제외하고 전부 넣어준다.

example.js

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'

function Model({ ...props }) {
  const group = useRef()
  const { nodes, materials } = useGLTF('/scene.gltf')
  return (
       <group ref={group} {...props} dispose={null} scale={0.03}>
        <group rotation={[-Math.PI / 2, 0, 0]}>
          <mesh geometry={nodes.Object_2.geometry} material={materials['9smg1']} />
          <mesh geometry={nodes.Object_3.geometry} material={materials['9smg2']} />
        </group>
      </group>
  )
}

메모장에 있는 것을 다 복사할 필요가 없고 이렇게 복사를 해오면 된다.
scale 의 수치를 조정하여 group의 크기를 조정할 수 있다.

같은 example.js 파일 안에 (Model 하단에) 이 코드를 넣어주면 된다.

import { Suspense, useRef } from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls, useGLTF } from '@react-three/drei';
import styled from 'styled-components';

const Example = () => {
    return (
        <>
            <Contain>
                <Canvas>
                    <Suspense fallback={null}>
                        <directionalLight intensity={1} />
                        <ambientLight intensity={1.2} />
                        <spotLight intensity={0.1} angle={0.1} penumbra={1} position={[10, 15, 10]} castShadow />
                        <Model />
                        <OrbitControls enablePan={true} enableZoom={true} enableRotate={true} />
                    </Suspense>
                </Canvas>
            </Contain>
        </>
    )
}

export default Example;

const Contain = styled.div`
    width:100%;
    height:100%;
    margin:0 auto;
    background:#2d2d2d;
`

ambientLight
이 조명은 전체적으로 씬(scene)의 모든 개체를 동일하게 조명한다.
만약 저 부분을 삭제하게 되면 아래처럼 까맣게 보이는 걸 알 수 있다.

enablePan={true|false} 카메라 팬
enableZoom={true|false} 마우스 휠 카메라의 확대/축소(돌림)
enableRotate={true|false} 카메라의 수평 및 수직 회전

공식문서에서 더 많은 설명 확인

https://threejs.org/docs/#api/en/lights/AmbientLight

전체 example.js

import { Suspense, useRef } from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls, useGLTF } from '@react-three/drei';
import styled from 'styled-components';



function Model({ ...props }) {
    const group = useRef()
    const { nodes, materials } = useGLTF('/scene.gltf')
    return (
      <group ref={group} {...props} dispose={null} scale={0.03}>
        <group rotation={[-Math.PI / 2, 0, 0]}>
          <mesh geometry={nodes.Object_2.geometry} material={materials['9smg1']} />
          <mesh geometry={nodes.Object_3.geometry} material={materials['9smg2']} />
        </group>
      </group>
    )
  }
  

const Example = () => {
    return (
        <>
            <Contain>
                <Canvas>
                    <Suspense fallback={null}>
                        <directionalLight intensity={1} />
                        <ambientLight intensity={1.2} />
                        <spotLight intensity={2} angle={2} penumbra={1} position={[10, 15, 10]} castShadow />
                        <Model />
                        <OrbitControls enablePan={true} enableZoom={true} enableRotate={true} />
                    </Suspense>
                </Canvas>
            </Contain>
        </>
    )
}

export default Example;

const Contain = styled.div`
    width:100%;
    height:100%;
    margin:0 auto;
    background:#eee;
`