[개발일지] Three.js를 활용한 3D 포트폴리오 사이트 만들기 1

💡 왜 시작하게 되었나요?

예전부터 포트폴리오 사이트를 직접 만들고 싶다는 생각을 수백번 했다.
근데 진짜 시간이 없었고(는 핑계) 아직 내가 사용할 수 있는 스택들이 잘 쓰일지도 모르겠고..
특히, 내가 짠 코드들이 잘 짠 코드인지 모르기 때문에 더 망설였던 것 같다.
 
마침 GDG에서 진행되는 스터디 중 하나가 웹 스프린트 챌린지였다.
여기에서는 스스로 프로젝트 주제를 선정한 다음, 격주마다 프로젝트 진행 현황을 발표하는 거였다.
이거라면,... 내가 코드를 잘 짰는지 알려줄 사람이 있지 않을까..? 하는 생각도 들었고,
다른 사람들이 공부한 내용도 같이 알아가면 발전된 포폴 사이트를 만들 수 있지 않을까? 해서 결정!!!
 
근데 또 마침 Three.js에 관심이 있었고,
Three.js로 제작한 포트폴리오 사이트가 너무너무너무너무 예쁜 거 아니냐며
바로 프로젝트 주제로 선정하게 되었다.

😅 근데 나 Three.js 처음인데.. 

three.js는 보통 sketchfab 이라는 사이트에서 무료 저작권의 3D model을 가져와 사용한다고 한다.
먼가 자세한 개념들을 공부하기 전에, 냅다 🌸귀여운 거🌸 적용해보면
공부 의지가 활활 불타오를 것 같아서 ㅎㅅㅎ 🔥 기여운 시바견 3D 모델을 띄우는 걸 먼저 해보기로 하였다.
 

⚙️ 프로젝트 환경 세팅

나는 Vite, Yarn을 사용하여 프로젝트 환경을 세팅했다.

근데 node 버전 안 맞다고 냅다 오류 보여주기..

하 진짜 node 버전 새로 세팅하는 거 귀차나 ㅜ

$ nvm install 20.3.0
$ nvm use 20.3.0
$ yarn install

nvm 사용하여 위 명령어들을 순서대로 입력하면
노드 버전 업데이트 및 설치 완료 ><
 
그리고 Three.js를 사용할 거니까 three.js도 야무지게 깔아주었다

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

---

📦 3D cube 화면에 띄우기

근데 three.js .. 로직이 좀 복잡하더라.. 먼가 많기도 하고..
코딩할 때 첫 입문이 Hello, World! 라면
three.js에서의 입문은 Hello, cube 라길래
일단은 3D cube를 만들어보기로 하였다.

import { OrbitControls } from '@react-three/drei';
import { Canvas } from '@react-three/fiber';

function App() {
  return (
    <div className='App'>
      <Canvas>
        {/* 회전 및 마우스 휠로 확대 / 축소 가능 */}
        {/* autoRotate={true} : 자동 회전*/}
        <OrbitControls autoRotate={true} />
        <mesh>
          {/* 빛 추가 -> 색상 보임 */}
          <ambientLight intensity={4} />
          {/* 박스 개체 하나 만듦 */}
          <boxGeometry args={[1, 1, 1]} /> 
          {/* 색상 추가 */}
          <meshStandardMaterial attach="material" color={0xFF99CC} />
        </mesh>
      </Canvas>
    </div>
  )
}

export default App

짜란~! 핑크색 큐브 완성~!

---

🎨 Sketchfab에서 다운 받은 gltf 파일 jsx로 바꾸기

sketchfab에서 모델을 다운받을 때에는
gltf로 다운받아야 한다!!! 
다운받은 파일의 압축을 풀고 
압축이 풀린 폴더를 프로젝트의 public/models에 넣어준다.

 
scene.gltf가 포함되어 있는 폴더로 이동해서

/public/models/shiba
$ npx gltfjsx scenes.gltf

를 입력하면 되는데…
 

Error: Could not load the "sharp" module using the darwin-arm64 runtime
Possible solutions:
- Ensure optional dependencies can be installed:
    npm install --include=optional sharp
- Ensure your package manager supports multi-platform installation:
    See <https://sharp.pixelplumbing.com/install#cross-platform>
