Question

I’m learning THREE.js right now, and I stucked with a probably noob problem.

I’ve a JSON object width dynamic update, it contains some data of 4 walls. The JSON struct:

{

...

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) 
        }],

...

}

I’m trying to position walls on canvas, It’s OK when the wall has just a translation OR rotation, but there’s a problem when the wall has both of them.

Here’s my code (this._container is an instance of 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();
}

If I apply rotation first then translate, it rotates the object’s local axes too, and the translation will have wrong directions (http://robber.hu/webgl/1.png). If I apply translation first, than rotate, the Y axis moves to other position, and the rotation will be around wrong point (http://robber.hu/webgl/2.png).

I think there are two ways to solve this problem, but can’t find the solutions:

• Somehow using a “global translation”, so the object translates on the scene’s axis, and then use the first method

• Change the object’s “pivot” to left or right edge, and than use the second method

How can I implement it, or where can I find some docs/tutorial for this?

Answer 1

Solved.
The solution was that: Use three transformations insted of two. First, translate object to final position, second, rotate it, and finally, translate again via local X and y axis. Third translation moving the local axis from object’s center to the corner.

R