Smooth Mouse Rotation in Three.js

Smooth Mouse Rotation in Three.js

This example demonstrates Smooth axis rotation via mouse in three.js. Click and drag around in the above. It is based off of this post and this example on the three.js website. Achieving a momentum effect during mouse drag has always been a nice feature that I’ve see many times in different examples of 3D for the web. After experimenting with… Read more →

Orbit Controls in Three.js

Rotate View With the Mouse in Three.js

This example uses “OrbitControls” in three.js to rotate the camera around an object. It’s based off of the example: on the three.js website. We’ve just added a textured cube that’s been imported from Blender. You can take a look at importing a model from Blender then adding a texture here. Note that adding this ability is quite simple because… Read more →

Basic 3d Scene in Three.js

Creating a Basic Scene in Three.js

Here we will create a basic scene complete with an animated transparent cube in three.js. Though most beginner examples on the net show scenes loaded right from an HTML page, we’ll set it up using an external file as it’s generally good practice to keep your .js files separate when dealing with any kind of code that may become more… Read more →

Importing a Model Into Three.js

Importing a Model Into Three.js

For this lesson we’ll be exporting the default blender cube into a three.js scene. Nothing fancy, but enought for you to get the idea. We’ll be using Blender (currently version 2.70 at the time of this writing) as our go-to 3d program for our lessons. The best part about it is that it’s free. If you haven’t used it before,… Read more →

introduction to three.js

Introduction to Three.js

Common problems with 3d for the web I’ve always been interested in bringing 3d to the web which has been available in various ways, but there’s never really been any standard as to how it would be accomplished. I’ve found the result has been a mix of third party plugins, Java, WEB3D, VRML, faking 3d through a 2d engine or… Read more →