Learning Three.js

or WebGL for Dummies

Classical Suzanne Monkey From Blender to Get Your Game Started With threex.suzanne

This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk about threex.suzanne. Suzanne is a classic. She is the blender famous model familiar to all blender users. It is also a three.js games extension extension which provides you with a monkey model. Blender wanted to create a less common test model, so Suzanne was born. She is more precisely a 3D model of a chimpanzee head. It is pretty basic but you can easily add it as a funky animal character and install it in your platform games!

To see the other posts about one threex a day and forget our moto! “A THREEx extension a day, gets your game on its way!”

Show Don’t Tell

How To Install It

You can install it via script tag

1
<script src='threex.suzanne.js'></script>

Or you can install with bower, as you wish.

1
bower install threex.suzanne

How To Use It

How to load the geometry ?

1
2
3
4
5
new THREEx.Suzanne.GeometryLoader(function onLoad(geometry){
    // this function is notified when the geometry is actually loaded

    // geometry is a THREE.Geometry of suzanne model
})

How to create a mesh with it ?

1
2
3
4
5
6
7
new THREEx.Suzanne.GeometryLoader(function onLoad(geometry){
    // create a mesh with the geometry
    var material    = new THREE.MeshNormalMaterial()
    var mesh    = new THREE.Mesh( geometry, material )
    // attach mesh to the scene
    scene.add(mesh)
})

Sometime it is not desirable to wait for the loading to complete before adding the object to the scene. To avoid this, we create a container which will contains the model once loading is completed. Thanks to the scene graph inheritance, any position/quaternion/scale changes made on container, will be reported to the children meshes.

1
2
3
4
5
6
7
8
9
10
11
12
// create the container
var container   = new THREE.Object3D();
// add the container to the scene without waiting the end of loading
scene.add(container)
// start to load the geometry
new THREEx.Suzanne.GeometryLoader(function onLoad(geometry){
    // create a mesh with it
    var material    = new THREE.MeshNormalMaterial()
    var mesh    = new THREE.Mesh( geometry, material )
    // attach mesh to the container
    container.add(mesh)
})

Comments