# Robot Simulation / Rotation issues

**URL:** <https://discourse.threejs.org/t/robot-simulation-rotation-issues/9065>\
**Category:** Showcase\
**Tags:** rotation\
**Created:** [August 15, 2019, 10:01am UTC](https://discourse.threejs.org/t/robot-simulation-rotation-issues/9065 "2019-08-15T10:01:44Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![seppl2019](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seppl2019/32/6751_2.png) [@seppl2019](https://discourse.threejs.org/u/seppl2019)\
**Post date:** [August 15, 2019, 10:01am UTC](https://discourse.threejs.org/t/robot-simulation-rotation-issues/9065/1 "2019-08-15T10:01:44Z")

</div>

A few days ago I started working with Three.js. You might have seen my stackoverflow - question [https://stackoverflow.com/questions/57311356/rotating-an-object-properly-around-a-pivot-point-given-axis-and-angle/57312831#57312831](https://stackoverflow.com/questions/57311356/rotating-an-object-properly-around-a-pivot-point-given-axis-and-angle/57312831#57312831) that was based on my issues in understanding how to properly rotate a hierachy of objects in Three.js.

My first attempt that partly solved the problem is available at:

[https://codepen.io/seppl2019/pen/zgJVKM](https://codepen.io/seppl2019/pen/zgJVKM)  
 ![grafik](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/4/448845f4c5ff2fd46d202fa120abd5af78d4f2cd.png)

In the meantime I made some progress with my main project [http://pi-q-robot.bitplan.com/](http://pi-q-robot.bitplan.com/) which is published on github at [https://github.com/BITPlan/PI-Q-Robot](https://github.com/BITPlan/PI-Q-Robot).

 ![grafik](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/d1d76aff2a21d266b02c55f5e6e3f74ff20af6ef.jpeg)

It is far from where i’d like to be but nevertheless it might be a good starting point for discussing some Three.js issues. This topic is based on the commit 8f430a08024682c4e2323ce8bd87f3f18ee977cc - if you’d like to reproduce it you might want to check out / clone exactly that state of affairs.

The content in this project is loaded from json files with a format that I came up with myself.  
See [https://raw.githubusercontent.com/BITPlan/PI-Q-Robot/master/web/models/spiderq.json](https://raw.githubusercontent.com/BITPlan/PI-Q-Robot/master/web/models/spiderq.json) for the definition of the quadruped robot that I’d like to simulate which is described in  
[http://wiki.bitplan.com/index.php/Raspberry\_PI\_Spiderbot](http://wiki.bitplan.com/index.php/Raspberry_PI_Spiderbot)

**Buggy behavior of current state of affairs**  
The options boxwires=false and debug=true are important at this point - otherwise the examples might give errors and misbehave - it’s one of the things I’d love to get support for to get things fixed.  
If you’d like to try things out locally just follow the installation hints on github and use localhost:5002 as the base url

**three Part example**  
[http://pi-q-robot.bitplan.com/example/robot?robot=/models/thing3088064.json?boxwires=false&debug=true](http://pi-q-robot.bitplan.com/example/robot?robot=/models/thing3088064.json?boxwires=false&debug=true)

 ![grafik](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/3/33c8eaf30602d678bd5126b191175f397a01abb1.png)

This example is described by [https://raw.githubusercontent.com/BITPlan/PI-Q-Robot/master/web/models/thing3088064.json](https://raw.githubusercontent.com/BITPlan/PI-Q-Robot/master/web/models/thing3088064.json) and derived from [https://www.thingiverse.com/thing:3088064](https://www.thingiverse.com/thing:3088064)

If you move the Piece1.ry , Piece2.ry and Piece3.ry sliders you’ll see the effect i’d like to get for rotating around pivots.

**Three.js Issues: XYZ-Cubes example**

[http://pi-q-robot.bitplan.com/example/robot?robot=/models/xyzcube.json&debug=true&boxwires=false](http://pi-q-robot.bitplan.com/example/robot?robot=/models/xyzcube.json&debug=true&boxwires=false)  
shows some rotational issues that I am having with Three.js and that well might be intrinsic to Three.js.

 ![grafik](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/6/6b78461c9e7985f25e7e059a1ba2f67dcf1043f7.png)

The robot description is loaded from [https://raw.githubusercontent.com/BITPlan/PI-Q-Robot/master/web/models/xyzcube.json](https://raw.githubusercontent.com/BITPlan/PI-Q-Robot/master/web/models/xyzcube.json) and is based on the XYZ-Calibration cube from Thingiverse [https://www.thingiverse.com/thing:1278865](https://www.thingiverse.com/thing:1278865)

As outlined in [http://wiki.bitplan.com/index.php/Three.js](http://wiki.bitplan.com/index.php/Three.js) the coordinate system of Three.js will not display the cube as shown in [https://github.com/BITPlan/PI-Q-Robot/blob/8f430a08024682c4e2323ce8bd87f3f18ee977cc/web/models/stl/xyz/xyzCalibration\_cube.stl](https://github.com/BITPlan/PI-Q-Robot/blob/8f430a08024682c4e2323ce8bd87f3f18ee977cc/web/models/stl/xyz/xyzCalibration_cube.stl).

Cube0 is the unrotated version of that cube.

To make the cube render with Three’s coordinate system it needs to be rotated. Cubes A1 to C3 are all rotated so that the X,Y,Z text on it is aligned with the corresponding axes of Three.js

Now as in the previous example you can rotate the stack of Cubes by moving  
the C1.ry slider the C1.1.1.rx slider and the C1.1.1.ry slider - again things work as expected.

 ![grafik](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/2/2e8c2d8031c185bef82cbd97da195f1fed2dd37e.png)

You’ll be able to rotate the other Cubes in this way. Except for CubeC3.  
It will not rotate around it’s pivot axis and I assume this is a nice example of a Gimbal Lock [https://en.wikipedia.org/wiki/Gimbal\_lock](https://en.wikipedia.org/wiki/Gimbal_lock)

It would be great if someone could point out how the third rotation option “Quarternion” would be able to solve this issue.

**NiryoOne example**  
[http://pi-q-robot.bitplan.com/example/robot?robot=/models/NiryoOne.json&debug=true&boxwires=false](http://pi-q-robot.bitplan.com/example/robot?robot=/models/NiryoOne.json&debug=true&boxwires=false)

 ![grafik](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/c87808225f97578a7a9e38f0d147788230b9b0f0.png)  
is described by [https://raw.githubusercontent.com/BITPlan/PI-Q-Robot/master/web/models/NiryoOne.json](https://raw.githubusercontent.com/BITPlan/PI-Q-Robot/master/web/models/NiryoOne.json) and is based on [https://github.com/NiryoRobotics/niryo\_one](https://github.com/NiryoRobotics/niryo_one)

This example shows how difficult it is to position things correctly in the current way rotation and position are specified. There are currently two modes “absolute” and “relative”. But even absolute mode is not fully “absolute” - the rotations e.g. lead to axes being redefined which makes it hard to define positions.

_General issues_

**Proprietary format**  
I hate to have a propietary format for this. On the other hand the export shows that the glb files exported are multi-megabyte files. I like the approach of specifiying the URLs files to be loaded better. There are some issues with this approach at this time e.g. CORS limitations and only stl is supported. Given that this is open source i hope for some issues being added to [https://github.com/BITPlan/PI-Q-Robot/issues](https://github.com/BITPlan/PI-Q-Robot/issues) and PRs that might improve the situation.

**Limited editing**  
It would be great to integrate this approach with a proper editor instead of the limited editing functionality provided at this time. There is not even a “save” functionality at this time - the json files need to be manipulated directly.

**Rotation**  
Investigating:

> <https://stackoverflow.com/questions/57311356/rotating-an-object-properly-around-a-pivot-point-given-axis-and-angle/57312831#57312831>

  
lead to many days and lots of hours of frustration. I think it would be great if Three.js would offer a PivotGroup functionality which like in my approach allows to specify a pivot and it’s part at the same time. Then it should be possible to decide how positions and rotations should be specified for the children - world or local coordinates should be useable as specified on every hierarchy level.

**Participation**  
I am looking forward to your feedback, comments and collaboration.

---

<div class="post-metadata">

**Author:** ![seppl2019](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seppl2019/32/6751_2.png) [@seppl2019](https://discourse.threejs.org/u/seppl2019)\
**Post date:** [August 15, 2019, 1:07pm UTC](https://discourse.threejs.org/t/robot-simulation-rotation-issues/9065/2 "2019-08-15T13:07:01Z")

</div>

A save option is now implemented see [https://github.com/BITPlan/PI-Q-Robot/issues/9](https://github.com/BITPlan/PI-Q-Robot/issues/9).  
The recursion in the exports and save is now avoided. See [https://stackoverflow.com/questions/57511751/combining-replacer-and-fields-in-json-stringify](https://stackoverflow.com/questions/57511751/combining-replacer-and-fields-in-json-stringify) for solving the issue of null values that shouldn’t show up in the json export see [https://github.com/BITPlan/PI-Q-Robot/commit/d34f0096f5bb0cdb460aade88af7da07327f4450](https://github.com/BITPlan/PI-Q-Robot/commit/d34f0096f5bb0cdb460aade88af7da07327f4450)

---

<div class="post-metadata">

**Author:** ![hooke](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hooke/32/6790_2.png) [@hooke](https://discourse.threejs.org/u/hooke)\
**Post date:** [September 23, 2019, 7:31am UTC](https://discourse.threejs.org/t/robot-simulation-rotation-issues/9065/3 "2019-09-23T07:31:31Z")

</div>

Do you ever tried CCD IK?