three.js
Kamerasteuerungen in Three.js

aframe Angular 2 CSS HTML html5-canvas JavaScript jQuery Node.js SVG TypeScript
Suche…


Einführung

In diesem Dokument wird beschrieben, wie Sie Ihrer Szene leicht einige vorhandene Kamerasteuerelemente hinzufügen und Anleitungen zum Erstellen benutzerdefinierter Steuerelemente bieten. Beachten Sie, dass die vorgefertigten /examples/js/controls Ordner /examples/js/controls der Bibliothek zu finden sind.

Umlaufbahnsteuerungen

Mit einer Orbit-Kamera kann der Benutzer um einen zentralen Punkt gedreht werden, wobei eine bestimmte Achse gesperrt bleibt. Dies ist äußerst beliebt, da es verhindert, dass die Szene außerhalb der Achse "gekippt" wird. Diese Version sperrt die Y-Achse (vertikal) und ermöglicht Benutzern, mit der linken, mittleren und rechten Maustaste (oder bestimmten Berührungsereignissen) Orbit, Zoom und Pan zu machen.

index.html 

<html>
    <head>
        <title>Three.js Orbit Controller Example</title>
        <script src="/javascripts/three.js"></script>
        <script src="/javascripts/OrbitControls.js"></script>
    </head>
    <body>
        <script src="javascripts/scene.js"></script>
    </body>
</html>

szene.js 

var scene, renderer, camera;
var cube;
var controls;

init();
animate();

function init()
{
    renderer = new THREE.WebGLRenderer( {antialias:true} );
    var width = window.innerWidth;
    var height = window.innerHeight;
    renderer.setSize (width, height);
    document.body.appendChild (renderer.domElement);

    scene = new THREE.Scene();
    
    var cubeGeometry = new THREE.BoxGeometry (10,10,10);
    var cubeMaterial = new THREE.MeshBasicMaterial ({color: 0x1ec876});
    cube = new THREE.Mesh (cubeGeometry, cubeMaterial);

    cube.position.set (0, 0, 0);
    scene.add (cube);

    camera = new THREE.PerspectiveCamera (45, width/height, 1, 10000);
    camera.position.y = 160;
    camera.position.z = 400;
    camera.lookAt (new THREE.Vector3(0,0,0));

    controls = new THREE.OrbitControls (camera, renderer.domElement);
    
    var gridXZ = new THREE.GridHelper(100, 10);
    gridXZ.setColors( new THREE.Color(0xff0000), new THREE.Color(0xffffff) );
    scene.add(gridXZ);

}

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

Das OrbitControls-Skript verfügt über mehrere Einstellungen, die geändert werden können. Der Code ist gut dokumentiert, schauen Sie sich also OrbitControls.js an. Als Beispiel ist hier ein Codeausschnitt, der einige davon zeigt, die an einem neuen OrbitControls-Objekt geändert werden. 

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

Benutzerdefinierte Kamerasteuerung - Mausbasiertes Schieben

Hier ist ein Beispiel eines benutzerdefinierten Kamera-Controllers. Dieser liest die Position der Maus innerhalb des Client-Fensters und verschiebt die Kamera dann so, als würde sie der Maus im Fenster folgen.

index.html 

<html>
    <head>
        <title>Three.js Custom Mouse Camera Control Example</title>
        <script src="/javascripts/three.js"></script>
    </head>
    <body>
        <script src="javascripts/scene.js"></script>
    </body>
</html>

szene.js 

var scene, renderer, camera;
var cube;
var cameraCenter = new THREE.Vector3();
var cameraHorzLimit = 50;
var cameraVertLimit = 50;
var mouse = new THREE.Vector2();

init();
animate();

function init()
{
    renderer = new THREE.WebGLRenderer( {antialias:true} );
    var width = window.innerWidth;
    var height = window.innerHeight;
    renderer.setSize (width, height);
    document.body.appendChild (renderer.domElement);
  
    scene = new THREE.Scene();
    
    var cubeGeometry = new THREE.BoxGeometry (10,10,10);
    var cubeMaterial = new THREE.MeshBasicMaterial ({color: 0x1ec876});
    cube = new THREE.Mesh (cubeGeometry, cubeMaterial);

    cube.position.set (0, 0, 0);
    scene.add (cube);

    camera = new THREE.PerspectiveCamera (45, width/height, 1, 10000);
    camera.position.y = 160;
    camera.position.z = 400;
    camera.lookAt (new THREE.Vector3(0,0,0));
    cameraCenter.x = camera.position.x;
    cameraCenter.y = camera.position.y;

    //set up mouse stuff
    document.addEventListener('mousemove', onDocumentMouseMove, false);
    window.addEventListener('resize', onWindowResize, false);
    
    var gridXZ = new THREE.GridHelper(100, 10);
    gridXZ.setColors( new THREE.Color(0xff0000), new THREE.Color(0xffffff) );
    scene.add(gridXZ);
}

function onWindowResize ()
{
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize (window.innerWidth, window.innerHeight);
}

function animate()
{   
    updateCamera();
    requestAnimationFrame ( animate );  
    renderer.render (scene, camera);
}

function updateCamera() {
    //offset the camera x/y based on the mouse's position in the window
    camera.position.x = cameraCenter.x + (cameraHorzLimit * mouse.x);
    camera.position.y = cameraCenter.y + (cameraVertLimit * mouse.y);
}

function onDocumentMouseMove(event) {
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

Wie Sie sehen, aktualisieren wir hier lediglich die Kameraposition während der animate des Renderns, wie wir es für jedes Objekt in der Szene tun könnten. In diesem Fall positionieren wir die Kamera einfach an einem Punkt, der von ihren ursprünglichen X- und Y-Koordinaten versetzt ist. Dies können genauso einfach die X- und Z-Koordinaten sein, oder ein Punkt entlang eines Pfads oder etwas völlig anderes, das sich nicht auf die Position der Maus bezieht.



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow