WebGL and ThreeJS Using Blender Models

posted in: 3D, WebGL | 13

Have a 3D model you want to include in your WebGL project using ThreeJS? Using Blender (a free and Open Source 3D software application), you can export that model into a WebGL compatible JSON file and load it into your 3D scene using Three.js. Follow the steps below or jump down to the end of the post for the code or download the project. Leave any comments or questions below.

Install the Three.js Blender Exporter

You can follow the instructions at the Three JS Github page to install the exporter for Blender but I found a slightly better way:

  1. Download ThreeJS to get the JavaScript files, exporters and other useful files. I prefer to clone this Git repo and perform a “git pull” to get the latest and greatest code. I recommend you use the Git UI tool SourceTree if you’re not familiar with Git. Or, you can simply download the zip file.
  2. In the ThreeJS folder you just downloaded, open the utils/exporters/blender/addons folder. Create a zip file of the “io_three” folder by right-clicking the folder and compressing the file. This will create a zip file in the same folder.
  3. Open Blender and go to File -> User Preferences. In User Preferences, click on the “Add-ons” tab. Then press the “Install from File…” button and navigate to the zip file you created and select it.blender to threejs addon
  4. Check the box next to “Import-Export: Three.js Format” to activate it.




Prepare your Blender Model

blender file export

The exporter will export one object at a time so by selecting the model you wish to export, it’ll create a JSON (JavaScript Object Notation) file that represents the data to reconstruct your model. Select each object you wish to export and go to File -> Export -> Three.js (.json).

blender file export to json

Ensure that the “Face Materials” check box is enabled under the “Shading” category in the export window. This will export the materials on your model as well.

blender face materials

Load Your WebGL Models in Three.js

<html>
<head>
 <style>
 body { margin: 0; }
 canvas { width: 100%; height: 100% }
 </style>
</head>
<body>
 <script src="js/three.js"></script>

 <script>
 // Setup a new scene
 var scene = new THREE.Scene();


 // Setup the camera
 var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
 camera.position.z = 5;
 camera.position.y = 1;

 // Setup the renderer
 var renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);


 // Add the lights
 var ambientLight = new THREE.AmbientLight(0x111111);
 scene.add(ambientLight);

 var light = new THREE.PointLight( 0xFFFFDD );
 light.position.set( -15, 10, 15 );
 scene.add( light );


 // Models
 var model;
 var sphereModel;
 
 // Load the JSON files and provide callback functions (modelToScene
 var loader = new THREE.JSONLoader();
 loader.load( "models/main_building.json", addModelToScene );
 loader.load( "models/building_right.json", addModelToScene );
 loader.load( "models/building_left.json", addModelToScene );
 loader.load( "models/sphere.json", addSphereToScene );


 // After loading JSON from our file, we add it to the scene
 function addModelToScene( geometry, materials ) {
   var material = new THREE.MeshFaceMaterial(materials);
   model = new THREE.Mesh( geometry, material );
   model.scale.set(0.5,0.5,0.5);
   scene.add( model );
 }

 // Special callback to get a reference to the sphere
 function addSphereToScene( geometry, materials ){
   var material = new THREE.MeshFaceMaterial(materials);
   sphereModel = new THREE.Mesh( geometry, material );
   sphereModel.scale.set(0.5,0.5,0.5);
   sphereModel.position.y += 0.5;
   scene.add( sphereModel );
 }


 // Render loop to rotate our sphere by a little bit each frame
 var render = function () {
   requestAnimationFrame(render);

   if( typeof sphereModel != "undefined" ){
     // Rotate the sphere
     sphereModel.rotation.y += 0.001;
     sphereModel.rotation.x += 0.002;
   }

   renderer.render(scene, camera);
 };

 render();
 </script>
</body>
</html>

 

Example code

Download the Blender file and WebGL example code. If you end up using it for a project, let me know and leave any comments or questions below.

 




13 Responses

    • Mike

      Yes, there is. You’ll have combine all meshes that you want exported as one, into a single mesh before you export. Select all your meshes and hit Ctrl-j in Blender and that’ll combine all the objects into one. Then, when you go to export it, all of them will export into one .json file. When you load in a .json file into Three.js, it treats it as one object with transforms, materials and animations so you won’t be able to control the objects independently with this method.

      Hope that helps. Let me know if you get stuck. Thanks!

      • Sofian Dorin

        Thank you Mike,

        Yes looks like it does what I asked for,

        Indeed it throws out 1 mesh you can’t toy with in the three.js view,
        Might there be some way to select all but have the plugin export all the meshes separately instead of manually going through each one ?

        I think the plugin needs to be adapted to do this or I suppose I’ll have to get in there and script this out.

        Thanks again,

        All the best,
        Dorin

  1. Dan

    I tried activating the exporter and got a “trace back” error that doesn’t allow the box to be checked. Any ideas what’s happening?

  2. murali krishna

    can we export an animation into webgl.. like a walking man animation?

  3. Chris

    For some reason the code that you posted only works with a three.js file included in your example, not with the one I downloaded from official website. Any idea why?

    • Mike

      It might be out of date. I’ll take a look and see if anything needs to be updated. Thanks for letting me know!

  4. Les

    can it load a single model with multiple materials or shader groups? Is it possible to assign materials/textures to select faces of the model or does it have to be a single materila/texture for the entire object using a texture atlas? Very new to webgl and js but a seasoned 3d artist working mostly with maya and python.

    • Mike

      Yes. The constructor for your object can take a list of materials that you want to add. I’m not familiar with how the mixing of those materials work but you can also include vertex groups to define where those materials go. You can use the Object3D.add() method for additional materials, I believe. Hope that helps!

Leave a Reply