How to use quaternion rotation in Three.js json scene

Question

I am working on L-system interpreter and I use quaternion as internal representation of rotation. I need to export result to ThreeJs JavaScript scene and I found json scene as the best way how to do that.

I found one example of scene on https://github.com/mrdoob/three.js/blob/master/examples/scenes/test_scene.js but there is nothing about quaternion rotations.

So I used help at http://threejs.org/io/s/quaternion and found, that THREE.Object3D has properties quaternion and useQuaternion but It seems to do not work, the error is raised by scene loader (probably because of missing "rotation" attribute, see EDIT at the end):

"obj": {
    ...
    "quaternion": [0.38268343236509,0,0,0.923879532511287],
    "useQuaternion": true
}

I've also tried to convert quaternion to Euler angles but It wont work for me, probably because of other order of applying of angles (I assume order Y, Z, X). In the above example, quaternion is representing rotation about the Z axis (pitch) by 135 degrees which is converted to Euler angles [pi,pi,pi/4] but it is displayed not correct in the scene.

Following picture shows blocks each rotated by 11 deg more than other by Z axis. Axes are X(red), Y(green) and Z (blue). The upper half is rotated incorrectly due to incorrect conversion quaternion to Euclid (I used this page for implementation: http://www.euclideanspace.com/maths/geometry/rotations/conversions/quaternionToEuler/ ).

ilustration of the problem
EDIT: After further examination the error raised by scene loader is because of missing "rotation" attribute on object. Following output do not throw error and scene is loaded but it is wrong (in the same way as shown image) because quaternion rotations are ignored.

"obj": {
    ...
    "rotation": [3.14159265358979,3.14159265358979,0.785398163397449],
    "quaternion": [0.38268343236509,0,0,0.923879532511287],
    "useQuaternion": true
}

Is there more to the error message raised by the scene loader, something stating specifically what it does not like about the use of quaternions? — Ben P, Feb 29 '12 at 22:13
Ok, the error is caused by missing "rotation" attribute. The scene loader probably do not load quaternion rotations at all. — NightElfik, Mar 06 '12 at 10:47

score 4 · Accepted Answer · answered Mar 28 '12 at 13:05

I think I solved my problem. This is not direct answer to my question, just how I workaround that.

Problem is in scene loader, which does not work with quaternion rotations. I rewritten scene generation script to generate scene directly in JS.

var mesh = new THREE.Mesh(geometry, material);
... set position & scale ...
mesh.rotation.x = 3.141;
mesh.rotation.y = 3.141;
mesh.rotation.z = 0.785;
mesh.updateMatrix();
scene.add(mesh);

Then I found magic property eulerOrder on THREE.Object3D which is set to 'XYZ' in default which was causing my problems (attached image in question), my quaternion-euler conversion was designed for 'YZX' so I changed that.

mesh.eulerOrder = 'YZX';

Thats it. I have no time for experimenting with scene loader but IF it is possible to set eulerOrder property with scene loader than it will be sollution to second part of my question.

The best would be setting quaternion directly in scene definition but it will probably require changes in scene loader itself.

How to use quaternion rotation in Three.js json scene

1 Answers1