Question

对于我正在研究的项目，我试图在浏览器中看到建筑物的3D模型。在建筑物的所有元素中，我有顶点，索引和matrix3d。此信息来自使用OpenGL在脱机程序中显示元素的应用程序。

现在我正在尝试将这些元素添加到我的Three.js场景中。

我可以将元素添加到由顶点和索引定义的场景中，我可以使用材质和灯光看到它们，但我无法旋转并将它们转换到正确的位置。例如，我添加一个这样的元素：

var m242242255255 = new THREE.MeshPhongMaterial({color:0xf2f2ff, transparent:true, opacity:1, side:THREE.DoubleSide});
var geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array([821,-15,2825.1,-821,-15,2825.1,-821,-39,2825.1,821,-39,2825.1,-821,-39,54,-821,-15,54,821,-15,54,821,-39,54,-875,-54,0,-821,-54,54,-821,-54,2825.1,821,-54,54,-875,-54,2879.1,821,-54,2825.1,875,-54,0,875,-54,2879.1,875,0,0,821,0,54,821,0,2825.1,-821,0,54,875,0,2879.1,-821,0,2825.1,-875,0,0,-875,0,2879.1]), 3));
geometry.setIndex(new THREE.BufferAttribute(new Uint16Array([8,9,10,9,8,11,12,10,13,10,12,8,11,14,13,14,11,8,13,15,12,15,13,14,16,17,18,17,16,19,20,18,21,18,20,16,19,22,21,22,19,16,21,23,20,23,21,22,8,22,16,16,14,8,14,16,20,20,15,14,15,20,23,23,12,15,12,23,22,22,8,12,13,18,17,17,11,13,11,17,19,19,9,11,9,19,21,21,10,9,10,21,18,18,13,10]), 1));

var mesh = new THREE.Mesh(geometry, m242242255255);
mesh.matrixAutoUpdate = false;
mesh.applyMatrix(new THREE.Matrix4().set(0,0,-1,0,  -0.42262,-0.90631,0,0,  -0.90631,0.42262,0,0,  64754.68,15569.13,-4647.5,1));
mesh.updateMatrix();
scene.add(mesh);

元素显示在我的场景中，它看起来像是旋转但是没有转换到正确的位置。

我可以在将网格添加到场景之前添加翻译，但感觉它不应该是必要的。

mesh.applyMatrix(new THREE.Matrix4().makeTranslation(-64754.68, -15569.13, -4647.5));
mesh.updateMatrix();

看起来元素沿错误的轴旋转。它沿x轴而不是z轴旋转。有人能告诉我它是做错了吗？我应该先改变矩阵才能在Three.js中使用它吗？

修改

我刚刚发现我必须反转我的矩阵以纠正旋转问题。所以我现在有：

var geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array([821,-15,2825.1,-821,-15,2825.1,-821,-39,2825.1,821,-39,2825.1,-821,-39,54,-821,-15,54,821,-15,54,821,-39,54,-875,-54,0,-821,-54,54,-821,-54,2825.1,821,-54,54,-875,-54,2879.1,821,-54,2825.1,875,-54,0,875,-54,2879.1,875,0,0,821,0,54,821,0,2825.1,-821,0,54,875,0,2879.1,-821,0,2825.1,-875,0,0,-875,0,2879.1]), 3));
geometry.setIndex(new THREE.BufferAttribute(new Uint16Array([8,9,10,9,8,11,12,10,13,10,12,8,11,14,13,14,11,8,13,15,12,15,13,14,16,17,18,17,16,19,20,18,21,18,20,16,19,22,21,22,19,16,21,23,20,23,21,22,8,22,16,16,14,8,14,16,20,20,15,14,15,20,23,23,12,15,12,23,22,22,8,12,13,18,17,17,11,13,11,17,19,19,9,11,9,19,21,21,10,9,10,21,18,18,13,10]), 1));

var mesh = new THREE.Mesh(geometry, m242242255255);
mesh.matrixAutoUpdate = false;
var matrix = new THREE.Matrix4();
matrix.set(0,0,-1,0,-0.42262,-0.90631,0,0,-0.90631,0.42262,0,0,64754.68,15569.13,-4647.5,1);
matrix.getInverse(matrix);
mesh.applyMatrix( matrix );
mesh.updateMatrix();
mesh.applyMatrix( new THREE.Matrix4().makeTranslation( 64754.68, 15569.13, -4647.5 ) );
mesh.updateMatrix();
scene.add(mesh);

但是我仍然有使用矩阵进行翻译的问题。如何避免两次更新网格？

Answer 1

您需要按行指定矩阵元素，如下所示：

matrix.set( n11, n12, n13, n14,
            n21, n22, n23, n24,
            n31, n32, n33, n34,
            n41, n42, n43, n44 );

这样做是因为它是人类可读的。

three.js r.76

Answer 2

支持你在x，y，z序列中进行调整。

    rotationMatrix = new THREE.Matrix4().multiplyMatrices(new THREE.Matrix4().makeRotationY(rV.y), new THREE.Matrix4().makeRotationX(rV.x));
    rotationMatrix.premultiply(new THREE.Matrix4().makeRotationZ(rV.z));
    matrix.copy(rM).setPosition(vector3);

Answer 3

从documentation直接修改对象矩阵

请注意，在这种情况下，必须将matrixAutoUpdate设置为false，并且应确保 not 不能调用updateMatrix。调用updateMatrix将破坏对矩阵所做的手动更改，从而根据位置，比例等重新计算矩阵。

您会发现，调用mesh.updateMatrix()之后，网格变换矩阵将不同于您设置的矩阵。您可以通过将matrix.elements与mesh.matrixWorld.elements进行比较来进行验证，删除updateMatrix之后，结果将相同。

在Three.js中应用矩阵并不是我所期望的

3 个答案: