WebGL: d12

A dice model created in Blender and exported as a Collada model, imported in to THREE.js.

Creating a model in Blender is relatively straightforward, but exporting it in a model format that THREE.js can use is less so. While there is an ‘official’ THREE.js JSON format it seems to be broken in the Blender export plugin. Consequently it’s easier to use the WaveFront Collada format. What settings you should use is a matter of experimentation as the different features of a model seem to greatly affect how well it loads in THREE.js.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

var dice;
var el = document.getElementById('webglCanvas');
var renderer = new THREE.WebGLRenderer({antialias:true});

renderer.shadowMapEnabled = true;
renderer.setSize( el.offsetWidth, el.offsetHeight );
el.appendChild( renderer.domElement );

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, el.offsetWidth / el.offsetHeight, 0.1, 1000 );
camera.position.z = 1;
camera.position.y = 2;
camera.lookAt(new THREE.Vector3(0,0,0))

// create the ground plane
var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
var planeMaterial = new THREE.MeshPhongMaterial({color: 0xffffff});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
// rotate and position the plane
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = -4;
plane.position.z = 0;
// add the plane to the scene
scene.add(plane);

var light = new THREE.SpotLight( 0xffffff );
light.position.set( 3, 5, 5 );
scene.add( light );

var light2 = new THREE.PointLight( 0xffffff, 1, 5 );
light2.position.set( -2, 3, 2 );
scene.add( light2 );

var loader = new THREE.ColladaLoader();
    loader.options.convertUpAxis = true;
    loader.load( '/code/d12/d12.dae', function ( collada ) {

        dice = collada.scene;
        dice.updateMatrix();
        scene.add(dice);

        render();

    } );

render = function() {

    dice.rotation.z -= 0.01;
    dice.rotation.x += 0.01;

    requestAnimationFrame( render );
    renderer.render( scene, camera );
}