Scribd
Upload
397 views

Exporting Blender Models To ThreeJS and WebGL

The document describes how to export 3D models created in Blender to JSON files that can be loaded and rendered in Three.js and WebGL. It provides steps to install the Three.js exporter plugin in Blender, prepare models for export, and load and render the exported models in Three.js.

Uploaded by

German Bautista
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
397 views

Exporting Blender Models To ThreeJS and WebGL

The document describes how to export 3D models created in Blender to JSON files that can be loaded and rendered in Three.js and WebGL. It provides steps to install the Three.js exporter plugin in Blender, prepare models for export, and load and render the exported models in Three.js.

Uploaded by

German Bautista
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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
7/9/2017 Exporting Blender Models to ThreeJS and WebGL

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

http://www.electronicarmory.com/articles/exporting-blender-models-to-threejs-webgl/ 2/5
7/9/2017 Exporting Blender Models to ThreeJS and WebGL

<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;
}

http://www.electronicarmory.com/articles/exporting-blender-models-to-threejs-webgl/ 3/5
7/9/2017 Exporting Blender Models to ThreeJS and WebGL

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 ?

http://www.electronicarmory.com/articles/exporting-blender-models-to-threejs-webgl/ 4/5
7/9/2017 Exporting Blender Models to ThreeJS and WebGL

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

http://www.electronicarmory.com/articles/exporting-blender-models-to-threejs-webgl/ 5/5

You might also like