Existe-t-il un moyen de rendre le lookat de la caméra three.js décentré?

Question

Y a-t-il un moyen de configurer le moteur de rendu Three.js de telle sorte que le point de référence de la caméra ne soit pas au centre de l'image rendue? Pour clarifier: image une scène avec un seul cube 1x1x1m à (0, 0, 0). La caméra est située à (0, 0, 10) et le point de recherche est à l'origine, coïncidant avec le centre du cube. Si je rends cette scène comme il est, je pourrais retrouver avec quelque chose comme ceci:

normal render

Cependant, je voudrais être en mesure de rendre cette scène de telle sorte que le point lookat est dans la partie supérieure coin gauche, me donner quelque chose comme ceci:

desired render

Si l'image normale est 800x600, alors le résultat que j'imagine serait comme si je rendais une image 1600x1200 avec le lookat au centre, puis recadrée que la normale image de sorte que seule la partie inférieure droite reste.

Bien sûr, je peux changer le lookat pour faire le cube aller dans le coin supérieur gauche, puis-je voir le cube sous un angle, me donner un résultat non désiré comme ceci:

test.moobels.com /temp/cube_angle.jpg

Je pourrais aussi réellement rendre l'image complète de 1600x1200 et cacher les 3/4 de l'image, mais j'espère qu'il y aura une solution plus élégante. Est-ce que quelqu'un le sait?

Answer 1

Voici une solution simple:

En supposant que votre cube est de 4 x 4 x 4, à la position 0, 0, 0:

var geometry = new THREE.BoxGeometry(4, 4, 4); 
var material = new THREE.MeshBasicMaterial({ color: 0x777777 }); 
var cube = new THREE.Mesh(geometry, material); 
cube.position.set(0, 0, 0); 

position de Get cube:

var Vx = cube.position.x, 
    Vy = cube.position.y, 
    Vz = cube.position.z; 

Ensuite, déduire par 2 de la position x, puis ajouter 2 à la position y et z, et utiliser les valeurs pour créer un nouveau Vector3:

var newVx = Vx - 2, 
    newVy = Vy + 2; 
    newVz = Vz + 2; 

var xyz = new THREE.Vector3(newVx, newVy, newVz) 

Puis caméra LookAt:

camera.lookAt(xyz); 

Utiliser journal de la console, il montrerait que la caméra regarde maintenant -2, 2, 2, qui est le cube de votre coin supérieur gauche.

console.log(xyz); 

Answer 2

Si vous voulez que votre appareil photo en perspective d'avoir une vue décentré, le modèle que vous devez utiliser est:

camera = new THREE.PerspectiveCamera(for, aspect, near, far); 
camera.setViewOffset(fullWidth, fullHeight, viewX, viewY, viewWidth, viewHeight); 

Voir les docs: https://threejs.org/docs/#api/cameras/PerspectiveCamera

Vous pouvez trouver des exemples de cette utilisation dans this example et this example.

Three.js R.73