ThreeJS Demos

ThreeJS is an amazing 2D/3D library. What makes it so special is that it uses WebGL so that the video card is used to process the graphics instead of the CPU allowing for more powerful scripts to be written and for them to be executed faster.  Below you will find some examples on how to make things in ThreeJS.

basic scene

Basic Scene

A basic scene with some lighting, a wire-frame cube, a sphere with a mesh-lambert material to make it reflective, an axis heplper, a skybox, and a textured ground. Oh yeah, and a 2D shape! Proably not the most basic scene in all reality, but it is definitely a decent showcase of what Three JS can do.

wireframe and textures

Textures + Wireframe

In this scene you can see various textures starting with a wireframe, then a meshBasic which is flat and doesn't absorb light, followed by a meshLambert which does absorb light but doesn't reflect it. After that there is a meshPhong which is essentially a reflective lambert texture. Last but definitely the coolest, there is a cube that is rotating that has multiple shaders applied to it. Shaders are built using GLSL (OpenGL shader language). It is based off of the C programming language and it looks amazing!

lines

Lines

Sometimes the most important things in a 3D scene aren't the most complex. Lines are very important to all sorts of scenes and they can also produce some cool effects if you put them inside of a loop! Here I have a few styles of line as well as some trippy pattern that I created on accident using a loop.

3D Text

3D Text

No example list would be complete without some 3D text. You can really do some awesome things in THREEJS with text.

Sprites

Sprites

Nope, not the drink, sprites are really fun to mess around with. They are orthogonal to the camera, meaning they are always facing it, and at the same scale. Remember the days of Duke Nukem and Doom when the dead monsters always seemed to be facing the same direction (always looking at you)? Well those were done with sprites. In fact two of the sprites I used are from doom, the others are from open source resources for sprites!

Helpers

Helpers

Everybody needs help occasionally and ThreeJS developing is no exception. Here I demonstrate some of the helpers that the library offers. The axes helper is great to find out which direction is which, while the grid-helper allows you to scale and position things appropriately.

Extrude SVG

Extrude

One of my favorite things that you can do with ThreeJS is taking an SVG path and extruding it to make a 3D shape. In this example I take the outline of the Git Cat and make it a 3D shape. I'm still currently working on figuring out how to make the face get pushed out as a hole (not working for some reason), and then making the eyes and mouth appear.

One Response to “ThreeJS Demos”