Responsive 3D-Models For Any Device

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

이용 기술 HTML5, 캔버스, CSS3, WebGL, XMLHttpRequest,

  • 조회수 184회

현재 데모에 대한 개발자 댓글

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

About this Demo

소스 다운로드 3954.82 KB · ZIP 파일

현재 데모는 MPL/GPL/LGPL 라이센스 하에 공개되고 있습니다.