28个精美网页3D交互应用展示整理(二)

2017-07-18 23:56:53 上海顶互智能科技

上 海顶互智能科技有限公司

提供专业在线网页3D解决方案

29个非常酷炫的网页3D演示效果(基于H5 WebGL技术)(二)

29 Impressive Examples for Learning WebGL 

11. Chrome World Wide Maze

 by Google that lets you turn any web page into a 3 dimensional maze through which you move a ball. What is even cooler, is that the ball is controlled from your smartphone.



28个精美网页3D交互应用展示整理(二)

Chrome World Wide Maze   迷失模拟

 

 

12. HelloRun

 is a WebGL game powered by Three.js that puts you in the hull of a spaceship and forces you to find your way by jumping through hurdles. The game has great visuals and progressively speeds up and becomes more difficult.

HelloRun  酷炫驾驶室

13. Hello Racer

 is an impressive visualization of a Formula 1 racing car, powered by WebGL and Three.js. It features life-like reflections and shadows. You can even drive it around with the WASD keys.

Hello Racer  3D赛车虚拟仿真模拟

14. 360 Car Visualizer

 that features detailed car visualizations. This time you can choose the car model and color. The colors are applied dynamically and all the textures are updated to match.

360 Car Visualizer  模拟轿车

15. Google Maps Cube

 is a game that presents you with a 3D maps cube. Your job is to navigate a ball through the city and reach checkpoints. Google Maps Cube is a game whereby you rotate your cursor around a cube, tipping the cube in a given direction, so as to get a ball to a destination on the map.  This is an interesting, creative use of Google Maps and very well executed.

 

Google Maps Cube             立体谷歌3D地图

16. CSS3D Periodic Table

 of Three.js. Instead of WebGL, this experiment uses CSS3D to render the chemical elements boxes. You can choose between four layouts: table, sphere, helix and grid.

CSS3D Periodic Table  3D元素周期表虚拟仿真

 

 

17. WebGL Globe

 is a visualization experiment that, similar to the arms globe, presents data overlayed on a globe floating in 3d space. This example is centered around population by city, but you can see versions with different data sets .


 

 28个精美网页3D交互应用展示整理(二)

WebGL Globe             数 字地球大数据三维虚拟仿真

18. Obsidian

 is a WebGL demo that synchronizes floating shapes and colors to music. Although there is a slider at the bottom, this is not a video - the effects are generated in real time.

Obsidian             黑斑模拟

 

 

19. Indra's Net

 presents a multidimensional web of raindrops that reflect each other and the world around them. Even though a very large number of objects is involved, the rendering is still quite fast.

Indra's Net         因陀罗网(谷歌翻译与我无关)

 

20. Planet Maker

 is a web app powered by WebGL and Three.js that lets you create real or imaginary planets. You can choose from several surface texture options, tweak the lighting and atmosphere, add or remove clouds, upload your own imagery, or wrap a ring around them.

Planet Maker            3D星球虚拟仿真设计

Bonus: WebGL Nyan Cat

Frankly, no collection of WebGL resources is complete without a nyan cat. Enjoy!

来源:

https://tutorialzine.com/2013/09/20-impressive-examples-for-learning-webgl-with-three-js

https://davidwalsh.name/webgl-demo


未完待续...

友情链接:    双色球专家--首页_欢迎您   彩609彩票计划   浙江11选5--首页_欢迎您   大神彩票官网   大神彩票注册