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

Overflow vertical en html Si tenemos una capa 'div' con unas determinadas medidas, nos puede interesar que si su contenido sobrepasa la capa que lo contiene, se muestren unas b...
GroundWork CSS – 01 – Framework HTML5 ... El primero de los cuatro vídeos que he preparado para mostrar cómo utilizar el framework GroundWork para la creación de páginas web responsive. En est...
HTML KickStart – Crea rápidamente webs De nuevo, otro framework para estructurar y crear rápidamente páginas web. Estamos hablando de HTML KickStart. Por el alto número de elementos que ofr...
MySQL – Listar registros aleatorios Pequeño código para que MySQL liste un determinado número de registros aleatoriamente. Ejemplo: En una tabla 'jugadores' tenemos los datos de los j...

Deja un comentario

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

*