Cargue el modelo 3D con elemento de lienzo HTML5 y Javascript

Tengo un concepto simple para el que quiero usar HTML5, pero soy un novato total cuando se trata de lienzos y visores de modelos escritos en Javascript. Tengo un modelo 3D de una lámpara de escritorio y me gustaría que solo la parte de la cabeza de la lámpara gire con el movimiento del mouse. Esta Efecto de sombra de caja CSS3 es más o menos lo que quiero decir, pero ya tengo el modelo 3D dibujado en Maya que me gustaría cargar con HTML5 y usar Javascript para la interacción del cursor. Solo necesito la parte de la cabeza de la lámpara para conservar los atributos 3D, puedo usar un png para la base. Espero que esto tenga sentido, normalmente solo usaría flash, pero me gustaría hacer esto con HTML5 si es posible.

preguntado el 03 de mayo de 12 a las 17:05

echa un vistazo tres.js -

Perfecto, esto es exactamente lo que necesito, ¿tal vez alguien podría arrojar algo de luz sobre cómo cargar un modelo JSON con tres.js? ¡Gracias! -

3 Respuestas

También soy nuevo en webgl, puedes hacerlo con three.js. Si está utilizando Blender, hay un script de conversión disponible que convertirá el modelo en un archivo json.

Luego puede cargar el archivo json en el lienzo usando el cargador json de three.js. Encontré estos enlaces útiles para cargar el modelo json. Espero eso ayude

http://dev.opera.com/articles/view/porting-3d-graphics-to-the-web-webgl-intro-part-2/

echa un vistazo a la fuente de este ejemplo - http://mrdoob.github.com/three.js/examples/canvas_materials_reflection.html

Respondido el 30 de diciembre de 16 a las 07:12

CSS 3 no te ayudará con eso, parece que necesitarás usar WebGL, que es un "API de JavaScript para renderizar gráficos 3D interactivos dentro de cualquier navegador web compatible sin el uso de complementos"

Prueba el artículo de Wikipedia y sitio oficial (también está el "pruebe si su navegador es compatible con el sitio WebGL")

contestado el 03 de mayo de 12 a las 17:05

Por el contrario... Tengo un motor CSS 3D que planeo abrir pronto. No es que ayude al OP, solo encontré tu comentario sorprendentemente relevante :) - Nadie

¿Un motor 3D CSS capaz de qué? ¿Modelado de objetos 3D? - nitzan tomer

Sí. Directamente desde archivos .obj y .mtl. Y animándolos usando transiciones CSS3, mapeo especular, sombreado plano, sombreado phong a 0.1 fps ;) - Nadie

Ok, parece que para usar mi modelo, tengo que convertirlo de dwg (autocad) a dae (collada), codificar como JSON y luego cargar con AJAX en un lienzo HTML5. Luego espero mapear el modelo JSON para seguir el movimiento del mouse. ¿Alguien sabe de buenas referencias relacionadas con ejemplos? - dcd018

Pruebe jsc3d en: https://code.google.com/p/jsc3d/

Citado: ..JSC3D se basa en el renderizado de software Javascript puro utilizando tecnología de lienzo 2d, así como un back-end WebGL opcional que proporciona un renderizado más eficiente...

respondido 22 nov., 15:22

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.