Posted by & filed under Games, Motion Graphic, Web Design.


This tutorial for Web Designer Magazine shows how to create a scene visually rather than just using code. The advantages are that objects can be placed visually and the scene built up and tweaked without constant fiddling with code. The scene is built in the ThreeJS editor using models brought in from Cinema4D but other 3D applications will also work with this.

Finally the exported scene is dropped into a bare bones ThreeJS html file. Here we grab the lighting and add shadows to the scene and a little post processing for a depth of field effect.

This kind of project can easily be made fully interactive to work with a HTML UI or the models themselves could be interactive. As iOS is the last major platform to support WebGL starting with iOS8, this is next generation web graphics supported by all modern browsers.

Oh I almost forgot, the aeroplane is animated with a sine wave!

Check out the project!

View Project →

Leave a Reply