three.js所设置和读取摄像机的注视向量(three.js set and read camer

取而代之的是相机camera.rotation或使用的lookAt（）函数旋转，我想直接传递一看矢量相机...是否有可能直接设置相机的外观载体，是它可以读取外观从摄像机矢量？

Answer 1:

相机不具有“视向量”，所以你不能对它进行设置。

你可以，但是，建立一个point加入你的注视向量到摄像机的位置，然后调用一下

camera.lookAt( point );

下面是如何确定在摄像机所看的方向，假设照相机要么没有父（除场景其他）。

相机俯视其内部负z轴，所以创建指向下方的负z轴的矢量：

var vector = new THREE.Vector3( 0, 0, - 1 );

现在，应用相同的旋转被应用到相机的向量：

vector.applyQuaternion( camera.quaternion );

将得到的载体将在摄像机正在寻找的方向指向。

或者，你可以使用下面的方法，它的工作即使相机是另一个对象的子项：

camera.getWorldDirection( dirVector );

three.js所r.73

Answer 2:

以上回答包装为一个实用程序，这是我做我的三个utils的：

THREE.Utils = {
    cameraLookDir: function(camera) {
        var vector = new THREE.Vector3(0, 0, -1);
        vector.applyEuler(camera.rotation, camera.eulerOrder);
        return vector;
    }
};

与调用它THREE.Utils.cameraLookDir(camera);

Answer 3:

这些其他的答案是非常有见地，但不完全正确的。代码返回，在该照相机所指向相同的方向上指向的矢量。这是一个很好的开始！

但是，如果相机是在原点（0，0，0）（或精确地位于连接原点旋转矢量点没有通过超越该点的线段，使该点是背后的摄像头）的相机荣获” T为寻找这一点。很明显 - 只是常识 - 摄像头的位置也影响正在看什么点。考虑一下！！

摄像机方法lookAt()着眼于在3D空间中的点无论在哪里相机。因此，要获得该摄像头在看着你需要通过调用来调整相机位置的点：

vec.add( camera.position );

还值得一提的是，摄像头不看在一个点，但向下看行无限数量的点，每个距离相机不同的距离。从其他的答案代码返回一个载体，其是恰好一个单元长度，因为四元数的应用的归一化z轴矢量（0，0，-1）返回另一个归一化向量（在不同的方向上）。要计算一下点在任意距离x从相机使用：

THREE.Vector3( 0, 0, -x ).applyQuaternion( camera.quaternion ).add( camera.position );

这需要沿z轴的点处的距离x从原点，它旋转到摄像机的方向，然后通过添加摄像机的位置产生一个“世界点”。我们希望有一个“世界点”（而不仅仅是“相对于相机点”），因为camera.lookAt()也需要一个“世界点”作为参数。

Answer 4:

我所做的就是使用这种方法的lookAt（矢量）之前渲染场景就像在下面的代码，只是尝试使用它在一个新的HTML文件：

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style > *{ margin: 0 ; } #WebGlElement { height: 500px; width: 500px; background-color: red } </style> </head> <body> <script src="js/three.min.js"></script> <div id="WebGlElement"></div> <script> var contianer = document.getElementById("WebGlElement"); var origin = new THREE.Vector3(0,0,0); // CREATE THREE BASIC ELEMENTS var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 40, 300/300, 1, 1000 ); var renderer = new THREE.WebGLRenderer(); // SET RENDERER AND ATTACH IT TO BODY renderer.setSize( 500, 500 ); //document.body.appendChild( renderer.domElement ); contianer.appendChild( renderer.domElement); // CREATE A GEOMETRY AND ADD IT TO SCENE /*var geometry = new THREE.BoxGeometry( 1, 1, 5 ); var material = new THREE.MeshBasicMaterial( { color: 0x1abc9c } ); material.wireframe = true ; material.wireframeLinewidth = 0.1 ; var cube = new THREE.Mesh( geometry, material ); scene.add( cube );*/ var geometry = new THREE.Geometry(); geometry.elementsNeedUpdate=true; geometry.vertices.push( new THREE.Vector3( -0, 1, 0 ), new THREE.Vector3( -1, -1, 0 ), new THREE.Vector3( 1, -1, 0 ) ); geometry.faces.push( new THREE.Face3( 0, 1, 2 ), new THREE.Face3( 2, 1, 0 ) ); var material = new THREE.MeshBasicMaterial( { color: 0x1abc9c } ); //material.wireframe = true ; //material.wireframeLinewidth = 0.1 ; var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); var axisHelper = new THREE.AxisHelper( 1 ); scene.add( axisHelper ); // POSITION OF CAMER ON Z camera.position.z = 5; camera.position.y = 5; camera.up = new THREE.Vector3(0,0,1); var dir = 1; var number = 0.115 // CREATE FUNCTION FOR RENDER var render = function () { requestAnimationFrame( render ); //circle.rotation.x += 0.01; if ( camera.position.x> 5) { dir = -1; } if ( camera.position.x< -5) { dir = 1; } camera.lookAt(cube.position); //camera.rotation.y += 0.015 * dir; camera.position.x += number * dir; renderer.render(scene, camera); }; // EXECUTE FIRST RENDER render(); </script> </body> </html>

文章来源: three.js set and read camera look vector