Quaintproject

Exporting from Blender to Web GL using Collada and Three.js (part 1)

9 Comments


webgl

Exporting from blender to web.gl using three.js

In this series I’ll show you how we create your own basic webGL viewer. We will use blender for creating the 3d models. The webGL coding itself will be done with three.js. You have no coding experience?- No problem! We try to explain everything as best as we can and three.js makes webGL coding really easy. So there are no reasons for being afraid. To have a good start it’s necessary that you install some software but I’ll come back on that later.

How I came across webGL

I came in contact with webGL some months ago. A good friend of mine who also authors for quaintproject asked me to help him with a piece of software he is secretly working on. (It’s an online creation tool for a raspberry pi accessory but psst…;)) I suggested to create a 3d viewport. As I didn’t wanted to be dependent from plugins my first choice was web GL….To sum this up we basically have created a 3d viewport displaying 3d-models with textures that depend on the user’s input. It might be available on GitHub one day….

Usage

This will come in handy when creating an online viewer for your beautiful 3d models. Your webGL could be part of a bigger online project or be a standalone viewer for your website.

I thought it would be good to compare a selfmade viewer with some ready-made viewers. So here it is:

self-made viewer sketchfab
+ No upload limits + No web-server needed
+No adds + It’s really easy to upload 3d models
+ Private showing possible + your 3d models are presented on a well know website
– web-server needed – upload limit 50 mb per file (free account)
– requires a bit of coding – requires plugin for blender

Further more you might want to check out p3d.in

Final result

webgl

Click here to view the final result.

Press the middle mouse button to dolly in and out. Press the left mouse button to orbit around the object. By pressing the right mouse button you can grab the camera.

Required Software

A proper texteditor

Ubuntu users could use gedit, Sublime Text or bluefish editor.

Windows users might want to work with notepad ++.

For Mac I’d recommend to use sublime text as well or the powerful on-board tools. 🙂

texteditors under ubuntu

A browser that supports Web GL

If you are not sure, whether your browser supports WebGL by default check out this link. By the way I’ am using Firefox 26. (Mozilla for Canonical 1.0)

browser

Xampp

Xampp is a development tool that allows you to test and develop websites and applications on a local machine without the need of uploading your files to a webserver. Xampp is available for Mac, Windows, Linux and even Solaris for free.

xampp under ubuntu

Blender

Blender is a free and open-source 3D computer graphics software product used for creating animated films, visual effects, art, 3D printed models, interactive 3D applications and video games. You can download Blender for Windows, Mac, Linux and Solaris from blender.org

Filezilla

I’ m using filezilla to push my files to the web. By the way Filezilla is a free Open Source FTP program. The program is designed for Windows, Linux and Mac OS X. On April 18, 2011 was FileZilla Client the 7 most popular download from SourceForge.net.

That’s it for the software. Let’s start with setting up XAMPP.

Setting up XAMPP

JavaScript doesn’t allow you to to load files from different web servers, so called same-origin policy. As a consequence you can’t load externally hosted files inside your JavaScript code. Keep that in mind when uploading your final file to a webserver by default. We are using XAMPP to test our application offline. To do so we have to set up XAMPP first. Feel free to check out our previous tutorial on who to install XAMPP under Ubuntu.

Download of the three.js folders

Change to Github and download the .zip folder. Alternatively you could clone the directory. The three.js master folder contains many interesting examples you can learn from. Further more it contains script we  e. g. can use to navigate in the view port.

three.js folder on github

Folders over folders…

Go into your working folder and create two sub folders. Name them js and models. Of course you can give them different names, but keep in mind that you’ll have to adjust the paths for the scripts in the html document. So for beginner’s I’ d recommend to draw on the shown structure. Right click in the main folder and create a new document and call it index.html.

folders three.js ubuntu

The HTML

We will start with the most basic HTML-template you can think of. Just navigate to your main folder and open the index.html file with your text editor and copy the script below. We have provided many comment’s so it should be easy for you to understand what every line of code does.

<!--doctype html>
<html lang="en">
<head>
  <title>test of webGL</title>
  <meta charset="utf-8">
</head>
<body style="margin: 0;">
  http://js/three.min.js
    
  
//paste your code from part 2 here
  
    
</body>
</html>

This line of code is important for the character set. It makes sense to use utf-8 for European and utf-16 for African and Asian languages.  It can slightly influence the memory consumption.

 <meta charset="utf-8">

Copy the three.min.js from the three.js master folder into the newly created js folder. This prompt will include the script to our HTML file.

http://js/three.min.js

That’s it for part one. In part two we’ll go ahead and do the webGL coding itself.

If you have any questions or if you ran into any issues feel free to drop a comment. 🙂

Cheers Markus

Advertisements

9 thoughts on “Exporting from Blender to Web GL using Collada and Three.js (part 1)

  1. Pingback: Exporting from Blender to Web GL using Collada and three.js (part 3) | quaint

  2. Pingback: Exporting from Blender to Web GL using Collada and three.js (part 2) | quaint

  3. Blender artists now have Blend4Web for exporting to WebGL. It supports natively a lot of Blender-specific features – node materials, NLA, particles, physics. And it does not require coding just for loading a model.

    http://www.blend4web.com/

    Like

  4. “?” also, where do we get the orbit controls/js scrpit from?

    Like

  5. Your setting up xxamp section is confusing.

    Like

  6. when im using dae files with tga textures, the textures wont show, and the bigger dae files seem to crash the browser, any way to fix this?:)

    Thanks in advance

    Like

    • Hi Tim, thank you for your comment. Yes it can happen that you expierence a browser crash when loading highpoly models. Though I’ve never experienced this, I only had issues with a blank canvas, caused by the high number of polygons. The problem with Collada plus tga is that it’s really slow. This is the reason why I’ve used jpg textures if I recall this right 😀 Please read this thread: https://github.com/mrdoob/three.js/issues/5743 You might want to change the texture type to .jpg as well and reexport your mesh. Hope this helps. If you have any more questions feel free to post your comment or code. Kind regards Markus

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s