# Implementing yaw, pitch, and roll for a mesh

I am trying to build a JavaScript version of NetLogo 3D via Three.js. You can see a 2D/2.5D version here on the AgentScript home page: https://agentscript.org/ Here are the Three.js views: https://agentscript.org/views3/ … this is the most “3D-ish” of them: https://agentscript.org/views3/hello3.html

Note AgentScript has a M/V split so there are several way to view the models: 2D Canvas, Three.js, Mapbox maps and so on.

I am trying to convert to true 3D … the current models have x,y,z and theta, the angle to the x axis (or equivalently the z rotation).

I’m having difficulty implementing the NetLogo semantics with Three.js meshes. I believe their world is yaw, pitch, roll … here is their description:

A turtle’s orientation is defined by three turtle variables, heading, pitch and roll. You can imagine the turtle as having two vectors to define its orientation in 3D space. One vector comes straight out of the nose of the turtle, this is the direction the turtle will travel when it moves forward. The second vector is perpendicular to the forward vector and comes out of the right side of the turtle (as if the turtle were to stick its right arm straight out from its body). Heading is the angle between the forward vector of the turtle projected onto the xy-plane and the vector [0 1 0]. Pitch is the angle between the forward vector of the turtle and the xy-plane and finally roll is the angle between the right vector of the turtle and the xy-plane. When turtle turns right or left in 3D space it rotates around the down vector, that is the vector that is perpendicular to both the forward and right vectors.

I don’t know how to translate this into Object3D’s properties and methods. I’ve tried a few times but I don’t seem to “get” the way the various transforms work. Here’s a start tho: https://agentscript.org/tests/threeMotion.html
It has a single turtle circling in the zx plane. I haven’t been able to get further, alas.

I solved all the problems I had.

• I found out that mesh.rotation using “ZYX” gives, apparently, Yaw Pitch Roll.
• The basic rotateX/Y/Z work fine
• lookAt fails, it points the mesh z axis at the lookAt object. I need to point the x axis. I just wrote my own trig fcns for that. Maybe there’s a solution? A stackoverflow mentioned this is a problem
• I used Rollup to get just the Object3D.js and dependencies in a file. 40K minified. Kinda useful
• This shows the orientation work: http://localhost/src/agentscript/tests/threeYPR.html

Oops, not a stackoverflow but an issue in github:

lookAt() orients the object so its local, positive z-axis points in the direction of the target, and its local x-axis is orthogonal to the world-space up direction. (For example, if the object were an airplane, its wings would remain level.)

I don’t know if it is fixed. It would be nice tho.

1 Like