How to use quaternion rotation in Three.js json script

Question

I am working on an L-system interpreter, and I use quaternion as an internal representation of rotation. I need to export the result to a JavaScript scene in Javascript, and I found the json scene to be the best way to do this.

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

So, I used the help of http://threejs.org/io/s/quaternion and found that THREE.Object3D has quaternion and useQuaternion properties , but it does not seem to work, the error occurs when loading the scene (possibly due to lack of the rotation attribute, see EDIT at the end):

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

I also tried to convert the quaternion into Euler angles, but it will not work for me, possibly due to a different order of application of the angles (I assume that the order is Y, Z, X). In the above example, the quaternion represents a 135 degree rotation around the Z axis (step), which will convert to Euler angles [pi, pi, pi / 4], but it does not display correctly in the scene.

The following figure shows the blocks, each of which is rotated 11 degrees more than the other along the Z axis. Axes X (red), Y (green) and Z (blue). The upper half rotates incorrectly due to incorrect quaternion conversion to Euclid (I used this page to implement: http://www.euclideanspace.com/maths/geometry/rotations/conversions/quaternionToEuler/ ).

EDIT: after further study, the error caused by the scene loader is due to the absence of the rotation attribute on the object. After exiting, do not throw an error, and the scene is loaded, but it is incorrect (as shown in the figure), since the rotation of the quaternions is ignored.

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

Answer 1

I think I solved my problem. This is not a direct answer to my question about how I communicate about this.

The problem is the scene loader, which does not work with quaternion rotations. I rewrote the scene creation script to generate the 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 discovered the magic eulerOrder property on THREE.Object3D , which by default is set to "XYZ", which caused my problems (related image in the question), my quaternion-play transformation was designed for "YZX", so I changed this.

 mesh.eulerOrder = 'YZX'; 

Here it is. I don’t have time to experiment with the script loader, but if it is possible to set the eulerOrder property with the scene loader, this will be the solution to the second part of my question.

It would be best to set the quaternion directly in the scene definition, but this would probably require changes to the scene loader itself.