๐Ÿ“• add, libraries/Three.js

001. ๋„ค๋ชจ๋ฐ•์Šค๋ฅผ ๋งŒ๋“ค์–ด ๋Œ๋ ค๋ณด์ž

awesomeyelim 2022. 5. 21. 21:01
728x90

๋‚˜์˜ ์ฒ˜์Œ์ธ๋“ฏ ์ฒ˜์Œ์•„๋‹Œ three.js

๊ทธ ๋™์•ˆ์˜ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๊ณต๋ถ€๋กœ ์ธํ•œ ํƒ“์ผ๊นŒ, (์‚ฌ์‹ค) ๋‚˜๋Š” ์›น ๊ฐœ๋ฐœ์— ์ ์  ํฅ๋ฏธ๋ฅผ ์žƒ์–ด๊ฐ€๊ณ  ์žˆ์—ˆ๋‹ค.
ํ•˜์ง€๋งŒ ๋ถˆํ˜„๋“ฏ ๋‚ด๊ฐ€ ์–ด๋– ํ•œ ์ข…๋ฅ˜์˜ ์›น ๊ตฌํ˜„์„ ํ•  ๋•Œ ๊ฐ€์žฅ ์žฌ๋ฐŒ์—ˆ๋Š”์ง€ ๊ด€๋ จ๋œ ๊ธฐ์–ต๋“ค์ด ์Šค์ณ์ง€๋‚˜๊ฐ”๊ณ ,
๋‚ด ๋จธ๋ฆฟ์†์€ ์ƒ๊ฐ๋ณด๋‹ค ์žฌ๋ฐŒ๊ณ , ์œ ์น˜ํ•˜๋‹ค๋Š” ์‚ฌ์‹ค์ด three.js ์™€ WebGL์„ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋‹ค์‹œ ๊ณต๋ถ€ ํ•ด์•ผํ•œ๋‹ค๊ณ  ๋งํ•˜๊ณ  ์žˆ๋Š”๊ฒƒ ๊ฐ™์•˜๋‹ค.












์šฐ์„  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋‹ค์šด ๋ฐ›์•„๋†“์ž

https://threejs.org/build/three.js


๋‹ค์Œ๊ณผ ๊ฐ™์€ 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();







์ขŒ๋ผ๋ž€~