3D Applications with HTML5 and WebGL


Antialiasing avoids nasty artifacts that would make some drawn edges look jagged. To use it:

renderer = new THREE.WebGLRenderer({ antialias: true });


If we want to load scenes that contain multiple objects, and preserve the transform hierarchy and other goodies such as cameras, lights, and animations, then we need to move to a format that supports those features. Otherwise, we will be forced to import models one by one and arrange, light, and animate our scenes by hand.

COLLADA is a great format for representing full-scene data. It supports the features we need, and several 3D packages already export it. With COLLADA, it is possible to have an artist model, texture, light, and animate a complex scene, and then export it for use with WebGL—without needing a programmer to hand-crank values. And that is a major goal: leave art creation to the artists. Granted, COLLADA does have the big shortcoming of a slow, bulky XML representation.

As is the case with many of the file format loaders that come with Three.js, the COLLADA loader is not part of the core package but rather included with the samples. The source code for the Three.js COLLADA loader can be found in examples/js/loaders/ColladaLoader.js.

Learning Resources