ThreeJS Experiments

Lately, I have been on a mission to acquire deeper knowledge of ThreeJS.  Unfortunately, the documentation is a bit scarce.  Fortunately, there are many examples to dissect.  In this post I’ll cover a few that I’ve been messing around with.

Ultimately, these “experiments” may find their way into Dex.  However, for now, they remain that; visual experiments.

Concentric Circles

In this visual, I imagine a dataset such as:

X, Y, F1z(X,Y), F1mag, F2z(X, Y), F2mag(X,Y) …

X and Y pair would be mapped to F1, F2, … Fn where F1z(X,Y) would represent the z coordinate in three-d space.  F1mag(X, Y) would represent the magnitude, or length of the line segment protruding orthogonally from a spherical surface onto which the line segment is mapped onto.

F1 would map to the innermost sphere, F2 onto the next spherical surface, and so forth.

Working with a base demo found in mrdoob’s repository:

This version has only minor modifications to the base example.  Mainly color changes.


Next, I took out the rotational stuff, it was making me motion sick.  Instead rotation is a function of mouse location.  I also mapped the shells going from innermost to outermost to: red, white, blue, green, yellow.


In the third example, I changed the auto-rotate to engage only when the left mouse is pressed down toward the edge of the screen.


And lastly, for this group of visualizations, I changed the auto-rotate factor to rotate faster when closer to the edge of the screen, and slower when in the middle.  Again, the left mouse button must be pressed when rotating.


Glowing Sprites, Tweening and Spherical Coordinates

One thing is certain, visualizations can really pop out in WebGL.  ThreeJS makes is pretty attainable.

In the first demo, particles cluster towards the center in a cube, then fall apart and tween off the screen.


Next, a random stream of particles will be generated, then particle generation will follow the mouse.


Last, but not least, we map the particles to a spherical coordinate system where:

x = r * sin(theta) * cos(phi)

y = r * sin(theta) * sin(phi)

z = r * cos(theta)

This visual is similar to the first group of visualizations.  It will create three energy shells and map the values to the shell in which it belongs.  It’s pretty and kind of fun to play with.


Hope you enjoyed, this.

– Pat


About patmartin

I am a coder and Data Visualization/Machine Learning enthusiast.
This entry was posted in General. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s