- Add platform-specific dependencies:
    npm install --os=darwin --cpu=arm64 sharp
- Consult the installation documentation:
    See <https://sharp.pixelplumbing.com/install>
    at Object. (/Users/jangyoungju/.npm/_npx/16b3f312213fced0/node_modules/ndarray-pixels/node_modules/sharp/lib/sharp.js:113:9)
    at Module._compile (node:internal/modules/cjs/loader:1255:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1309:10)
    at Module.load (node:internal/modules/cjs/loader:1113:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1137:19)
    at require (node:internal/modules/helpers:121:18)
    at Object. (/Users/jangyoungju/.npm/_npx/16b3f312213fced0/node_modules/ndarray-pixels/node_modules/sharp/lib/constructor.js:10:1)
    at Module._compile (node:internal/modules/cjs/loader:1255:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1309:10)

Node.js v20.3.0

이 망할 오류가 진짜 계속 났음;;; 하 저거 1-2시간 동안 붙들고 있었음..
근데 저기 써있는 솔루션들 다 해봐도 안돼서 머지.. 이러고 있었는데
아.. npm이구나.. 나 yarn 쓰는데..ㅜㅜ
 
 
해결 방법은 프로젝트 폴더 위치에서

$ yarn add sharp --ignore-engines

입력해주면 sharp가 설치되는 동시에 yarn.lock 파일이 생긴다.
아니 근데 왜 yarn으로 만든 프로젝트에서 에러 솔루션은 다 npm을 주는 거임?? 화나네 하ㅜㅜ
 
암튼 이 파일에서

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [react()],
  // 요 아래 세 줄 추가해주면 됩니다.
  optimizeDeps: {
    exclude: ['sharp']
  }
})

요렇게 추가를 해주면 됨!
그리고 npx gltfjsx scenes.gltf 를 다시 쳐주면

요렇게 Scene.jsx 파일이 만들어진다!!

---

🖥️ Scene.jsx 화면에 띄워보기

// Scene.jsx -> shiba.jsx 로 이름 바꿈!!
import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'

export function ShibaModel(props) {
  const group = useRef()
  const { nodes, materials } = useGLTF('public/models/shiba/scene.gltf')
  return (
    <group ref={group} {...props} dispose={null}>
      <mesh geometry={nodes.Group18985_default_0.geometry} material={materials['default']} rotation={[-Math.PI / 2, 0, 0]} />
      <mesh geometry={nodes.Box002_default_0.geometry} material={materials['default']} rotation={[-Math.PI / 2, 0, 0]} />
      <mesh geometry={nodes.Object001_default_0.geometry} material={materials['default']} rotation={[-Math.PI / 2, 0, 0]} />
    </group>
  )
}

useGLTF.preload('public/models/shiba/scene.gltf')

가장 중요한 건 ‘파일 경로’ 정말정말 중요하다..!
이거 때문에 계속 화면에 안 띄워져서 돌아버릴 뻔..
원래는 /scene.gltf 라고만 되어 있는데, 절대 경로로 다 적어줘야 인식을 하더라..ㅜㅜ
 
그리고 useRef를 통해 group 태그와 연결한다.

// App.jsx

import { Canvas } from '@react-three/fiber'
import './App.css'
import { OrbitControls } from '@react-three/drei'
import { ShibaModel } from '../public/models/shiba/shiba.jsx'

function App() {
  return (
    <>
      <Canvas style={{ width: "400px", height: "400px" }}>
        <OrbitControls/>
        <group>
            <ShibaModel scale={[1, 1, 1]} />
        </group>
      </Canvas>
    </>
  )
}

export default App

 
 
그리고 scene.jsx의 컴포넌트를 넣어주고, scale을 조정해주면

우하하 기여운 시바견 띄우기 성공!!!!!
 

📝 회고(가 맞나?)

- three.js를 처음 써봤는데, 너무 재밌당 희희 앞으로의 프로젝트가 좀 기대된다.
- three.js는 알아야 할 개념과 이론들이 많아서 더 자세히 공부해야겠다.
 

🔗 참고

https://github.com/lovell/sharp/issues/3960

Error: Could not load the "sharp" module using the darwin-arm64 runtime · Issue #3960 · lovell/sharp

https://velog.io/@iepppop/react-three.js-%EC%A0%81%EC%9A%A9%EB%B2%95