Who doesn’t love a good 3D movie? The advancement of the technology since I was a child is nothing short of astounding. From Toy Story to Minions and Futureworld to Trolls, the technology behind 3D animations is always getting better.

The first computer 3D animation actually dates back to the early 1970’s, at the University of Utah. A young computer scientist by the name of Ed Catmull was first developing what is thought to be the first computer 3D animation.

First ever 3d animation!!!

Catmull went on to co-found a little company called Pixar in 1979.

The first feature film to use digital image processing was the 1973 movie Westworld, a science-fiction film written and directed by novelist Michael Crichton, in which humanoid robots live amongst the humans.


The first use of 3D wireframe imagery in mainstream cinema was in the sequel to Westworld, Futureworld (1976), directed by Richard T. Heffron. This featured a computer-generated hand and face created by then University of Utah graduate students Edwin Catmull and Fred Parke which had initially appeared in their 1972 experimental short A Computer Animated Hand. The third movie to use this technology was Star Wars (1977), written and directed by George Lucas, with wireframe imagery in the scenes with the Death Star plans, the targeting computers in the X-wingfighters, and the Millennium Falcon spacecraft.

And the rest as they say is history!

In the 90’s there was Terminator 2 and Toy Story. In the 2000’s there was a breakthrough with something called reflectance over the human face. What followed was the first use of a film made fully with motion capture in Final Fantasy: The Spirits Within(2001). This of course was followed up with Lord of the Rings: The Two Towers, the first to use real-time motion capture which of course gave us Andy Serkis’ portrayal of Gollum.

In preparing for this presentation I did some research and found some great tools to get started with your own 3D animations.

First, https://threejs.org/ is probably the best place to start. So many great examples to see, as well as documentation to help get you started. Let’s look at some syntax to help us out.


The HTML <canvas> element can be used to draw graphics via scripting inJavaScript. For example, it can be used to draw graphs, make photo compositions, create animations, or even do real-time video processing or rendering.

WebGL (Web Graphics Library) - is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins.

Geometry - base class for geometries.
A geometry holds all data necessary to describe a 3D model.

We want to be able to display something to see, so, this is essential for us setting up our scene as a variable.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

What this is doing is setting up the scene, our camera and the renderer. PerspectiveCamera is one of a few types available in three.js and from there we have a few attributes;

i) field of view

ii) aspect ratio- the width of the element divided by the height

iii) near clipping plane

iv) far clipping plane

v) renderer- this is where the magic happens. In other words, how the image is generated.

The camera we used in this example is called PerspectiveCamera, but there are a few others as well;

i) CubeCamera- creates 6 cameras that render to a WebGLRenderTargetCube.

ii)OrthographicCamera- is a means of representing a three-dimensional object in two dimensions.

iii)Camera- base class for cameras.

As well there are some nifty JS libraries that can be paired with three.js to do cool things like this and this.

Now, how about taking a look at my very first 3D animation!!

Here are a list of great resources to get you started!!