Comment faire pivoter une TROIS.PerspectiveCamera autour de l'objet

Je suis en train de ce programme où vous pouvez cliquer sur un objet, zoom, puis le regarder sous tous les angles, en maintenant le bouton droit de la souris et en la faisant glisser. J'ai besoin de la caméra pour tourner autour de l'objet, de ne pas faire pivoter l'objet avec l'appareil photo en le regardant. Honnêtement, je n'ai juste aucune idée de comment les maths!

Pour le test il y a déjà un objet de jeu avec un xyz, nous avons sélectionné et sont à la recherche à

var g = new GameObject(500, 0, 0);//The game object with xyz
this.selected = g;//set selected to g

//Create and set the camera
this.camera = new THREE.PerspectiveCamera(45, w/h, 1, 10000);
this.camera.position.x = 0;
this.camera.position.y = 0;
this.camera.position.z = 0;

//set camera to look at the object which is 500 away in the x direction
this.camera.lookAt(new THREE.Vector3(this.selected.x, this.selected.y, this.selected.z));

De sorte que le rayon entre la caméra et l'objet est de 500 et tout sélectionné et la rotation, l'appareil doit toujours être de 500 à l'écart.

- Je mettre à jour la scène ici:

Main.prototype.update = function(){

    this.renderer.render(this.scene, this.camera);//scene is just some ambient lighting

    //what to do when mouse right is held down
    if(this.rightMouseDown){

        //placeholder functionality, needs to rotate around object based on mouse movements
        this.camera.position.x -= 5;

    }
}

Comment puis-je faire tourner cette caméra autour de g avec un rayon de 500?!?!

Pourquoi ne pas utiliser la boule de commande de contrôle? threejs.org/examples/misc_controls_trackball.html

OriginalL'auteur Andrew Fisher | 2014-11-23

  1. 4

    Comme gaitat mentionné, boule de commande les commandes sont le meilleur endroit pour commencer avec de nombreux paramètres configurables pour faire de la rotation de la caméra/la révolution facile. Un potentiel énorme avantage de cette méthode ( en particulier pour votre projet ) est d'éviter les "gimbal lock", qui est la source de beaucoup de frustration lorsque l'on travaille avec des rotations. Voici un lien qui peut vous aider avec la boule de commande contrôle et Orbitcontrols:

    Pivoter la caméra dans Three.js avec la souris

    Une autre option serait de la caméra coordonnées, vous-même dans la boucle d'animation qui est en fait assez simple:

    var angle = 0;
var radius = 500; 

function animate() {
...
//Use Math.cos and Math.sin to set camera X and Z values based on angle. 
camera.position.x = radius * Math.cos( angle );  
camera.position.z = radius * Math.sin( angle );
angle += 0.01;
...
}

    Une autre option serait de connecter l'appareil photo à un pivot de l'objet et il suffit de tourner le pivot:

    var camera_pivot = new THREE.Object3D()
var Y_AXIS = new THREE.Vector3( 0, 1, 0 );

scene.add( camera_pivot );
camera_pivot.add( camera );
camera.position.set( 500, 0, 0 );
camera.lookAt( camera_pivot.position );
...
camera_pivot.rotateOnAxis( Y_AXIS, 0.01 );    //radians

    Si vous exercez cette option, sachez que l'appareil photo de l'objet est dans le "pivot de la camera de l'espace", et peut-être plus difficile à manipuler les autres.

    Merci, cela m'a vraiment aidé!!
    Pouvez-vous expliquer plus en détail ce "pivot de la camera de l'espace" concept? Je suis en train d'essayer d'obtenir une caméra pour tourner autour des objets sans pincement en haut et en bas (comme l'orbite des contrôles, et que votre code ne). J'ai besoin d'un "nettoyeur" de la rotation autour du centre, comme si vous le teniez les objets et en les faisant pivoter librement autour (pas juste en tournant sur phi et sur theta). Si vous pouviez m'aider, je serais très reconnaissante.

    OriginalL'auteur Zob