20个使用WebGL和Three.js实现的网页场景

百度权重查询 词库网 网站监控 服务器监控 seo监控 手机游戏 iPhone游戏

也许你们可能已经听说过关于Three.js库，Three.js是一个WebGL第三方库，它能够让浏览器更加轻松的使用和实现3D效果，就打个 比方Three.js库就有点类似我们常用的jquery库，它能够让我更加轻松的实现一些web，你还可以通过浏览器动态的创建出3D场景建模，网 格，光照效果等等，不仅如此，Three.js还能够通过Canvas元素制出场景效果，SVG,CSS3D或者WebGL等等。

在这篇文章中，你们会看见一些收集到的Three.js demo演示效果，包括一些很实用的资源教程，从而能够鼓励我们深入学习关于这个库的原理和用法。

演示实验场景效果
下面的演示将会向你展示使用Three.js库和WebGL渲染出的场景效果。也许它也可以通过WebGL直接实现该效果，但是假如加上Three.js库的帮助，将会使得开发变得更加简单。

1. Nucleal

Nucleal是一个搭载Three.js实现的WebGL实验，它能够将图片分解成成千上万的物理颗粒。你可以选择多种图片的颗粒组合效果，包括速度和效果。动画的实现特别很是平滑天然令人印象深刻。

2. Lights 光照效果
Lights 光照效果实现了一个惊人的视觉体验，它由Three.js所驱动，它搭配了多种颜色雄厚的外形，这是一道光，它穿过一个充满五颜六色外形的空间，效果特别很是震撼，建议带上耳机效果会更好。

3. Just A Reflektor

“Just A Reflektor”当你在电脑摄像头前举起你的智能手机后，它就能够在屏幕的交互式场景中投射出一个虚拟投影，使用该方法你就可以通过移动你手机或者电脑屏幕的空间位置，来控制实现不同的视觉效果。可以在tech page中观看一些令人惊奇的效果和幕后视频 。

4. Arms Globe

Arms Globe 是一个在地球模型中实现的可视化实验，它覆盖了全世界的小型武器贸易。你还可以通过鼠标旋转3D空间，并且可以通过设置年份和军火类型来过滤数据。总而言之它是一个令人印象深刻的可视化效果。