首页 > 网页教程 > JavaScript > 20个基于WebGL和Three.js实现的网页三维演示效果

20个基于WebGL和Three.js实现的网页三维演示效果

时间:2013-10-09    来源:数字生活 web前端资源

也许你们可能已经听说过关于Three.js库,Three.js是一个WebGL第三方库,它能够让浏览器更加轻松的使用和实现3D效果,就打个比方Three.js库就有点类似我们常用的jquery库,它能够让我更加轻松的实现一些web特效,你还可以通过浏览器动态的创建出3D场景建模,网格,光照效果等等,不仅如此,Three.js还能够通过Canvas元素制出场景效果,SVG,CSS 3D或者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空间,并且可以通过设置年份和军火类型来过滤数据。总而言之它是一个令人印象深刻的可视化效果。

相关推荐
8款绝对让你震撼的JavaScript WebGL应用案例欣赏
用Javascript实现文字放大的效果
分享10款精美的焦点幻灯和图片特效jQuery插件
利用javascript技术实现网页图片预加载功能
如何用JS获取当前页面的URL网址参数
11种通过JavaScript特效控制内容展示的方法
JavaScript编程中的for与in循环的用法实例
用JS代码简单实现checkbox的全选与反选
如何处理JS的'null'为空或不是对象
用javascript代码实现对浏览器判断的思路
25款有趣好玩的JavaScript小游戏
JS代码的window.location属性详解
用javascript把XML解析为JSON的方法
5大当下最流行的JavaScript框架介绍
19个轻量级用于web开发的JavaScript库
20款华丽酷炫的jQuery图片相册插件
用Js操作Cookie的代码教程附有详细注释
JS教程:NodeList集合跟Array数组的区别
深入理解JavaScript的caller,callee,call,apply函数
获取Javscript执行函数名称的代码实例
web开发常用的Javascript函数大全
JavaScript的split函数详解及代码实例
JavaScript中indexOf函数
用JavaScript实现表单验证电话号码的代码实例
用正则表达式实现JavaScript表单验证中文大写字母
写给JavaScript库开发者们的11条规则
理解JavaScript中0...n属性及代码实例
新手教程:107条Javascript的常用语句
js禁用下拉框的代码实例
js编程经验分享 原始Ajax与jQuery中的Ajax比较
Javascript新手教程:从入门到精通(完整版)
10个超级实用的javascript动画框架分享
10款基于Javascript的超酷绘画和画布类库
12个移动应用开发的jQuery和HTML5框架
10个基于jQuery的标签页tabs和手风琴效果推荐
13款优秀实用的JavaScript图表和图形绘制插件推荐

精彩推荐

热门教程