En un artículo anterior hice una breve introducción de Three.js, la librería de Javascript creada por MrDoob que facilita el trabajo con WebGL. Vimos cómo poner a punto nuestro escenario, cámaras, luces e incluso añadimos algunos elementos básicos como cubos o esferas. En esta ocasión comparto con vosotros la forma de importar modelos 3D a nuestro escenario.
Importar modelos 3D
Dentro de los archivos que podemos descargar de Three.js en github encontraremos una serie de loaders (“cargadores”) , que nos permiten importar a nuestra escena diferentes formatos de modelos tridimensionales.
Tal vez por una costumbre heredada de mi época con Away3D, he elegido para este ejemplo el importador de modelos Collada. Collada es un formato, similar a XML al que se pueden exportar modelos creados con Sketchup, Maya o 3DStudio. Para este caso he usado un modelo de la galería 3D de Google.
La explicación de la carga del modelo está incluida en los comentarios del código:
<script type="text/javascript" src='js/jquery-1.8.2.min.js'></script> <script type="text/javascript" src='js/threelast.js'></script> <!--Cargamos el Loader de Collada --> <script type="text/javascript" src='js/ColladaLoader.js'></script> <script type="text/javascript">
var grados = 0;
var ancho = 800,
alto = 600;
var angulo = 30,
ratio = ancho / alto,
cerca = 0.1,
lejos = 10000;
var escenario = $('#escenario');
var miRender = new THREE.WebGLRenderer();
var miCamara = new THREE.PerspectiveCamera(angulo, ratio, cerca, lejos);
var miEscena = new THREE.Scene();
miRender.shadowMapEnabled = true;
miCamara.position.x = 0;
miCamara.position.y = 400;
miCamara.position.z = 400;
miRender.setSize(ancho, alto);
eje = new THREE.AxisHelper();
eje.scale.set(100,100,100);
escenario.append(miRender.domElement);
var material = new THREE.MeshLambertMaterial({color: 0xebebeb});
/* SUELO */
var suelo = new THREE.Mesh(new THREE.CubeGeometry(400, 20, 400), material);
suelo.position.x = 0;
suelo.position.y = 0;
suelo.position.z = 0;
suelo.castShadow = suelo.receiveShadow = true;
/* MODELO */
var modelo;
//Creamos el objeto ColladaLoader
var cargador = new THREE.ColladaLoader();
//ConvertUpAxis corrige la orientación del modelo usando el plano XZ
//como base, en lugar del XY que por defecto usa Collada.
cargador.options.convertUpAxis = true;
//El método load recibe dos parámetros: la url del modelo y una función
//que hace de callback una vez cargado.
cargador.load('./models/laevatein.dae',
function(collada){
modelo = collada.scene;
//Ajustamos la escala del elemento.
modelo.scale.set(0.1,0.1,0.1);
//Ajustamos la posicion
modelo.position.set(0,0,0);
//Lo añadimos a la escena
miEscena.add(modelo);
//Enfocamos la cámara hacia él
miCamara.lookAt(modelo.position);
$('.cargando').hide();
//Animamos la cámara
animar(new Date().getTime());
});
/* LUZ */
var luzAmbiental = new THREE.AmbientLight(0x444444);
var luz = new THREE.SpotLight(0xFFFFFF);
luz.position.x = 0;
luz.position.y = 400;
luz.position.z = 400;
luz.castShadow = true;
miEscena.add(eje);
miEscena.add(luz);
miEscena.add(luzAmbiental);
miEscena.add(miCamara);
/* Esta función sólo realiza un movimiento de
rotación de la cámara alrededor de nuestro modelo */
function animar(t){
grados += 1;
rad = grados * Math.PI/180;
var _x = Math.sin(rad) * 400;
var _z = Math.cos(rad) * 400;
miCamara.position.x = _x;
miCamara.position.z = _z;
miRender.render(miEscena, miCamara);
miCamara.lookAt(modelo.position);
window.requestAnimationFrame(animar, miRender.domElement);
}
</script>
