애니메이션과 카메라

three.js journey강의를 듣고 작성합니다.

 

Animation

RequestAnimationFrame

js에서 제공하는 메서드

매 프레임마다 호출되어 다음 프레임에 호출할 애니메이션을 지정하고 이를 호출하는 메서드

/**
 * Animate
 */
const tick = () =>
{
    // Update objects
    mesh.rotation.y += 0.01

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()

 

data data.now

clock (three.js 내장 메서드)

gasp

 

camera

ArrayCamera

- 여러 카메라에서 장면을 렌더링함 / 동일한 화면에서 다양한 컨트롤을 사용해서 플레

StereoCamera

- 두개의 카메라를 통해 장면을 렌더링함 / vr등 

CubeCamera

- 각 방향을 향한 렌더링을 얻어 주변을 렌더링함

OrthographicCamera

- 원근감 없이 2d, 카메라와의 거리에 관계없이 화면에서 동일한 크기 

const camera = new THREE.OrthographicCamera(-1, 1, 1, -1,0.1,100)
camera.position.x = 2
camera.position.y = 2
camera.position.z = 2
camera.lookAt(mesh.position)
scene.add(camera)

 

OrthographicCamera( left: num, right: num, top: num, bottom: 1, near: num, far: num )

 

PerspectiveCamera

-  원근법을 사용해 실제 카메라 시뮬

//camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
scene.add(camera)

 

 

PerspectiveCamera( fov : num, aspect :

num  

, near :

num  

, far :

num  

)

 

fov: 시야각 

aspect: 렌더의 높이, 너비 

near: 카메라부터의 최소거리 (이 값보다 가까운 객체는 렌더링되지 않음)

far: 카메라부터의 최대거리 (이 값보다 먼 객체는 렌더링되지 않음)

 

controls

FlyControls

- 우주선에 있는거처럼 카메라 움직임, 3개의 축을 모두 회전, 앞 뒤 갈 수 있음

 

FirstPersonControls

- flycontrols 과 똑같지만 고정된 위쪽 축이 있음 , 새 의 시점 

 

PointerLockControls

- 화면에 마우스가 없음, 키보드.. 로 사용하는

 

OrbitControls

- 인스턴스해서 가져와야함 

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

const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true //부드럽게, 각프레임의 컨트롤을 업데이트 해줘야함 
controls.target.y = 2 // 축변경해줌
controls.update() // 타겟 사용했으면 업데이트를 해줘야 적용

 

TrackballControls

- orbitcontrols과 비슷, 바닥과 하늘이 없음

 

TransformControls

- 

DragControls

-