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.
Here’s the full script, just in case you got stuck. https://gist.github.com/quaintproject/8635824
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…. 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