Three.js 9일차 (OrbitControls)

---

1. 기본 코드

---

import * as THREE from 'three'
import {
  OrbitControls
} from 'three/examples/jsm/controls/OrbitControls.js';

import {
  WEBGL
} from './webgl'

if (WEBGL.isWebGLAvailable()) {


  // console.log(OrbitControls);

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

  // 카메라 추가
  const fov = 120;
  const aspect = window.innerWidth / window.innerHeight;
  const near = 0.1;
  const far = 1000;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

  camera.position.x = 0;
  camera.position.y = 2;
  camera.position.z = 1.8;
  camera.lookAt(new THREE.Vector3(0, 0, 0));


  // 렌더러 추가
  const renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  renderer.shadowMap.enabled = true;


  // OrbitControls 카메라, 렌더러 이후에 등장필요
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.minDistance = 2; // 마우스 휠로 카메라 거리 조작시 최소 값. 기본값(Float)은 0 입니다.
  controls.maxDistance = 5; // 마우스 휠로 카메라 거리 조작시 최대 값. 기본값(Float)은 무제한 입니다.
  controls.maxPolarAngle = Math.PI / 2 ; // 각도 제한
  controls.maxPolarAngle = 3.14/2;
  // 컨트롤 업데이트
  controls.update();

  // 도형 추가
  const geometry = new THREE.IcosahedronGeometry(0.5, 0);
  const material = new THREE.MeshStandardMaterial({
    color: 0x004fff
  });
  const obj = new THREE.Mesh(geometry, material);
  obj.rotation.y = 0.5;
  obj.position.set(0.5, 0.5, 0);
  scene.add(obj);
  obj.castShadow = true;
  obj.receiveShadow = true;

  const geometry2 = new THREE.IcosahedronGeometry(0.5, 0);
  const material2 = new THREE.MeshStandardMaterial({
    color: 0xff0000
  });
  const obj2 = new THREE.Mesh(geometry2, material2);
  obj2.position.set(-0.5, 1.2, 0.5);
  scene.add(obj2);
  obj2.castShadow = true;

  //바닥 추가
  const planeGeometry = new THREE.PlaneGeometry(20, 20, 1, 1);
  const planeMaterial = new THREE.MeshStandardMaterial({
    color: 0xffffff
  });
  const plane = new THREE.Mesh(planeGeometry, planeMaterial);
  plane.rotation.x = -0.5 * Math.PI;
  plane.position.y = -0.2;
  scene.add(plane);
  plane.receiveShadow = true;

  // 빛
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
  scene.add(ambientLight);

  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
  directionalLight.position.set(-1.5, 2, 1);
  const dlHelper = new THREE.DirectionalLightHelper(directionalLight, 0.2, 0x0000ff);
  scene.add(dlHelper);
  scene.add(directionalLight);
  directionalLight.castShadow = true; // 그림자 O
  directionalLight.shadow.mapSize.width = 2048;
  directionalLight.shadow.mapSize.height = 2048;
  directionalLight.shadow.radius = 8;


  function animate() {
    requestAnimationFrame( animate );
    obj.rotation.y += 0.01;
    obj2.rotation.x += 0.03;
    controls.update();
    renderer.render( scene, camera );
  }
  animate()

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

  window.addEventListener('resize', onWindowResize);
} else {
  var warning = WEBGL.getWebGLErrorMessage();
  document.body.appendChild(warning);
}

 

 

 

 

---

2. import

---

 

import {
  OrbitControls
} from 'three/examples/jsm/controls/OrbitControls.js';

 

 

 

---

3. 동작 추가

---

// OrbitControls 카메라, 렌더러 이후에 등장필요
const controls = new OrbitControls(camera, renderer.domElement);

// 컨트롤 업데이트
controls.update();

 

컨트롤은 카메라, 렌더러 이후에 등장해야 한다. 이들을 파라미터로 받기 때문이다.

컨트롤로 화면 변화가 있을 경우 컨트롤 업데이트는 필수이다.

 

function animate() {
    requestAnimationFrame( animate );
    controls.update();
    renderer.render( scene, camera );
}
animate()

또한 변화를 감지하는 animate에도 controls 업데이트에 따라 update()를 넣어줘야 한다.

 

 

 

---

4. 최대/최소 줌 설정

---

 

// OrbitControls 카메라, 렌더러 이후에 등장필요
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.minDistance = 2; // 마우스 휠로 카메라 거리 조작시 최소 값. 기본값(Float)은 0 입니다.
  controls.maxDistance = 5; // 마우스 휠로 카메라 거리 조작시 최대 값. 기본값(Float)은 무제한 입니다.
  // 컨트롤 업데이트
  controls.update();

minDistance와 maxDistance 사용한다.

 

 

 

---

5. 최대 각도 지정

---

// OrbitControls 카메라, 렌더러 이후에 등장필요
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.minDistance = 2; // 마우스 휠로 카메라 거리 조작시 최소 값. 기본값(Float)은 0 입니다.
  controls.maxDistance = 5; // 마우스 휠로 카메라 거리 조작시 최대 값. 기본값(Float)은 무제한 입니다.
  controls.maxPolarAngle = Math.PI / 2 ; // 각도 제한
  // 컨트롤 업데이트
  controls.update();

 

 

controls.maxPolarAngle = Math.PI / 2 ; // 각도 제한

앵글을 pi를 이용해 설정해주면, 딱 보기 적당한 각도에서 멈춰준다.

 

 

 

---

6. 도형 회전 추가

---

function animate() {
    requestAnimationFrame( animate );
    obj.rotation.y += 0.01;
    obj2.rotation.x += 0.03;
    controls.update();
    renderer.render( scene, camera );
  }
  animate()

 

 rotation으로 오브젝트 별로 각자 회전을 줄 수 있다. 수치는 속도이다.