Three.jsで行列を適用すると期待通りではない

Question

私が取り組んでいるプロジェクトでは、建物の3Dモデルをブラウザに表示させようとしています。建物のすべての要素のうち、私は頂点、インデックス、行列を持っています。この情報は、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(); 

また、要素が間違った軸に沿って回転しているように見えます。これは、z軸の代わりにx軸に沿って回転します。誰かが私が間違っていることを教えてくれますか？ 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); 

しかし、私はまだ行列を使用して翻訳に問題があります。メッシュを2回更新するのを避けるにはどうすればいいですか？

Answer 1

あなたがそうのように、行によってあなたの行列要素を指定する必要があります。それは人間が読めるように、それがこのように行われている

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

。あなたはX、Y、Zの順序でratate suppost

three.js r.76

Answer 2

。

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);