how do we create turtle geometry in three.js?

Question

We are trying to create a simple programming environment that lets people generate 3D forms (it's inspired by the Scratch project). We'd like it to work in a "turtle geometry" fashion, where a creature (we call it the beetle, by analogy to the logo turtle) moves around the 3D space, and can leave objects along the way that take on its position and orientation.

We are currently using Three.js. While you can move and rotate objects, it's not clear how to create the effect we want, where translations and rotations "accumulate" and can be applied to new objects. We'd also like to store a stack of these matrices to push and pop.

Here's a specific example. The user of our system would create a program like this (this is pseudocode):

repeat 36 [
  move 10
  rotate 10
  draw cube
]

The idea is that the beetle would move around a circle as it executes this program, leaving a cube at each position.

Is this possible using Three.js? Do we need to switch to pure WebGL?

Obligatory link: http://stackoverflow.com/questions/1003841/how-do-i-move-the-turtle-in-logo — BoltClock, Apr 20 '11 at 17:51
What would `rotate 10` mean in a 3D context? About which axis and point? Nice project though. — Orbling, May 30 '11 at 13:29

score 1 · Answer 1 · answered Jun 24 '11 at 10:05

1

You might have a look at http://u2d.com/turtle_js/index.html

It uses JavaScript systax though.

And it does not have a feedback in case of errors. The turtle just does nothing.

answered Jun 24 '11 at 10:05

Hannes

11
1

score 0 · Answer 2 · answered Nov 09 '11 at 17:49

The requirements sound fairly high-level. There is no reason you would need the low-level access of raw webgl. A higher-level library like three.js, or another, would do just fine.

As @Orbling pointed out, you'd need to figure out rotation for 3D; e.g.

rotateX 10

(rotate 10 degrees counterclockwise around x axis), or

turnLeft 10

(rotate 10 degrees counterclockwise around current up vector).

how do we create turtle geometry in three.js?

2 Answers2