Question

我现在正在学习THREE.js，并且我遇到了一个可能没有问题的人。

我有一个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）。

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

以某种方式使用“全局翻译”，因此对象会在场景的轴上进行转换，然后使用第一种方法
将对象的“pivot”更改为左边或右边，然后使用第二种方法

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

Answer 1

解决。解决方案是：使用三个转换为两个。首先，将对象转换为最终位置，然后将其旋转，最后通过局部X和y轴再次转换。第三次平移将局部轴从对象的中心移动到角落。

[R

THREE.js＆amp;转换的顺序

1 个答案: