三.js和变换的顺序

Question

我现在正在学习三个。

我有一个JSON对象宽度动态更新，其中包含一些4个墙的数据。JSON结构：

{
...
walls: [{
            start: { 
                x : 0,  
                y : 0, 
                z : 0  
            },
            length: 1200,  
            rotation: 0    
        }, {
            start: { 
                x : 0, 
                y : 0, 
                z : 0  
            },
            length: 1200,   
            rotation: -(Math.PI/2)   
        }, {
            start: { 
                x : 0, 
                y : 0,
                z : 1200 
            },
            length: 1200,  
            rotation: 0    
        }, {
            start: { 
                x : 1200, 
                y : 0, 
                z : 0   
            },
            length: 1200,
            rotation: (Math.PI/2) 
        }],
...
}

我试图在画布上放置墙壁，当墙壁的翻译或旋转时可以，但是当墙壁都有两个时，问题是一个问题。

这是我的代码（this._container是THREE.Mesh的实例）：

this._container.matrixAutoUpdate = false;
this._container.add(new THREE.AxisHelper(1000));
if(rotation) {
    this._container.rotation.y = rotation;
    this._container.updateMatrix();        
}
if(translation) {
    this._container.translateX((translation.x + (width/2)));
    this._container.translateY((translation.y + (height/2)));
    this._container.translateZ((translation.z));
    this._container.updateMatrix();
}

如果我首先施加旋转，然后翻译，它也会旋转对象的本地轴，并且翻译将有错误的方向（http://robber.hu/webgl/1.png）。如果我首先应用翻译，而不是旋转，则Y轴移至其他位置，并且旋转将在错误的点附近（http://robber.hu/webgl/2.png）。

我认为有两种解决这个问题的方法，但找不到解决方案：

• 以某种方式使用"全局翻译"，因此对象在场景的轴上翻译，然后使用第一个方法

• 将对象的"枢轴"更改为左或右边缘，而不是使用第二种方法

我该如何实施，或者在哪里可以找到一些文档/教程？

Answer 1

已解决。解决方案是：使用两者的三个转换。首先，将对象转换为最终位置，其次，旋转它，最后通过局部X和Y轴再次翻译。第三个翻译将本地轴从对象的中心移到角落。

r