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

Optimizar ficheros js para disminuir tiempo de car... En muchas ocasiones nos encontramos con un problema que afecta al tiempo de carga de nuestra web. Llamamos a muchos ficheros javascript desde nuestra ...
Enlaces de redes sociales para compartir página Hay cientos de plugins/librerías para utilizar en nuestra página web que nos permiten compartirla en las principales redes sociales. Para ello, normal...
Optimización página web – Paso 2 – Accesibilidad... Como mas accesible sea la web, el Sr. Google mas nos valora. Para seguir las normas de accesibilidad, hay que cumplir algunas normas que en el siguien...
Socialite.js – Botones sociales en su web Una pequeña librería JavaScript que permite poner los botones sociales de Facebook, Twitter, Google y LinkedIn de forma fácil en cualquier web o blog....

Deja un comentario

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

*