Three.js 개발환경 구성 & 기본구성요소
0. 준비물
vscode
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
vscode plugin
- Live Server
1. 설치
Three.js – JavaScript 3D Library
threejs.org
2. 실행
다운받은 프로젝트를 vscode로 열고
해당 프로젝트 안에 폴더를 하나 생성한다.
나는 study라는 이름의 폴더를 생성했다
그 이후 생성한 폴더안에 css, html, js 파일을 생성해준다
01-basic.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="01-basic.css" />
<script type="module" src="01-basic.js" defer></script>
<!-- defer는 dom이 다 로드된 이후에 실행 -->
</head>
<body>
<div id="webgl-container"></div>
</body>
</html>
01-basic.js
import * as THREE from "../build/three.module.js";
class App {
constructor() {
const divContainer = document.querySelector("#webgl-container");
this._divContainer = divContainer;
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
divContainer.appendChild(renderer.domElement);
this._renderer = renderer;
const scene = new THREE.Scene();
this._scene = scene;
this._setupCamera();
this._setupLight();
this._setupModel();
window.onresize = this.resize.bind(this);
this.resize();
requestAnimationFrame(this.render.bind(this));
}
_setupCamera() {
const width = this._divContainer.clientWidth;
const height = this._divContainer.clientHeight;
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 100);
camera.position.z = 2;
this._camera = camera;
}
_setupLight() {
const color = 0xffffff;
const intensity = 10;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
this._scene.add(light);
}
_setupModel() {
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({ color: 0x44a88 });
const cube = new THREE.Mesh(geometry, material);
this._scene.add(cube);
this._cube = cube;
}
resize() {
const width = this._divContainer.clientWidth;
const height = this._divContainer.clientHeight;
this._camera.aspect = width / height;
this._camera.updateProjectionMatrix();
this._renderer.setSize(width, height);
}
render(time) {
this._renderer.render(this._scene, this._camera);
this.update(time);
requestAnimationFrame(this.render.bind(this));
}
update(time) {
time *= 0.001; // second unit
this._cube.rotation.x = time;
this._cube.rotation.y = time;
}
}
window.onload = function () {
new App();
};
01-basic.css
* {
outline: none;
margin: 0;
}
body {
overflow: hidden;
}
#webgl-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
위와 같이 작성 후
01-basic.html 로 돌아가서 vscode 하단에서 live server를 실행시켜준다
반응형
'웹 개발 > 🧊 ThreeJS' 카테고리의 다른 글
| Three.js | Geometry - ConeGeometry (0) | 2024.05.06 |
|---|---|
| Three.js | Geometry - CircleGeometry (0) | 2024.05.06 |
| Three.js | Geometry - BoxGeometry (0) | 2024.05.06 |
| Three.js | Geometry & OrbitControls (0) | 2024.05.06 |
| Three.js | 기본 구성 요소와 코드 (0) | 2024.05.06 |
