three.js
애니메이션을위한 렌더 루프 : 객체를 동적으로 업데이트

애니메이션의 핵심 개념은 일정 기간 동안 소량의 객체 속성 (일반적으로 회전 및 평행 이동)을 업데이트하는 것입니다. 예를 들어 X 위치를 0.1 초마다 1 초씩 증가시켜 객체를 변환하는 경우 1 초에 X 축에서 1 단위 더 멀어 지지만 뷰어는이 위치를 통해 그 위치로 부드럽게 이동했다고 인식합니다 새로운 위치로 직접 점프하는 대신에

우리를 돕기 위해 스크립트에서 렌더 루프 를 만듭니다.

var render = function () {
    requestAnimationFrame( render );
    //update some properties here
    renderer.render(scene, camera);
}

위의 회전 큐브 예제에서 새 애니메이션 프레임이 요청 될 때마다 큐브의 회전을 변경하기 위해 작은 증분 업데이트라는이 아이디어를 사용합니다. 모든 프레임에서 cube 객체의 rotation.x 및 rotation.y 속성을 증가시킴으로써 큐브가 두 축으로 회전하는 것처럼 보입니다.

다른 예로, 필요한 업데이트를 다른 함수로 분리하는 것은 드문 일이 아닙니다. 렌더 루프를 깔끔하게 유지하면서 추가 계산 및 검사를 할 수있는 다른 함수로 분리하는 것이 일반적입니다. 예를 들어, 아래의 렌더 루프는 장면에서 updatePoints() 의 경우 개별 객체 (또는 객체 배열)를 업데이트하기위한 4 개의 다른 업데이트 함수를 호출합니다.

//render loop
function render() {
    requestAnimationFrame( render );
    updateGrid();
    updateCube();
    updateCamera();
    updatePoints(pList);
    renderer.render( scene, camera);
}
render();

예제에서 온라인에서 카메라 컨트롤도 렌더 루프의 일부임을 알 수 있습니다.

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
controls.autoRotate = true;

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

카메라를 제어하는 ​​스크립트가 똑같은 일을하기 때문입니다. 시간이 지남에 따라 업데이트. 변경 사항은 마우스 위치와 같은 사용자 입력이나 경로를 따르는 것과 같은 프로그래밍 방식으로 인해 발생할 수 있습니다. 두 경우 모두 카메라에 애니메이션을 적용하는 것입니다.