Responsive 3D-Models For Any Device

Visualize the 3D-Models using CSS Media Queries in any device

建立方法 HTML5, Canvas, CSS3, WebGL, XMLHttpRequest,

  • 453 次观看
  • 0 个评论

有关此演示作者的更多信息

Using CSS Media Queries, we can

- (1) toggle different layouts for different devices (e.g. desktop-wide, desktop-normal, desktop-narrow, tablet, mobile, feature)

- (2) toggle level of details (LOD) for different devices. Normally, desktop get more CPU/GPU power to render high quality 3D-Models. However, for mobile, we can still visual the 3D-Model using low quality one. This kinds of tricks enhance the user experience about the content navigating.

In the near future, people can scan the sculpture in the museum using 3D scanner, and view or interact with it using this hack on any device! Enjoy!

Technology used:
html5, css3, javascript, canvas, webgl, opengl-es.

Video:
http://www.youtube.com/watch?v=Y-0s85_FQfs

还没有评论。

登录后添加您自己的。

关于此演示

下载源代码 3954.82 KB · ZIP 格式

此演示发布于 MPL/GPL/LGPL 授权之下。