Exporting Blender Models To ThreeJS and WebGL

7/9/2017 Exporting Blender Models to ThreeJS and WebGL
Your Cart - $0.00 Search
About the Electronic Armory Courses Running a Company Electrical Engineering
Engineering Skills for Everyone
WebGL and ThreeJS Using Blender Models 28

OCT 2015

by Mike | posted in: 3D, WebGL | 4
Have a 3D model you want to include in your WebGL project using ThreeJS? Using Blender (a free and Open Source Electronic Armory
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. Announcements
Leave any comments or questions below.
Email Address
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: Submit
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 youre
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.
4. Check the box next to Import-Export: Three.js Format to activate it.
Prepareyour Blender Model
The exporter will export one object at a time so by selecting the model you wish to export, itll 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).
http://www.electronicarmory.com/articles/exporting-blender-models-to-threejs-webgl/ 1/5
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.
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.
Share this:
17
Related
Blender Beginner Tutorial - Part 1 - Blender Beginners Tutorial - Part 2 Blender Beginners Tutorial - Part 3
Begin Your Modeling Adventure - More tools and techniques - Your First Model
July 25, 2016 July 27, 2016 August 31, 2016
In "3D" In "3D" In "Blender"
3d, blender, code, export, JavaScript, json, programming, threejs, web, webgl
4 Responses
Dorin So an September 13, 2016 | Reply
Is there a way you can export all the Objects at one and not go through each individual one ?
Mike September 14, 2016 | Reply
Yes, there is. Youll 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 thatll 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 wont be able to
control the objects independently with this method.
Hope that helps. Let me know if you get stuck. Thanks!
So an Dorin September 14, 2016 | Reply
Thank you Mike,
Yes looks like it does what I asked for,
Indeed it throws out 1 mesh you cant 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 Ill have to get in there
and script this out.
Thanks again,
All the best,

Dorin
Dan December 15, 2016 | Reply
I tried activating the exporter and got a trace back error that doesnt allow the box to be checked. Any ideas whats
happening?
Leave a Reply
Comment
Name * Email (will not be published) * Website
Submit Comment
Notify me of follow-up comments by email.
Notify me of new posts by email.
About the Electronic Armory Courses Running a Company Electrical Engineering
2017 Electronic Armory - WordPress Theme by Kadence Themes

Exporting Blender Models To ThreeJS and WebGL

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Exporting Blender Models To ThreeJS and WebGL

Uploaded by

Copyright:

Available Formats

7/9/2017 Exporting Blender Models to ThreeJS and WebGL

Your Cart - $0.00 Search

About the Electronic Armory Courses Running a Company Electrical Engineering

Engineering Skills for Everyone

WebGL and ThreeJS Using Blender Models 28

by Mike | posted in: 3D, WebGL | 4

Install the Three.js Blender Exporter

4. Check the box next to Import-Export: Three.js Format to activate it.

Prepareyour Blender Model

Load Your WebGL Models in Three.js

// Setup the camera

// Setup the renderer

// Add the lights

var light = new THREE.PointLight( 0xFFFFDD );

// Load the JSON files and provide callback functions (modelToScene

// After loading JSON from our file, we add it to the scene

// Special callback to get a reference to the sphere

// Render loop to rotate our sphere by a little bit each frame

if( typeof sphereModel != "undefined" ){

Dorin So an September 13, 2016 | Reply

Mike September 14, 2016 | Reply

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

So an Dorin September 14, 2016 | Reply

Thank you Mike,

Yes looks like it does what I asked for,

All the best,

Dan December 15, 2016 | Reply

Name * Email (will not be published) * Website

Notify me of follow-up comments by email.

Notify me of new posts by email.

About the Electronic Armory Courses Running a Company Electrical Engineering

2017 Electronic Armory - WordPress Theme by Kadence Themes

You might also like