Category: Three.js

Debugging Three.js

Debugging Three.js

If you’re in the stages of creating a webGL game or app using three.js you may find it useful to visualize what your code is doing. That’s where the need for a debugger/inspector comes into play. Here are a few ways to do it. Using a Custom UI to Debug Three.js You can use JQuery to a certain extent alongside… Read more →

Unity 3d vs. Three.js

Unity3D vs. Three.js

Why is this important knowledge? You may be looking into both options as whether you’re planning to build online games, a plugin for your website, etc. Unity3D and three.js are certainly both great options that can accomplish similar things but definitely very different. I’ve fortunately been able to dip into both a bit. Hopefully you’ll find this useful… Unity3D Unity… Read more →

smooth rotation, pan and zoom in three.js

Trackball Controls in three.js

This tutorial explains how to rotate the camera with the mouse in three.js. This can be accomplished using the built-in TrackballControls.js. Test it out on the below. Rotating the object around by holding down the left mouse button and dragging. Zoom with the middle and pan from side to side with the right mouse button. Download the source code for… Read more →

GLSL Displacement Shader in Threejs

Basic GLSL Displacement Shader in Three.js

This tutorial introduces construction a basic GLSL Displacement Shader in Three.js. It can really apply to any GLSL program, but we’ll take advantage of the three.js ability of using custom shaders. If you’re very new to Three.js, please see Creating a Basic Scene in Three.js If you’re confident with the basics you can download the full example files for this… Read more →

Using the Three.js Editor

Using the Three.js Editor

Here are some basics about using the the three.js editor. If you haven’t seen it in action, you can do so here. I couldn’t find any real documentation online about it so figured I’d post about I’ve found from it… The editor comes packaged along with the three.js source code. Let’s download that and open index.html (in the “editor” folder).… Read more →

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: http://threejs.org/examples/#misc_controls_orbit 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 →