Exporting from Blender to Web GL using Collada and three.js (part 3)



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. In the first part we talked about the necessary software and scripts. Part two was all about loading models via Collada loader and setting up the scene. You might want go back if you want to learn something about the Blender export settings as well.

Creating a skydome

Of course you can create a single-coloured background with the following line of code. https://gist.github.com/quaintproject/8636016 If you want to change the colour search for HTML online. Colorizer.org  or Color Hexa will help you with converting colours from rgb to hex colours.  The hex triplet of this colour would be 262626 so make sure that you keep the first two digits.  But a single coloured background is quite boring isn’t it? That’s why I decided to have a a gradient for creating a gradient under three.js we need a fragment shader and a vertex shader and a view more lines of code. Please note that most of the code used for the gradient was taken from three.js examples.  So please visit threejs.org if you want more information about it.

Let’s start with the vertex shader….

https://gist.github.com/quaintproject/8635901 Place this script right after importing the OrbitControls script and the ColladaLoader script and before the other code for webGL that we’ve created previously.

let’s continue with the fragment shader…

Place the code of the fragment shader right after the vertex shader. https://gist.github.com/quaintproject/8635932 The sky dome we create should be excluded from all shader calculations except those concerning location (vertex shader) and simple colour (fragment shader) without light sources and other features. That’s why we have to separate the code above from the rest of the code.

Creating the skydome itself…

Add the following piece of code right after the event listener and before the lights, that we’ ve created earlier. https://gist.github.com/quaintproject/8635871 A nice black-greyish gradient should appear now. If you want to change the colours, choose a different colour for topColor and bottomColor. You might want to tweak the offset and the exponent as well.

Full script

Here’s the full script, just in case you got stuck. https://gist.github.com/quaintproject/8635824

Limiting zoom

By default we get infinite zooooooooooooom. The problem is that if you dolly out you’ll reach a certain point at which you’ll pass through the newly created sky dome instead of a beautiful black-greyish gradient you’ll only see a black sphere on  white ground. To tackle this issue we have to go into the OrbitControls.js script and search for the following prompt. The developers of three.js offer us a well documented script, so it should be quite easy for you to change the needed values. You can change zoom, pan and rotate. In my case it’s enough to change the this.minDistance and this.maxDistance. It’s a bit of trial and error to get the right results…. https://gist.github.com/quaintproject/8635988 I came up with something like this… https://gist.github.com/quaintproject/8635998

Uploading files to a webserver

So that’s basically it for the offline development. The next step would be uploading your files to a web server. I’ m using filezilla to publish my files. Netcup (labs) is a German company that offers you free web hosting. They offer you up to ten GB web space for free. From time to time they also offer free v-servers so it’s definitely worth to check out their website (German language only).  netcup is really reliable and most of our projects that are not hosted on wordpress.com are hosted there. 🙂 International users might want to try out  bytehost. They offer you one GB of web space without any adds and tech support. Sound’s great why don’t you go ahead and check out their website.? Of course there are many other zero hosters out there…. filezilla for webGL development You can upload files by opening filezilla and connecting to your web server. All you need is your host, your username your password and the port. You’ll get all the necessary information from your web hoster. I’ am sorry I can’t help you with that. I created a sub folder called webGL. I copied the content of my development folder including the models and the js folder and pasted that into my webGL folder. If everything worked fine you should be able to view your 3d models in real-time. Et voilà! Click here to view the final result. Please leave a comment and tell us what you use three.js for! 🙂 Cheers Markus


3 thoughts on “Exporting from Blender to Web GL using Collada and three.js (part 3)

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

  2. Hi

    I’d like to wrap object using a string text is it possible using three.js?
    How to?
    Thank You


    • Hi Nicolo, I am not sure wheter I understood your question correctly. You want to have text e.g. html text floating around your object. By default the canvas, in which your object is placed is a rectangle. You could then let the text float around this canvas. But this obviously not what you wanted to do. An alternative would be writing the text directly in the canvas. Here’s an example: http://codepen.io/nireno/pen/klpys. Unfortunatelly I haven’t tried doing similar things myself, so I can’t provide you with scripts instantly. I can recommend this webpage to you as well: https://stemkoski.github.io/Three.js/ But maybe tell me if I missed the mark. 😀 Cheers Markus


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