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.
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.