[Three.js] To infinity and beyond! 3D 웹 도전기 #4

⚠️ 1분 코딩님의 강의를 바탕으로 작성한 글입니다.

Geometry

BoxGeometry

BoxGeometry(
    width : Float, 
    height : Float, 
    depth : Float, 
    widthSegments : Integer, 
    heightSegments : Integer, 
    depthSegments : Integer
)

 

CylinderGeometry

CylinderGeometry(
    radiusTop : Float, 
    radiusBottom : Float, 
    height : Float, 
    radialSegments : Integer, 
    heightSegments : Integer, 
    openEnded : Boolean, 
    thetaStart : Float, 
    thetaLength : Float
)

 

SphereGeometry

SphereGeometry(
    radius : Float, 
    widthSegments : Integer, 
    heightSegments : Integer, 
    phiStart : Float, 
    phiLength : Float, 
    thetaStart : Float, 
    thetaLength : Float
)

 

위 이미지 처럼 segment를 많이 나눈다는 것은 vertex(점)가 추가되었다는 의미와 같다. 그리고 이 vertex를 이용하여 원하는 모양으로 만들어 낼 수 있다.

만든 geometry를 콘솔로 찍어 내부를 들여다보면 attributes의 position이 바로 vertex의 위치를 담고 있는 배열이다. 이때 배열은 typed array(형식화 배열)이다. 특정 형식만 들어갈 수 있는 배열이다.

typed array(형식화 배열)
WebGL에서 바이너리 데이터를 처리하는 효율적인 방법이 필요하기 때문에 비교적 최근에 브라우저에 추가된 것입니다.
WebGL 및 바이너리 데이터를 처리하는 기타 API에 데이터를 전달하는 데 JavaScript 배열보다 훨씬 잘 작동합니다.

 

Camera Control

OrbitControls

'orbit', '궤도'라는 의미를 가진 이 기법은 scence의 중앙을 기준으로 궤도를 그리듯 자유롭게 카메라를 이동할 수 있다.

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

const controls = new OrbitControls(camera, renderer.domElement);

첫번째 인자로 카메라,  두번째 인자는 캔버스 객체를 가리키는 domElement를 받는다.

 

+ option

controls.enableDamping = true;

해당 옵션을 추가하면 카메라 컨트롤이 훨씬 부드럽게 동작한다. 이때 반드시 반복실행되는 함수에 update를 매번 실행시켜야 한다.

 

controls.enableZoom = false; // 줌인,줌아웃을 막는다.

controls.maxDistance = 10; // 물체와 멀어지는 거리의 한계를 설정한다.

controls.minDistance = 5; // 물체와 가까워지는 거리의 한계를 설정한다.

controls.minPolarAngle = Math.PI / 4; // 수직 방향의 회전 각도의 한계를 설정한다.

controls.autoRotate = true; // 자동으로 회전한다. 
controls.autoRotateSpeed = 5; // 회전 속도를 설정한다.

 

TrackballControls

import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls';

const controls = new TrackballControls(camera, renderer.domElement);

OrbitControls와 달리 수직 방향도 회전이 가능하다. 단, 반복 실행 함수에서 update 메서드를 실행하지 않으면 동작하지 않는다.

 

FlyControls

게임처럼 키보드로 방향을 움직일 수 있다. 화면의 마우스 위치에 따라 자동으로 회전한다.

단, update 메서드에 인자를 전달해주어야 동작한다.

controls.rollSpeed = 0.05; // 회전 속도 조절
controls.movementSpeed = 3; // 키보드 이동 속도 조절

 

PointerLockControls

import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls';

const controls = new PointerLockControls(camera, renderer.domElement);

// console.log(controls.domElement === renderer.domElement);
controls.domElement.addEventListener('click', () => {
    controls.lock();
})

controls.addEventListener('lock', () => {
    console.log('lock!')
})
controls.addEventListener('unlock', () => {
    console.log('unlock!')
})

 

DragControls

import { DragControls } from 'three/examples/jsm/controls/DragControls';

const controls = new DragControls(meshes, camera, renderer.domElement);

드래그할 mesh를 첫번째 인자로 보내줘야 한다. 이때 해당 컨트롤 변수는 mesh 함수 아래에 만들어줘야 한다는 점을 기억하자. 

 

controls.addEventListener('dragstart', e => {
    console.log(e)
})

이벤트함수를 이용하여 드래그할 객체의 정보를 얻을 수 있다.

 

---

📜 출처

• [MDN] JavaScript typed arrays