设置视图矩阵答案

【问题标题】：setting the view matrix设置视图矩阵
【发布时间】：2012-12-09 03:16:41
【问题描述】：

我正在尝试使用 Three.js 将我的 C# XNA 项目转换为 WebGL。

到目前为止，一切进展顺利，但我目前正在研究我的相机。使用 XNA，您可以轻松地将视图矩阵发送到着色器。

我确定我只是没有看到我应该在文档中看到的内容。

我的 CameraManager 类有一个 MouseMoved 事件处理程序。

CameraManager.prototype.MouseMoved = function( changeVector ) {    
    var q1 = new THREE.Quaternion();
    q1.setFromAxisAngle(this.left, (( Math.PI / 4 ) / 200) * changeVector.y);
    var q2 = new THREE.Quaternion();
    q2.setFromAxisAngle(this.left, (( -Math.PI / 4 ) / 200) * changeVector.x);
    var q = new THREE.Quaternion();
    q.multiply(q1, q2);

    q.multiplyVector3(this.direction);
    q.multiplyVector3(this.left);
}

CameraManager 也有一个 update 方法来更新 View 矩阵。

CameraManager.prototype.CreateLookAt = function() {
    var target = this.position.clone();
    target.addSelf(this.direction);
    this.view = THREE.Matrix4.CreateLookAt(this.position, target, this.up);    
}

THREE.Matrix4.CreateLookAt = function(cameraPosition, cameraTarget, upVector) {
    var zAxis = new THREE.Vector3();
    zAxis.sub(cameraPosition, cameraTarget);    
    zAxis.normalize();

    var xAxis = new THREE.Vector3();
    xAxis.cross(upVector, zAxis);
    xAxis.normalize();

    var yAxis = new THREE.Vector3();
    yAxis.cross(zAxis, xAxis);

    return new THREE.Matrix4(
         xAxis.x,           yAxis.x,           zAxis.x,          0,
         xAxis.y,           yAxis.y,           zAxis.y,          0,
         xAxis.z,           yAxis.z,           zAxis.z,          0,
        -xAxis.dot(cameraPosition),  -yAxis.dot(cameraPosition),  -zAxis.dot(cameraPosition),  l
    ); 
}

只是想知道如何设置相机的视图矩阵。

谢谢！

【问题讨论】：

标签： javascript webgl three.js

【解决方案1】：

你为什么不把你的矩阵属性分开设置：

var m = getYourNewMatrix();
camera.position = m.decompose()[ 0 ];
camera.rotation = m.decompose()[ 1 ];
camera.updateMatrix();

【讨论】：

嘿，所以我尝试了你的建议。但是，我正在查看 m.decompose 的结果，并且返回的值数组都没有正确的位置。看起来视图矩阵确实有它们，但实际上从 THREE.Matrix4 的元素数组中获取值也不起作用......
您检查过您最初从“新矩阵”获得的值吗？可能与您的计算有关？因为如果您将正确的值设置为camera.position，那么您的位置就会正确设置））
所以，我决定最终将 camera.position 设置为简单的东西。我现在可以看到我的网格正在绘制！看来我需要找到有关如何创建第一人称相机的教程。
最好的祝愿！无论如何，我认为更改单独的值（例如 camera.position 和 camera.lookAt()）会更有效，而不是更改整个矩阵，在渲染的任何特定时刻都会更改其 16 个值中的一小部分。