ThreeJS is tricky, but awesome.

Over the past few months I have been using ThreeJS to create a 3D model of the NFC Ring.

ThreeJS from Wikipedia:

Three.js is a lightweight cross-browser JavaScript library/API used to create and display animated 3D computer graphics on a Web browser. Three.js scripts may be used in conjunction with the HTML5 canvas element, SVG or WebGL.

The ThreeJS community is actually really helpful, I’m not saying other communities aren’t helpful or useful I just found that the ThreeJS community did a lot more to help get me started.  There are also quite a few demostration videos online that can be used as reference material.

The real power of ThreeJS comes when you mix it with the power of Blender.

Blender from Wikipedia:

Blender is a professional free and open-source 3D computer graphics software product used for creating animated films, visual effects, art, 3D printed models, interactive 3D applications and video games. Blender’s features include 3D modeling, UV unwrapping, texturing, raster graphics editing, rigging and skinning, fluid and smoke simulation, particle simulation, soft body simulation, sculpting, animating, match moving, camera tracking, rendering, video editing and compositing. Alongside the modeling features it also has an integrated game engine.

At first I was completely stuck, the video tutorials were out of date and the documentation far too fuzzy, finally I met someone on IRC who did the type of task I was trying to to accomplish every day as his day job.  Things fell into place quickly, so quickly I thought it would be worthwhile putting together a video showing how easy the process is to model an object and export it as something that can be used in ThreeJS:

Canvas is pretty much a no-go for the work I’m doing, it’s nice to have the fallback options there but Canvas just doesn’t have the features I need to display a ring in all of it’s glory.  With that in mind if a user wants to see the ring and doesn’t have WebGL supported they are shown a message how best to upgrade their browser.

Finally we should note both three.js and blender are open source projects, completely free and depend on community donation and support. They are both evolving under great leadership and they deserve the credit and respect they get.

This is what I was able to accomplish, I’m pretty proud of it.

You can see the source code and access the assets here

Leave a Reply

Your email address will not be published. Required fields are marked *