three.js
Sterowanie kamerą w Three.js

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


Wprowadzenie

W tym dokumencie opisano, w jaki sposób można łatwo dodać niektóre istniejące elementy sterujące kamery do sceny, a także podano wskazówki dotyczące tworzenia niestandardowych elementów sterujących. Uwaga: gotowe skrypty sterujące można znaleźć w folderze /examples/js/controls control biblioteki.

Sterowanie na orbicie

Kamera orbita to taka, która pozwala użytkownikowi obracać się wokół centralnego punktu, ale jednocześnie blokując określoną oś. Jest to niezwykle popularne, ponieważ zapobiega „przechyleniu” sceny poza oś. Ta wersja blokuje oś Y (pionową) i umożliwia użytkownikom orbitowanie, powiększanie i przesuwanie za pomocą lewego, środkowego i prawego przycisku myszy (lub określonych zdarzeń dotykowych).

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>

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

Skrypt OrbitControls ma kilka ustawień, które można modyfikować. Kod jest dobrze udokumentowany, więc zajrzyj do OrbitControls.js, aby je zobaczyć. Jako przykład, oto fragment kodu pokazujący kilka z nich, które są modyfikowane w nowym obiekcie OrbitControls. 

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

Niestandardowe sterowanie kamerą - przesuwanie za pomocą myszy

Oto przykład niestandardowego kontrolera kamery. Odczytuje pozycję myszy w oknie klienta, a następnie przesuwa kamerę tak, jakby podążała za myszą w oknie.

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>

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

Jak widać, tutaj aktualizujemy jedynie pozycję kamery podczas fazy animate renderowania, tak jak w przypadku dowolnego obiektu w scenie. W tym przypadku po prostu zmieniamy położenie kamery w punkcie przesuniętym od jej pierwotnych współrzędnych X i Y. Może to być równie łatwo współrzędne X i Z, punkt na ścieżce lub coś zupełnie innego, nawet niezwiązanego z pozycją myszy.



Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow