Configurando blender

Para este tutorial vamos acrear una sencilla geometria en usando el programa libre Blender (click aquí para descargarlo) A este programa le tenemos que instalar un add-on para exportar al formato JSON que threejs entiende. Par ello descargamos el siguiente add-on de github debemos descargar la carpeta addons/io_three e instalarla en la carpeta de add-ons

En mi caso estoy usando Blender 2.78 en Linux, en el suyo configure la dirección de su archivo según su caso.


cd .config/blender/2.78/scripts/addons/

svn export https://github.com/mrdoob/three.js/trunk/utils/exporters/blender/addons/io_three

Una vez instalado tiene que habilitarlo en blender buscando el add-on como three.js

Una vez exportado, tendremos una estructura de datos json que representa el objeto en 3D.

Importando Mesh y material

Geometry

Ahora que hemos creado una mesh que three puede entender vamos a usar una función especial de three que nos permite cargar archivos json listos para ser utilizados.

var mesh = null;
var loader = new THREE.JSONLoader();
loader.load(
    // URL al recurso
    'suzanne-monkey.json', 
    //Funcion llamada cuando el recurso esta cargado
    function(geometry, materials) {
        var material = materials[ 0 ];
        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
        mesh.scale.x = mesh.scale.y = mesh.scale.z = 11;
    },
    // Funcion llamada mientras se carga el objeto
    function(xhr){
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    // Funcion llamada al fallar la carga de un objeto
    function (xhr) {
        console.log( 'un error a sucedido');
    }
);

Con ello lya deberiamos tener nuestra mesh cargada dentro de la escena, si necesitamos cambiar el tamaño (en mi caso estaba muy pequeña) utilizamos el siguiente comando:

mesh.scale.x = mesh.scale.y = mesh.scale.z = 11;

Buffer Geometry

Cuando exportamos un archivo como buffer geometry, ntenemos algunas ventajas y otras desventajas, un archivo buffer geometry esta pensado para elementos estaticos, lo cual mejora el rendimiento del renderizado. Es por ello que tambien son archivos json más grandes.

Para cargar elementos buffer geometry, haremos uso de la siguiente codigo.

var loader = new THREE.BufferGeometryLoader();

// Cargamos un recurso
loader.load(
    // URL del recurso
    'suzanne-monkey-buffer.json',
    // Función llamada cuando el recurso esta cargado
    function ( geometry ) {
        var material = new THREE.MeshLambertMaterial( { color: 0xF5F5F5 } );
        var object = new THREE.Mesh( geometry, material );
        scene.add( object );
    },
    // Funcion llamada cuando el recurso se esta cargando
    function ( xhr ) {
        console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
    },
    // Función llamada cuando falla la carga.
    function ( xhr ) {
        console.log( 'An error happened' );
    }
);

Conclusión

Una vez terminado de cargar el mono nuestro archivo debería haber quedado así..

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(
  75, 
  window.innerWidth/window.innerHeight, 
  0.1, 
  1000
);

camera.position.z = 100;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
window.addEventListener( 'resize', function () {
                    renderer.setSize( window.innerWidth, window.innerHeight );
} );
document.body.appendChild( renderer.domElement );

/*
 * Agregamos la mesh de suzanne
 */
var mesh = null;
var loader = new THREE.JSONLoader();
loader.load(
    // URL al recurso
    'suzanne-monkey.json', 
    //Funcion llamada cuando el recurso esta cargado
    function(geometry, materials) {
        var material = materials[ 0 ];
        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);
        mesh.scale.x = mesh.scale.y = mesh.scale.z = 11;
        console.log('Mono cargado correctamente');
    },
    // Funcion llamada mientras se carga el objeto
    function(xhr){
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    // Funcion llamada al fallar la carga de un objeto
    function (xhr) {
        console.log( 'un error a sucedido');
    }
);

/*
 * Añadimos una luz así podemos ver mono
 */
var light = new THREE.PointLight(0xFFFF00);
light.position.set(10, 0, 25);
scene.add(light);

/*
 * Proceso de renderizado activado
 */

var render = function(){
    requestAnimationFrame(render);
    renderer.render(scene, camera);
};
render();