javascript - 如何使用lookAt矩阵设置正向？

Question

我有一个 WebGL 3D 场景，其中包含一个网格和一个摄像头。我可以正确翻译/旋转两者（无论如何，它在测试中出现）。

现在我希望能够设置网格变换的“前向”方向。

没有太多线索，我试过这个：

// _value being a 3-component direction such as [ 0, 0, 1 ]
// V4.up being the world up vector: [ 0, 1, 0 ]
set forward(_value) {

    const p = V4.add(this.position, _value);
    const m = M4.lookAt(this.position, p, V4.up);
    this.rotation = M4.transform(m, this.rotation);
}

当网格位于 [ 0, 0, 0 ]（原点）时，这似乎什么都不做。当网格不在原点时，它会在所有三个轴上快速旋转，并且随着我远离原点的速度增加。

编辑：我意识到我正在将方向向量传递给.lookAt。我现在改变了上面的方法，把这个方向变成一个位置（p），从变换的位置偏移。但是，这仍然会导致与以前相同的旋转问题。

我的 lookAt 矩阵看起来像这样；

lookAt(_from, _to, _up) {

    const fwd = V4.normalize(V4.sub(_from, _to));
    const right = V4.cross(_up, fwd);

    return [

        right[0], right[1], right[2], 0,
        _up[0], _up[1], _up[2], 0,
        fwd[0], fwd[1], fwd[2], 0,
        _from[0], _from[1], _from[2], 1
    ];
}

（我目前正在使用这个 lookAt 矩阵的逆矩阵来获得（看似）正确的相机渲染。）

在我的着色器中，我像这样设置 gl_Position；

void main() {

    gl_Position = projectionMatrix * viewMatrix * worldMatrix * vertexPosition;
}

在我的 Transform 类中，我可以像这样获得正向；

get forward() {
        
    return V4.normalize(M4.transform(M4.rotate(this.rotation), V4.forward));
}

笔记; V4 是我的 vector4 操作类。M4 是我的矩阵运算类。笔记; V4.forward = [ 0, 0, 1 ];

编辑 2：我现在尝试使用 glMatrix 而不是我自己的 M4 类来查看我的是否有问题。我得到了完全相同的结果。

标签： javascriptmatrix3dwebgl