1

我现在正在学习 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）。

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

  • 不知何故使用“全局平移”，所以对象在场景的轴上平移，然后使用第一种方法

  • 将对象的“枢轴”更改为左边缘或右边缘，然后使用第二种方法

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

4

1 回答 1

2

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

R

于 2012-11-07T20:44:11.913 回答