Three.js 1일차 (설치 및 import)

---

1-1. 설치 (npm)

---

npm install --save three

 

 

이런 경고창이 뜬다면, npm install -g npm@10.2.0으로 업데이트가 필요한 것이다. 근데 또 10.2.0으로 설치하니까 안되서 npm install -g npm@9로 해주니까 three 설치가 잘 된다.

 

 

three설치 후에도 package.json이 안보인다면 다음과 같은 명령어를 실행해보자

npm init -y
npm install --save three

 

init 처리 후 three를 설치하면 package.json에 추가되는 것이 보인다.

 

 

 

 

---

1-2. 설치 (번들)

---

git clone https://github.com/aakatev/three-js-webpack.git
cd three-js-webpack
npm run start

 

간혹 run start를 하면 다음과 같은 에러가 뜰 때가 있다.

 

(node:10056) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
i ｢wds｣: Project is running at http://localhost:9000/
i ｢wds｣: webpack output is served from /public/
i ｢wds｣: Content not from webpack is served from C:\Users\SSAFY\Desktop\three_html\three-js-webpack
node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);

 

해결방법: https://github.com/SeoMiYoung/Learning/issues/6

unsupported at new Hash 에러가 왜 발생했을까? · Issue #6 · SeoMiYoung/Learning

 

노드 17 이상을 쓸 때  아래 코드로 매번 번들링을 해줘야 하기 때문에 그냥 노드 16버전으로 바꿔주는 것을 선택했다.

 

export NODE_OPTIONS=--openssl-legacy-provider

 

nvm use 16

> 나는 이미 nvm이랑 node16을 깐 적이 있다. 그래서 해당 명령어 하나로 16버전으로 바꿨다.

> 바꿔주니 웹 실행이 잘 되었다.

 

 

 

---

2. 설치 모듈 불러오기

---

import * as THREE from 'three'
import { WEBGL } from './webgl'
import './modal'

if (WEBGL.isWebGLAvailable()) {
  console.log(THREE);
} else {
  var warning = WEBGL.getWebGLErrorMessage()
  document.body.appendChild(warning)
}