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

2017-07-18 23:31:49 上海顶互智能科技

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

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

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

29 Impressive Examples for Learning WebGL

 

包 括如下方面的效果目录

 

编号

英文

中文

1

Nucleal   

原子粒子的3D模拟

2

Lights

模拟光照

3

Just A Reflektor

图片增加反射光

4

Arms Globe

大数据3D可视化

5

Google Street View Hyperlapse   

谷歌道路全景3D可视化

6

Find Your Way To Oz

寻路模拟

7

Google Zeitgeist  

时代关键事件大数据3D展示

8

Ironbane       

密室大逃亡

9

Cube Slam

碰碰球

10

HexGL

飞行平衡模拟

11

Chrome World Wide Maze

迷失模拟

12

HelloRun   

酷炫驾驶室

13

Hello Racer  3D

赛车虚拟仿真模拟

14

360 Car Visualizer

轿车虚拟仿真

15

Google Maps Cube

立体谷歌3D地图

16

CSS3D Periodic Table 

3D元素周期表虚拟仿真

17

WebGL Globe 

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

18

Obsidian            

黑斑模拟

19

Indra's Net        

因陀罗网(谷歌翻译与我无关)

20

Planet Maker

3D星球虚拟仿真设计


 

编号

英文

中文

21

View Demo Web3D

模拟水池波动

22

WebGL Nyan Cat 

网络3D虚拟小猫咪

23

Blossom

3D模 拟树叶花瓣的飘洒效果

24

Fizzy Cam

3D模拟泡沫腾涌

25

Teach Me to Fly

3D模拟滑翔飞行

26

Visualeyezer

3D模拟眼球

27

Interactive Globe

大 数据实时模拟最新的数据

28

Ellie Goulding's Lights

虚幻多彩光流3D虚拟仿真模拟

 

 

来源网络,相 关截图归原版权作者所有

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

https://davidwalsh.name/webgl-demo


By now you have probably heard about  - a library which makes working with 3D in the browser easy. With it, you can create the building blocks of 3D modeling - cameras, meshes, lights and more, and apply animations on them. Three.js can draw a scene using a Canvas element, SVG, CSS3D or WebGL.

In this article, you will find a collection of demos, tutorials and resources that will inspire you to learn more about the library.

Experiments and Demos

酷炫的3D演示例子效果与截图

The impressive demos that you see below are made with the Three.js library and WebGL as a renderer. It is possible to use WebGL directly, but choosing Three.js makes development easier and results in only a fraction of the code. Here are some of the things that are possible with the library:

1. Nucleal

 is a WebGL experiment, powered by the Three.js. It breaks photos down into thousands of particles that are transformed by physics. You can choose any combination of photo, speed and effects. The animations run smoothly which is even more impressive.

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

Nucleal  原子粒子的3D模拟

 

2. Lights

 is an amazing visual experience, powered by Three.js, which syncrhonizes colors and shapes to music. You fly through a scene filled with colorful shapes, which you can interact with by clicking. Headphones are recommended.

Lights 模拟光照

 

3. Just A Reflektor

 is an interactive film that lets you cast a virtual projection on your computer screen by holding up your mobile device in front of your computer’s webcam. That way, you control all of the visual effects in the experience by moving your phone or tablet through the physical space around you. See some of the amazing effects on the , and the behind the .

Just A Reflektor     图片增加反射光

 

 

 

4. Arms Globe

 is a visualization experiment which overlays the world trade of small arms and ammunition on top of a model of the earth which you can rotate in 3D space. You can filter the data set by years and types of ammunition. The visualization is very impressive and runs smoothly.

Arms Globe 大数据3D可视化


5. Google Street View Hyperlapse

 downloads Google Streetview data between two destinations, and turns it into an animation of the trip. You can pause and take a look around, or you can drag a target on the map on the top-right which the camera will follow. Give it a few minutes to load or watch  to see it in action.

Google Street View Hyperlapse    谷歌道路全景3D可视化

 

6. Find Your Way To Oz

 for the Oz the Great and Powerful movie. It combines beautiful artwork with HTML5 and WebGL into immersive experience. It takes place in the circus from the beginning of the movie. You can interact with the environment and use your web cam.

Find Your Way To Oz 寻路模拟

7. Google Zeitgeist

Google's  included a WebGL powered world map which presented the search trends and important events from the past year. Click the "Watch the year in review" button to see it.

Google Zeitgeist   时 代脉搏关键事件大数据3D展示

8. Ironbane

 is a massively multiplayer online game powered by WebGL and Three.js. You can collect items, interact with other players and explore the open world. The game follows a retro style inspired by Minecraft and runs smoothly. The game is  and both the client and server side are written in JavaScript. You can play without opening an account, so you can quickly try it for yourself.

Ironbane密室大逃亡

 

9. Cube Slam

 is my favorite Three.js powered game from this list. It is a spin of the classic pong game, but moves it into 3D space. You can play against your friends or computer-controlled bear. The game uses WebRTC so you see a video of your friend's webcam. For a behind the scenes, read through t by one of the creators.

Cube Slam碰碰球

 

 

10. HexGL

 is a futuristic, fast-paced racing game built using HTML5, JavaScript and WebGL, with the help of Three.js. It is a tribute to the original Wipeout and F-Zero series. It is a graphically heavy game, approaching the level of desktop games from a few years ago. Luckily, you can lower the level of detail before playing.  from the game author explaining how he made the game.

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

来源

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

https://davidwalsh.name/webgl-demo

未完待续...

友情链接:    大神彩票官网   大发彩票 - 安全购彩   中福易彩登陆   同裕彩票平台   大发彩票 - 安全购彩