three.js
Renderuj pętle dla animacji: Dynamicznie aktualizuj obiekty

W tym dokumencie opisano niektóre typowe sposoby dodawania animacji bezpośrednio do scen w Three.js. Chociaż istnieją biblioteki i ramy, które mogą dodawać dynamiczne ruchy do sceny (animacje, fizyka itp.), Pomocne jest zrozumienie, w jaki sposób możesz to zrobić po prostu za pomocą kilku wierszy kodu.

Podstawową koncepcją animacji jest aktualizacja właściwości obiektu (zwykle rotacja i translacja) w niewielkich ilościach przez pewien okres czasu. Na przykład, jeśli przetłumaczysz obiekt, zwiększając pozycję X o 0,1 co dziesiąte sekundy, będzie on o 1 jednostkę dalej na osi X w ciągu 1 sekundy, ale widz zobaczy, że płynnie przesunął się do tej pozycji ponad tą czas zamiast skakać bezpośrednio do nowej pozycji.

Aby nam pomóc, tworzymy pętlę renderowania w skrypcie.

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

W powyższym przykładzie obracającej się kostki używamy tego pomysłu - małych przyrostowych aktualizacji - do zmiany obrotu kostki za każdym razem, gdy żądana jest nowa klatka animacji. Przez zwiększając rotation.x i rotation.y właściwości cube obiekt na każdej klatce, kostka wydaje się spin na tych dwóch osiach.

Jako kolejny przykład nierzadko dzieli się potrzebną aktualizację na inne funkcje, w których można wykonać dodatkowe obliczenia i kontrole, zachowując porządek w pętli renderowania. Na przykład poniższa pętla renderowania wywołuje cztery różne funkcje aktualizacji, z których każda ma na celu aktualizację osobnego obiektu (lub tablicy obiektów, w przypadku updatePoints() ) w scenie.

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

W przykładach online można zauważyć, że elementy sterowania kamerą są również częścią pętli renderowania.

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);
};

Wynika to z tego, że skrypt sterujący kamerą robi to samo; aktualizowanie go w miarę upływu czasu. Zmiany mogą być spowodowane przez dane wejściowe użytkownika, takie jak położenie myszy lub coś programowego, np. Podążanie ścieżką. W obu przypadkach tylko animujemy kamerę.

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

var renderer = new THREE.WebGLRenderer(); 
renderer.setSize( window.innerWidth, window.innerHeight ); 
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

//Create an render loop to allow animation
var render = function () {
    requestAnimationFrame( render );

    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;

    renderer.render(scene, camera);
};

render();