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

Creación página web – Los pasos La creación de una página web profesional requiere unos pasos previos. Se puede optar por esas soluciones que anuncian en la TV de crea tu página en 1...
Three.js – Proyectos de ejemplo (1) Aquí os dejo algunos enlaces a ejemplos de proyectos creados con Three.js. Con esta librería 3D con el que poder trabajar WebGL, o lo que es lo mismo,...
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...
Utilizar nuestra fuente de texto en la web Desde hace mucho tiempo, que es recomendado utilizar fuentes genéricas (que normalmente tienen todos los equipos, ya sean windows, mac o Linux). Estam...

Deja un comentario

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

*