๐ add, libraries/Three.js
001. ๋ค๋ชจ๋ฐ์ค๋ฅผ ๋ง๋ค์ด ๋๋ ค๋ณด์
awesomeyelim
2022. 5. 21. 21:01
728x90
๋์ ์ฒ์์ธ๋ฏ ์ฒ์์๋ three.js
๊ทธ ๋์์ ์๊ณ ๋ฆฌ์ฆ ๊ณต๋ถ๋ก ์ธํ ํ์ผ๊น, (์ฌ์ค) ๋๋ ์น ๊ฐ๋ฐ์ ์ ์ ํฅ๋ฏธ๋ฅผ ์์ด๊ฐ๊ณ ์์๋ค.
ํ์ง๋ง ๋ถํ๋ฏ ๋ด๊ฐ ์ด๋ ํ ์ข
๋ฅ์ ์น ๊ตฌํ์ ํ ๋ ๊ฐ์ฅ ์ฌ๋ฐ์๋์ง ๊ด๋ จ๋ ๊ธฐ์ต๋ค์ด ์ค์ณ์ง๋๊ฐ๊ณ ,
๋ด ๋จธ๋ฆฟ์์ ์๊ฐ๋ณด๋ค ์ฌ๋ฐ๊ณ , ์ ์นํ๋ค๋ ์ฌ์ค์ด three.js ์ WebGL์ ์ฒ์๋ถํฐ ๋ค์ ๊ณต๋ถ ํด์ผํ๋ค๊ณ ๋งํ๊ณ ์๋๊ฒ ๊ฐ์๋ค.




์ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ค์ด ๋ฐ์๋์
๋ค์๊ณผ ๊ฐ์ htmlํ์ผ์ three.js๋ฅผ ์ฐ๊ฒฐ์์ผ์ค๋ค.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>
01. scene ๋ง๋ค๊ธฐ
- three.js๋ก ๋ง๋๋ ์ผ์ ๋จ์ํ๊ฒ scene, camera, renderer๊ฐ ํ์ํ๋ค.(์ดฌ์์ ํ๊ณ ๋ ๋๋ง์ ์์ผ์ค๋ค๊ณ ์๊ฐํ์)
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75, //field of view(์์ผ๊ฐ) -> ๊ฐ๋ ๊ฐ์ผ๋ก ์ค์ ํ๋ค
window.innerWidth / window.innerHeight, //aspect ratio(์ข
ํก๋น)
0.1, // near
1000 //far ์ ๋จ๋ฉด
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
02. Cube ๋ง๋ค๊ธฐ
- ์ด์ ํ๋ธ๋ฅผ ๋ง๋ค์ด๋ณด์, ํ๋ธ๋ฅผ ๋ง๋๋ ค๋ฉด BoxGeometry๊ฐ ํ์ํ๋ค.
- ๋ํ ์์น ํด์ค ์์๊ฐ ํ์ํ๋ค. -> MeshBasicMaterial
- Mesh๋ ์ฌ์ง์ ์ ์ฉํ๊ณ ์์ ๋ก์ด ์์ง์์ ๋ณด์ฅํ๋ค.
const geometry = new THREE.BoxGeometry(); //๊ผญ์ง์ (vertices) ์ ๋ฉด(faces)์ด ํฌํจ
const material = new THREE.MeshBasicMaterial({ color: 0x201CDA });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube); //(0,0,0) ์์ฑ์ ๊ฐ์ง
camera.position.z = 5;
03. scene ๋๋๋ง
- ์ด์ ๋ง๋ค์ด๋ ผ ํผ์ฌ์ฒด๋ฅผ ๋๋๋ง์ ์์ผ๋ณด์ (+ ์ ๋๋ฉ์ดํ )
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01; //๋ฐ์ค๋ฅผ x์ถ ๊ธฐ์ค์ผ๋ก ํ์
cube.rotation.y += 0.01; //๋ฐ์ค๋ฅผ y์ถ ๊ธฐ์ค์ผ๋ก ํ์
renderer.render(scene, camera);
}
animate();
04. ์์ฑ๋ ์์ค ์ฝ๋ !
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x201CDA });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();

์ข๋ผ๋~