News

Build WebGL 3D scenes with three.js

Setting up WebGL scenes by code takes patience, so take a shortcut and position visually with the three.js editor

Build-WebGL-3D-scenes-with-three

Build WebGL 3D scenes with three

DOWNLOAD TUTORIAL FILES

Following on from Apple’s recent World Wide Developer Conference, the big implication for web designers is that Safari on iOS 8 will now at long last support WebGL.

This makes WebGL the largest graphics platform on the planet, with all modern mobile and desktop browsers supporting this. Of course, there will always be older browsers, but we can create fallbacks for these.

In this tutorial we are going to create a scene in 3D for three.js, a popular WebGL library. The difficult part about creating a scene in code is that you have to keep checking the position in a browser and then adjusting your code. The three.js editor (threejs.org/editor) lets us assemble models and lights visually and load them in with one swoop, making less code for your scene. The final project has to be served to the browser via a web server in order to work. Let’s get started.

Get started

Take the Start Folder from the CD and copy this onto your hard drive. Make sure you locate the Assets folder as we will need that. Head over to threejs.org/editor in your browser – Chrome seems to work best with this – and go to Add and choose a Hemisphere Light. Position this a 0, 200, -100.

Set the scene

Just above the light in the Scene panel you will see a little purple square. Click on this and name it ‘World’ in the panel below. Click back on the light in the Scene panel. Click on the blue colour for the light and make this a lighter blue, then click on the orange and make this darker, almost brown.

Adding the world

Now go to Add and choose Object 3D. This is an empty object, a little like a group. Rename this ‘planet’ in the panel on the right. Now go to Add again and choose ‘Sphere’. Rename this ‘ground’ and from the parent drop menu choose ‘planet’.  Click the scale checkbox and scale it up to 3.0 on all axis.

Going green

Scroll down in the panel on the right while still having the ‘ground’ selected. When you get to ‘material’, change the colour to green by clicking on the colour and using the System Colour panel to change. Now we need to import our first model; go to File>Import and choose ‘mountain.dae’ from the Assets folder.

Move any mountain

You won’t see the mountain import because the planet is in the way. Rename it ‘mountain’ and scale up to 0.2, 0.4, 0.2. Make the ‘planet’ its parent. Grab the green handle to drag it up and place it on top of the planet. Now position it back a little and over to the left. Rotate by clicking and dragging anywhere in the grey space.

Import the aeroplane

From the File menu, import the ‘aero.dae’ model and change its name to ‘aero’. Scale this up to 1.6, 1.6, 1.6 and change the middle rotation (Y) to 1.56. Position it at 0, 225, 46. What’s important after positioning this is that your mountain is behind the aeroplane. If it’s not, be sure to adjust it. When you reselect the mountain always select from the Scene panel, not the 3D view.

More mountains

With the mountain selected in the Scene panel, go to the Edit menu and choose Clone. Make this new mountain a child of the planet and move this to a new position and rotation. Do this again so that you have three mountains behind the aeroplane as in the screenshot.

Add a tree

From the file menu, import ‘tree.dae’ and rename it ‘tree’. Make it a child of the planet and scale it to 1.0, 1.0, 1.0. Position it at -30, 195, 113. Just like the mountains, we are going to clone this model and create a small forest in front of the aeroplane. Remember when selecting a model, do so from the Scene panel, not the 3D view.

Forestry commission

Don’t forget when cloning your trees to make each one a child of the ‘planet’ and use the rotation in the right-hand panel. These numbers can be clicked and dragged to move the rotation, without inputting numbers by keyboard. When you are done, you should have a forest similar to the screenshot.

Cabin in the woods

Select the planet in the Scene panel and rotate it 0, 0, 1.56, which is on the z axis. The whole planet will turn 45º. Import ‘cabin.dae’ and rename it ‘cabin’. This should be made a child of the planet. Position this at 210, 32, -27, with a rotation of 0.4, 0.14, -1.56 and scale it to 0.4 on all three sides. Your cabin should be positioned as shown

The woods

In the Scene panel, select one of the trees, go to the Edit menu and choose Clone. Make this new tree a child of planet and position at 221, -42, -39, then place the rotation at 0.3, 0.03 and -1.74. Copy this again twice more, making them children of the planet, and position to the right of this.

Building regulations

Select the planet in the Scene panel and change the rotation to 0, 0, 3.14. Now import the file ‘building.dae’ and rename this ‘building’ when it loads. Set the Parent of this to the ‘planet’ in the panel on the right. Position this at -1, -225, -23 with a scale of 0.3 on all
three axes.

Planning permission

With the building still selected, go to Edit and choose Clone. Make this a child of the planet and position and scale this to one side of the first building. Repeat the process again so there are three buildings. Remember you can click on the grey area in the scene and drag to change your viewpoint – this doesn’t deselect the current object.

Sand dune

Select the planet in the Scene panel and set the rotation to 0, 0, -1.56. Now import the model ‘sand.dae’ and rename this to ‘sand’. Set the ‘planet’ as the parent and set the position to -228, -52, -30. Set the rotation at 0.2, -0.06, 1.8, then the scale to 1, 1.2, 1. It should look like the screenshot above.

More dunes

Use Edit and Clone to copy the sand model and make it a child of the planet. Position to the left of the plane and repeat this twice more, placing the last two dunes in front of the plane. This will take a few minutes to position and rotate just right. Again don’t forget to make the parent of each sand dune the ‘planet’.

Beside the seaside

Go to the Add menu and choose ‘sphere’. Name this ‘sea’ and make its parent the ‘planet’. Position it at -151, 1.6, -14 and set the scale to 1, 1.4 and 1.4. This should be between the dunes now. Scroll down the side panel and change the colour to a light blue and the ambient colour to a slate grey.

Little fluffy clouds

Now import the model ‘cloud.dae’ and rename it ‘cloud’, making the planet its parent. Position at 219, 136, -28 and the rotation set to 0, 0, -1.1. Change the scale to 0.5 on all three axes. In the scene click on ‘Mat’ which is a child of the cloud. Now scroll down to the material and make the colours the same as the screenshot.

Opacity change

Further down in the material, change the opacity to 0.32 as it’s a little too transparent. Clone this three times and, as before, make each a child of the planet. Position them in between each of the main elements on the planet, but floating in
the sky!

Under the spotlight

Your planet should have all the clouds in place now, like in the last screenshot. Select the planet in the Scene panel and change the rotation to 0, 0, 0. Now go to the Add menu and choose a spotlight; rename this ‘spot’. Position this at 138, 387, 80, changing the colour to a light cyan and the angle to 0.75.

Spotlight target

Underneath the spotlight in the Scene panel you will see there is something called a Spotlight Target. Click on this and change the position to 15, 160, 0. Now go to File>Export Scene; a new tab will open in the browser containing a lot of numbers. Select all the code and copy it.

Final step

Go to your code editor, create a new file and paste the code in from the previous step. Save this as ‘scene.js’ in the JS folder from the starting files in Step 1. Now run index.html in a browser using a web server to see your file loaded and your plane flying around the world!

×