Three.js + Blender Part 2

At this point we should have a JavaScript file that represents our model. Let’s investigate how to get this model into our Three.js scene.

Three.js Basics

In Three.js there are a few basic things you need to setup a 3D scene. You will need a scene (duh!), camera, renderer, and an animation loop.

We will be setting up an init function that will handle most of the setup. First we need to define variables for the main container, camera, scene and renderer. Next we create a new THREE.Camera. The parameters are as follows. (fieldOfView, aspectRatio, near, far, target). Note: The target parameter is optional in our example and near and far are parameters that refer to the clipping plane that should be used when rendering.

After the camera is ready to go we need a Scene to render in. This is as easy as creating a new THREE.Scene. Now since our eyeballs are a different mesh than our base mesh for our bird body we will need a group to put all the 3D objects in. This is so that we can change the group properties and the whole bird object will move within the same coordinate system.

Creating objects

Now that we have the scene and camera setup we can start adding objects to our scene. Since we have exported our main mesh out as an external JSON model we will need a way to import it into our scene. Enter the THREE.JSONLoader function. All we need to do is setup a new THREE.JSONLoader and then call the load function. Once our bird.js file is loaded the callback function will be executed and the loaded geometry will be passed to it. In the callback function we can create a new THREE.Mesh, set the position, rotation, scale, and finally add the newly created mesh to our group using the addChild method.

One thing to note… The scale at which the model is exported seems to be really small. I think this is due to the size of Blender units internally. However I am not sure on this. Anyway, you will need to bump up the scale in order to see your exported model. Here we are setting the scale to 700.

The last thing to note here is that we are setting up a material with a textured image to “map” to the uv coordinates exported from Blender. If you are not familiar with UV coordinate mapping click here. UV Mapping allows for a 2D image to be “wrapped” onto an object in 3D space. This is particularly useful for texturing. Three.js comes with a map object you can then set to your textured image. Every major 3D program should come with UV mapping capabilities.

Rendering / Animation Loop

The last thing we need to do is actually render this out. Since we want to use WebGL for this example we will need to setup a new THREE.WebGLRenderer, set the width/height, and append it to the container DIV element we created above. That’s it for the renderer.

Lastly we need a loop to update and animate the model. As you can see we are once again using our friend requestAnimationFrame to accomplish this. If you need more info on RequestAnimationFrame go here. So we request an animation frame from the browser and then we call the render function passing in our scene and camera. Simple stuff. Before we render we could update properties of our group as seen in our commented line.

Conclusion

So as you can see it’s pretty simple to get complex models up and running with Three.js. I have attached the source if anyone would like to investigate further. Source.

Once again here is the final product. Mr. Bird Preview

19 comments

  • Consider showing the “scene.addObject(group)” call, which you’ll need to get the thing rendering — took me a while to figure out after following your example… had to go line-by-line through the live code to figure out what I was missing.

    Thanks though – good walkthrough.

  • @Cameron thanks for pointing that out! I was trying to strip out the basic relevant parts and missed that line. Should be updated : )

  • Good posts, bra

  • @Aaron thanks man.

  • Hey,

    How do I run the above file on my local machine…
    I tried running index.html directly into my chromium browser, but it didn’t
    Then I tried using chromium-browser –allow-file-access-from-files index.html
    yet it didn’t work… could you please suggest some way out …. ?

  • I checked out the js console when I run index.html,
    it is giving the following warning
    Viewport argument value “device-width;” for key “width” not recognized. Content ignored.

    Is this the reason why I am not getting the output ?
    Please, help me out

  • Hey,
    How do I run the above file on my local machine…
    I tried running index.html directly into my chromium browser, but it didn’t
    Then I tried using chromium-browser –allow-file-access-from-files index.html
    yet it didn’t work… could you please suggest some way out …. ?

    I checked out the js console when I run index.html,
    it is giving the following warning
    Viewport argument value “device-width;” for key “width” not recognized. Content ignored.
    Is this the reason why I am not getting the output ?
    Please, help me out

  • Hey,
    could you tell me please why is there 3 meshes.
    What do we need L_eye, R_eye…. ?

  • @chinmay there are 3 meshes because if you wanted to move the eyes independently of the body you could also do that. By putting the three meshes into a group you could either move the entire group coordiantes or the separate meshes within the group.

  • @chinmay Try running it from localhost. It seems that the THREE.JSONParser needs to run from a webserver with Chrome. I think I remember chrome being stubborn when trying to load JSON files locally even with the -allow-file-access flag on. BTW: The device-width is for the viewport meta tag is aimed at mobile devices. Even though it’s valid chrome still reports it as an error. Here are the docs for more info http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

  • this is great!/makes the process so simple/have you tried this exporter with animated models? and my version of the exporter has various settings to choose re. what to export/ant suggestions? only parts of my animation seem to export, not the full “cycle”…(blender 2.58)…
    thx, G.E.

  • this is really helpful/used some of this code to work with an animated JSON model file–have you tried using animated model files exported from blender? (i mashed up yr example with the three.js animated horse–“webgl_morphtargets_horse.html” and am wondering how to specify ” go to and play” -type commands that use chunks of the animation (ie, frames 10-100,etc) rather than a continuous loop? any ideas? thanks for your posts…

  • Hi, Thanks for the tutorial.
    I’m getting this error:

    Uncaught TypeError: Object # has no method ‘split’
    THREE.Loader.extractUrlBaseThree.js:119
    THREE.JSONLoader.loadThree.js:139
    (anonymous function)

    What could be the problem?

    Thanks for the help

  • Great tutorial!

    But when I tried to put my object (just a simple cube) into your code here, it doesnt work.
    Do you have any simple code for testing JSON files?

    thanks

  • I have installed the plug-in to export from blender as Three.js . Trouble is your index.html file, when modified, does not run the thing. There seems to be an incompatibility between your example and the new json that is exported by the add-0n. The old three.js cannot use it and I do not know how make the new version of three.js make it work _either_.

  • How to display the own texture,please?

  • doesn’t seem to work for anybody 🙁

Leave a Reply

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