Three.js – WW2Viewer añadiendo Spitfire MK I

Este fin de semana he añadido un nuevo vehículos de la Segunda Guerra Mundial a mi catálogo 3D online. WW2Viewer es un pequeño proyecto realizado con Three.js, librería Javascript para el tratamiento 3D en los navegadores.

Esta nueva actualización, me ha servido para tratar con los modelos 3D de Collada. Hasta ahora solo había tratado la carga de modelos .obj Y he encontrado varias cosas que creo importante cuando tratas con modelos 3D. Lo explico para facilitar el proceso por si lo queréis hacer, pero ni mucho menos lo debéis coger como un método único.

Cargar modelo Collada (.dae)

Lo primero, es saber que el formato interno de los ficheros .dae, es XML. En mi caso, decidí optimizar el objeto para que no tardara tanto en cargarlo:

  • Exporté las texturas de .tga a .jpg, dejándolas en la misma carpeta textures
  • edité el fichero .dae, modificando el nombre de las texturas de .tga a .jpg

De esta forma he conseguido disminuir en varios MB la carga del objeto (y eso en Internet es mucho). Recordad que la mayoría de objetos que os descarguéis en Internet están creados para trabajarlos en local, no Internet.

Modelo 3D Spitfire MK I

Modelo 3D Spitfire MK I

El código de carga es sencillo. Creáis escena, colocáis luces… y se procede a la carga del objeto:

1
2
3
4
var loader = new THREE.ColladaLoader();
loader.load('./models/SpitfireMK1/spit.dae', function (object) {
scene.add(object.scene);
});

Solo me centro en la carga del objeto, no en el resto que os lo dejo a vosotros.

El modelo Collada (.dae) se renderiza en negro

Pues sí. Si utilizáis el navegador Firefox, el modelo se ve negro. No se le aplica texturas ni luces… hay que verlo con Chrome.
Estuve alrededor de hora y media buscando que tenía mal, y resulta que era que Firefox no soporta una de las funciones… y no renderiza bien.

Para finalizar os dejo unos enlaces, entre ellos el del proyecto para el que pueda interesarle el 3D en navegadores:

Más información

Artículos relacionados

Ejemplo AJAX envío formulario con jQuery Pequeño ejemplo de utilización de AJAX para el envío de un formulario Página del formulario (pw-pac1.html) En el header function validarUsuar...
EXT JS – Framework JavaScript Empezamos con uno de los FrameWorks de JavaScript que todavía no he probado, EXT JS. Tiene muy buena pinta, aunque el tema de licencias puede ser un f...
GroundWork CSS – 02 – Framework HTML5 ... Segundo vídeo que muestro cómo estructurar una página web responsive para que se muestre de forma correcta en web y en dispositivos móviles. ...
CodeIgniter – Cómo averiguar si nos visitan ... Ahora mas que nunca, nos puede interesar saber si un usuario visita nuestra web desde el ordenador o, desde un dispositivo móvil (smartphone o tablet)...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*