CODEWITHSUNDEEP
3dthree.js
Maël Nison
Maël Nison

Reputation: 7353

Rotate, then translate in three.js

I would like to rotate then a plane created with THREE.PlaneGeometry, but I have some problems.

  1. What's the axis in front of the camera with FirstPersonCamera ?
    My own tests have revealed a X-front/back, Y-top/bottom, Z-left/right, am I right ?

  2. In order to make a cube with these plane, I use the following code (cut for display only X-axis faces). For a reason I don't understand, there is a small space between the block and the orthogonal basis. It seems that rotation is applied after translation. How can I fix it ?
function lol() {
    var mesh = new THREE.Mesh(xFacesGeometry, material);
    mesh.matrix.setRotationFromEuler(new THREE.Vector3(0, ath.PI / 2),  'XYZ');
    mesh.matrix.setPosition(new THREE.Vector3(x * 20 + 10, y * 20 + 10, z * 20 + 10));
    mesh.matrixAutoUpdate = false;
}
lol(0, 0, 0);
lol(1, 0, 0);

Full code here (use ctrl+click to move backward) : http://jsfiddle.net/u8ZHC/

Upvotes: 3

Views: 5323

Answers (2)

Maël Nison
Maël Nison

Reputation: 7353

Just to answer this : the best way to specify the order in which translations / rotations have to be applied is to use multiple nodes.

var pitchNode = new THREE.Object3D( );
var yawNode = new THREE.Object3D( );
var rollNode = new THREE.Object3D( );
var positionNode = new THREE.Object3D( );

// here come the order
scene.add( pitchNode );
pitchNode.add( yawNode );
yawNode.add( rollNode );
rollNode.add( positionNode );

Upvotes: 1

Sebastian Sachtleben
Sebastian Sachtleben

Reputation: 518

Try to update matrix before translate the position:

mesh.matrix.setRotationFromEuler(new THREE.Vector3(0, Math.PI / 2),  'XYZ');
mesh.updateMatrix();
mesh.translate(...);

Upvotes: 0

Related Questions