Skip navigation

Kamera interakciók

Beépített vezérlők

A térbeli modellezés áttekintésekor gyakran szükséges, hogy a színteret más nézőpontokból is megvizsgálhassuk. A kamera pozícióját, orientációját szabadon szabályozhatjuk a programunkból. Megtehetjük ezt akár animálva (folyamatosan mozgó kamera), vagy felhasználói interakcióra (egér vagy billentyűzet segítségével vezérelve). A Three.js tartalmaz jónéhány segéd objektumot a kamera összetett térbeli mozgatására.

FirstPersonControls Elsőszemélyes nézetnek megfelelő vezérlés.
Mozgás billentyűkkel, körülnézés egérrel.
FlyControls Repülőszimulátor-szerű vezérlés.
Mozgás és kanyarodás billentyűzettel és egérrel.
RollControls Térbeli mozgás és Z-tengely körüli forgás.
TrackballControls Mozgás, forgás és zoom az egérrel.
OrbitControls A kamera kering a színtér körül.
DeviceOrientationControls Kamera mozgatása az eszköz orientációjának megfelelően.
Mobil eszközökön.
OculusControls Oculus Rift VR eszköz kötött kameramozgás.
OrthographicTrackballControls TrackballControlls párhuzamos vetítéshez.
VRControls Virtuális valóság (VR) vezérlő.

Az első Three.js példaprogramunkban megmutattuk a TrackballControls vezérlő használatát. A többit is hasonlóan kell munkába állítani, ezeket itt nem részletezzük.

Idő-alapú animáció

A színtérben való objektum és kamera mozgások a renderelő függvényből vezérelhetők. A legegyszerűbb megoldás esetén a mozgás paramétereinek változása konstans. A probléma ezzel az, hogy lassabb megjelenítés esetén (pl. 60 FPS helyett csak 30 FPS-t tud a rendszer biztosítani) az egységnyi idő alatt megtett mozgások lelassulnak. Ez nem szerencsés.

A változó FPS hatását kiküszöbölhetjük, ha az új pozíció számításakor figyelembe vesszük az utolsó renderelés óta eltelt időt. A beépített kamera interakciók képesek erre az alábbi módon. Ezt az elvet saját mozgási paramétereink változtatásánál is alkalmazhatjuk.

var clock = new THREE.Clock();
function render() {
    var delta = clock.getDelta();
    trackballControls.update( delta );
    requestAnimationFrame( render );
    renderer.render( scene, camera );
}