Databases
StackOverflow2013
Postsdbo
POHow to use quaternion rotation in Three.js json scene
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to use quaternion rotation in Three.js json scene
    text
    copied!<p>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.</p> <p>I found one example of scene on <a href="https://github.com/mrdoob/three.js/blob/master/examples/scenes/test_scene.js" rel="noreferrer">https://github.com/mrdoob/three.js/blob/master/examples/scenes/test_scene.js</a> but there is nothing about quaternion rotations.</p> <p>So I used help at <a href="http://threejs.org/io/s/quaternion" rel="noreferrer">http://threejs.org/io/s/quaternion</a> and found, that <strong>THREE.Object3D</strong> has properties <strong>quaternion</strong> and <strong>useQuaternion</strong> 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):</p> <pre><code>"obj": { ... "quaternion": [0.38268343236509,0,0,0.923879532511287], "useQuaternion": true } </code></pre> <p>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.</p> <p>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: <a href="http://www.euclideanspace.com/maths/geometry/rotations/conversions/quaternionToEuler/" rel="noreferrer">http://www.euclideanspace.com/maths/geometry/rotations/conversions/quaternionToEuler/</a> ).</p> <p><img src="https://i.stack.imgur.com/DN65Q.png" alt="ilustration of the problem"> <br /> 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.</p> <pre><code>"obj": { ... "rotation": [3.14159265358979,3.14159265358979,0.785398163397449], "quaternion": [0.38268343236509,0,0,0.923879532511287], "useQuaternion": true } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload