Creative Month Challenge

CMC #4 – Loading Blender models using Three.js

This time I’ll do a little coding in JavaScript. As I mentioned in the previous post I needed a simple online preview of my 3D works created during the Creative Month Challenge.

I decided to use Three.js for this purpose. First, because I had a limited amount of time and I’m already familiar with it, and second, because it has a nice export plugin for Blender, which produces well formatted JSON file out of the 3D model.

I’ll add the Export Plugin installation and usage guide in the separate post. In this post, we’ll focus on the preview script.

You can check the final script running here – 3D Fantasy Preview.

HTML

 Let’s start with pretty basic HTML5 file:

I added some inline styles here – there’s no point making another request for these few lines. We want to have the error message nicely centered both horizontally and vertically – hence the fancy <span>  positioning.

Next, we’re gonna need a build of Three.js library – you can get it from the Github repository. But there’s also an unofficial Three.js Builder available that could reduce the size of library build a bit.

JavaScript

Now, let’s move to the main script.

Setup

We’ll start with the setup function.

This function will create and configure multiple objects needed to render a scene:

  • Renderer – renders the scene with defined camera using WebGL if available
  • Scene – contains all the objects like Lights and Meshes
  • Camera – could be with perspective or orthographic projection
  • Lights – one SpotLight to add some highlights and one AmbientLight to lighten the shadows
  • Mesh – a mesh created from the geometry stored in JSON file

After successfully loading the model, we add it to the scene, point the camera and spot light on the created mesh and start rendering loop.

Rendering

Next is render function:

It uses requestAnimationFrame  for the render loop and rotates the mesh a bit every cycle (rotation angle is expressed in radians).

Handling URL parameters

Finally, the init function that retrieves model and texture path from the search query:

We attach this function to the window’s load event just to make sure all the stuff is loaded before it’s executed.

Handling window size changes

The above code could be good enough, however it does not cover window resizing – when the window size changes, canvas size remains as it was initialized causing some parts of it to be hidden.

To handle that, we’ll add this piece of code at the end of the setup function:

Please note that calling camera.updateProjectionMatrix(); is crucial, otherwise the camera won’t recognize the change of the camera.aspect  property.

Complete script

Below is the final script. I added requestAnimationFrame  polyfill at the end to support some older browsers.

And that’s basically it! Go check working example if you haven’t done it yet.

Summary

As you can see, loading and displaying a 3D model using Three.js is pretty straightforward. The core part would take less than 50 lines of code!

Hope you enjoyed it!

by Greg

6 Comments »

6 thoughts on “CMC #4 – Loading Blender models using Three.js”

Leave a Reply

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