Three.js 3일차 (Geometry)

 

 

이제부터는 이전 포스팅에서 1번 방법인 document.body에다가 바로 적용하는 방식을 사용한다.

 

---

1. 도형 추가

---

 

1) geometry 추가

 

const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);

 

도형을 추가할 때 가장 먼저 geometry가 필요하다.  파라미터는 순서대로 너비, 높이, 깊이이다.

 

BoxGeometry에 더해 아래 다른 메트리도 볼 수 있다.

https://threejs.org/docs/index.html?q=geome#api/en/geometries/BoxGeometry

three.js docs

 

 

2) material 추가

const material = new THREE.MeshStandardMaterial({
    color:0x999999
});

 

 

3) object 추가

const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

Mesh에 geometry와 material 속성 값을 파라미터로 할당한다.

그리고 전체적인 장면을 보여주는 scene에 추가한다.

 

근데 원하는 오브젝트가 안보인다... 그럼 카메라를 조정해주면 된다.

 

 

4) 카메라 조정

camera.position.z=2;

 

 

 

---

2. 도형 애니메이션

---

//애니메이션 하려면 다음과 같이 표현해줘야 함
function render(time){
    time *= 0.001;

    cube.rotation.x=time;
    cube.rotation.y=time;

    renderer.render(scene, camera);

    requestAnimationFrame(render);

  }

  requestAnimationFrame(render);

} else {
  var warning = WEBGL.getWebGLErrorMessage();
  document.body.appendChild(warning);
}

render 함수 내 rotation을 사용하면 된다.

 

requestAnimationFrame이 2번 쓰여서 1개를 지웠는데 함수 내부걸 지우니 도형이 움직임을 멈췄고,

외부걸 지우니 전체 화면이 까만색이 되었다.

 

time 시간이 지날 때마다 x,y 다른 각도로 일정하게 로테이션하고 있는 모양이다.

 

 

 

---

3. 도형 추가

---

 

import * as THREE from 'three'

import {
  WEBGL
} from './webgl'

if (WEBGL.isWebGLAvailable()) {

  
  // 장면
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0x004fff);

  // 카메라
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z=2;


  // 렌더러
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement); //1) document.body에다가 바로 적용하는 방법

  //매쉬 01
  const geometry01 = new THREE.BoxGeometry(0.5, 0.5, 0.5);
  const material01 = new THREE.MeshStandardMaterial({
    color:0x999999
  });
  const obj01 = new THREE.Mesh(geometry01, material01);
  obj01.position.x=-1;
  scene.add(obj01);

  //매쉬 02
  const geometry02 = new THREE.BoxGeometry(0.5, 0.5, 0.5);
  const material02 = new THREE.MeshStandardMaterial({
    color:0x999999
  });
  const obj02 = new THREE.Mesh(geometry02, material02);
  scene.add(obj02);

  


  //애니메이션 하려면 다음과 같이 표현해줘야 함
  function render(time){
    time *= 0.001;

    obj01.rotation.x=time;
    obj01.rotation.y=time;

    renderer.render(scene, camera);

    requestAnimationFrame(render);

  }

  requestAnimationFrame(render);

} else {
  var warning = WEBGL.getWebGLErrorMessage();
  document.body.appendChild(warning);
}

 

01 도형과 같이 02 도형을 추가한다.

이 때 01 도형을 왼쪽으로 옮겨줘야 02 도형이 보일 것이다.

 

obj01.position.x=-1;

위치 이동은 position을 이용한다.

 

 

 

1로 이동하면 오른쪽에 obj03을 하나 더 놓을 수 있을 것이다.

obj01.position.x=1;

 

 

 

 

---

4. 다른 도형 및 애니메이션 적용

---

const geometry02 = new THREE.ConeGeometry(0.4, 0.6, 6);

ConeGeometry를 geometry02 도형으로 바꿔줬다.

 

 

 

 

모든 도형에 애니메이션을 줄 수도 있다.

//애니메이션 하려면 다음과 같이 표현해줘야 함
  function render(time){
    time *= 0.001;

    obj01.rotation.x=time;
    obj01.rotation.y=time;

    obj02.rotation.x=time;
    obj02.rotation.y=time;

    obj03.rotation.x=time;
    obj03.rotation.y=time;

    renderer.render(scene, camera);

    requestAnimationFrame(render);

  }

 

 

rotation.x를 지우면 y축으로만 돌아갈 것이고, rotation.y를 지우면 x축으로만 돌아갈 것이다.

 

 

---

5. renderer 속성

---

 

 

const renderer = new THREE.WebGLRenderer({
    alpha:true,
    antialias:true
});

antialias : 테두리가 깨지거나 부드러워지거나가 확연히 달라진다.

alpha : 아무것도 없는 공간은 투명하게 보이도록 설정한다.

 

 

 

---

6. 반응형 처리

---

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

초기 카메라를 설정했을 때 window 기준으로 설정했었다. 때문에 가만히 두면 window 크기대로 쭉 간다. 하지만 반응형 처리를 해준다면, 사이즈를 조절했을 때 window를 가변처리 해준다.

 

//반응형 처리
  function onWindowResize(){
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }

window.addEventListener('resize', onWindowResize);

 

addEventListener가 onwindowResize 함수의 반응을 듣고, 현재 window의 너비, 높이를 반영해 resize를 진행한다.

이 코드가 없으면 초기 window 크기 그대로 가며, 캔버스 사이즈가 달라져도 resize는 진행되지 않는다.