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.