요즘은 vite로 모듈 번들러를 사용한다고 한다. ㄷㄷ
어떻게 사용하는지 확인해 보자.
npm create vite 실행 이후 몇 가지 프로젝트 정보를 입력하면 다음과 같이 폴더들이 생긴다.
이후 의존성을 받아주어야 한다.
해당 폴더로 가서 npm install 명령어를 사용한다.
이후 동작을 확인하기 위해 npm run dev 명령어를 사용한다.
동작을 확인했으면 다음과 같이 필요한 파일만 남겨준다.
이후 index.html 파일을 수정해 준다.
style.css은 모두 지우고 reset.css를 받아서 사용해도 될 것 같다.
이후 vite가 변경된 index.html 파일 위치를 알 수 있도록 설정해주어야 한다.
vite.config.js 파일을 만들고 다음 내용을 붙여 넣는다.
이후 three.js 의존성을 받는다.
npm install three
이후부터는 Three.js 의존성을 손쉽게 사용할 수 있다.
와 지금까지 공식문서에서 three.js-master를 받아서 무거운 파일을 사용했는데 이렇게 받으니까 깔끔하게 필요한 파일만 가져온다.!
이제는 번들러는 vite를 사용하나 보다.. webpack 어디 감..
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
export default function () {
const renderer = new THREE.WebGLRenderer({
alpha: true,
});
const container = document.querySelector('#container');
container.appendChild(renderer.domElement);
const canvasSize = {
width: window.innerWidth,
height: window.innerHeight
}
renderer.setSize(canvasSize.width, canvasSize.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, canvasSize.width / canvasSize.height, 0.1, 1000);
camera.position.z = 5;
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.1;
const createObject = () => {
const geometry = new THREE.PlaneGeometry(1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}
const addEvent = () => {
window.addEventListener('resize', resize);
}
const resize = () => {
canvasSize.width = window.innerWidth;
canvasSize.height = window.innerHeight;
renderer.setSize(canvasSize.width, canvasSize.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
camera.aspect = canvasSize.width / canvasSize.height;
camera.updateProjectionMatrix();
}
const draw = () => {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(draw);
}
const initialze = () => {
createObject();
resize();
addEvent();
draw();
}
initialze();
}
Three.js의 예제들은 대부분 이러한 방법을 따른다만, three.js 관련 영상을 보다 보면 class로 좀 더 직관적으로 구성하는 방법도 있다.
다만 클래스를 사용하게 되면 내부 변수에 접근하기 위해 하는 작업이 생각보다 번거로운데, 복잡하지 않은 3D라면 이 방법도 한 번 사용해 보아야겠다.
근데 vite로 빌드는 어떻게 하지?
npm run build 하니까 dist 폴더가 생기면서 뭔가 되네 공식문서를 한 번 보자.
https://vitejs-kr.github.io/guide/build.html
Vite
Vite, 차세대 프런트엔드 개발 툴
vitejs-kr.github.io
그리고 여러 배포할 수 있는 방법을 알려준다.
https://runebook.dev/ko/docs/vite/guide/static-deploy
Vite - 정적 사이트 배포 다음 가이드는 몇 가지 공유된 가정을 기반으로 합니다. vite 미리 보기는
Documentation Contributors History
runebook.dev
이 새로운 경험은 뭐지..
내일 출근해서 전부 변경해야겠다.
enviromentMap Texture가 필요할 때 다음 싸이트를 이용해보자.
Poly Haven • Poly Haven
The Public 3D Asset Library
polyhaven.com
cubemap으로 이용하는 경우 다음 사이트에서 변경할 수 있다.
https://matheowis.github.io/HDRI-to-CubeMap/
HDRI to CubeMap
matheowis.github.io
'FrontEnd > THREE.js' 카테고리의 다른 글
| 물리공간 구축 (0) | 2023.04.24 |
|---|---|
| 3D Computer Graphics (4) (0) | 2023.04.15 |
| Post Processing (0) | 2023.04.13 |
| 추적하기. (0) | 2023.03.22 |
| 선형 보간 (0) | 2023.03.19 |
댓글