Skip to Content

May 2014 - benchung.com

Importing a Model Into Three.js

|Three.js|0 Comments

[iframe class="scene-frame" src="http://benchung.com/wp-content/demos/lesson02/scene.html" width="100%" height="480"] 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, there are countless online tutorials on the web to get you started. The main thing is though to get your model from a 3d modelling program into a format tha…

Creating a Basic Scene in Three.js

|Three.js|0 Comments

[iframe class="scene-frame" src="http://benchung.com/wp-content/demos/lesson01/scene.html" width="100%" height="480"] 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 than a few lines now or in the future. Create an HTML page like so: Next, create a folder called "js" and within it create a file na…

Introduction to Three.js

|Three.js|0 Comments

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 some heavily layered JavaScript. Some of these attempts have worked out reasonably well, but there are a few things that just kept rubbing me the wrong way about them: 1. 2d engines will never be true 3d 2. without leveraging one's graphics card you can only go so far…