Publicación 3D via web con JSC3D

Recientemente acabo de tropezarme con JSC3D, otra interesante librería para publicación de modelos 3D, que tras las revisiones de X3DOM y Three.js, pienso que puede ser la librería definitiva para publicar a través de web contenidos 3D.

De forma similar a Three.js esta librería open source, da soporte nativo a modelos OBJ (Wavefront) además de STL (STereo Lithography) y Autodesk 3Ds.

Al igual que el resto de librerías explota las cualidades webGL de los exploradores web, con la salvedad que incorpora una librería para suplir la falta de webGL como IE < 9, además de un interesante soporte para pantallas multitáctiles que junto a las buenos resultados de su render, y sobretodo la sencillez de su código la proponen como una interesante opción a la hora de decantarse por una librería de desarrollo de visores 3D.

Su código es realmente simple:

  <canvas id="cv" width="640" height="400" ></canvas>
  <script type="text/javascript" src="/jsc3d/jsc3d.js"></script>
  <script type="text/javascript" src="/jsc3d/jsc3d.touch.js"></script>
  <script type="text/javascript" src="/jsc3d/jsc3d.webgl.js"></script>
  

Como podemos observar partimos del ya habitual objeto Canvas del HTML5 y luego la carga de librerías básicas como jsc3d.js y jsc3d.touch.js para soporte multitáctil y jsc3d.webgl.js para compatibilidad WebGL.

Primero definimos el elemento Canvas:

var canvas = document.getElementById(‘cav');

Luego instaciamos el objeto Viewer:

viewer.setParameter('SceneUrl', ‘diosa.0.mesh.textura.obj')

A continuación hacemos la carga de nuestro modelo:

viewer.setParameter('SceneUrl', ‘diosa.0.mesh.textura.obj')

Si estamos usando un documento .mtl para describir nuestra textura, debemos usar el mismo nombre de fichero que el usado en nuestro obj para su carga automática.

Posteriomente redefinimos la posición inicial de nuestro objeto y color de fondo.

  viewer.setParameter('InitRotationX', 0);
  viewer.setParameter('InitRotationY', 0);
  viewer.setParameter('InitRotationZ', 0);
  viewer.setParameter('BackgroundColor1', '#000000');
  viewer.setParameter('BackgroundColor2', ‘#000000’);

Una cualidad interesante es la posibilidad de elegir el modo de tender de nuestro modelo con

viewer.setParameter('RenderMode', ‘texturesmooth');

Las opciones de RenderMode son: point, wireframe, flat, smooth, texture, textureflat y texturesmooth.

Un método interesante y opcional de JSC3D es:

viewer.setParameter('MipMapping', ‘on');

Con este método activado se permite la generación automática de mipmaps sobre nuestro archivo de textura con el fin de reducir la resolución sin sacrificar especialmente la apariencia.

Otro aspecto realmente práctico, es la posibilidad de mostrar una barra de progreso, algo bastante trascendente con modelos 3D para informar al usuario de los tiempos de carga, ya que los cuales no suelen ser especialmente livianos:

viewer.setParameter('ProgressBar', ‘on');

Finalmente esta librería, como citábamos al comienzo, incorpora su propia librería webGL la cual mejora en cierta manera, además de aportar compatibilidad el Render.

Finalmente con:

viewer.init();
viewer.update();

Se inicia la representación del modelo.

Como vemos en apenas 14 líneas de código es posible generar un simple visor para modelos 3D. Como siempre podeis observar un ejemplo de dicho código sobre mi modelo dummie “The Queen Of the Night"