特效案例

Free HTML5 Bootstrap Template by FreeHTML5.co

使用钻石效果实现阿狸的尾巴

特效案例 点击数: 97

一个普通的钻石效果,使用了双层pass实现,两个IBL贴图,一个作为反射贴图,一个作为折射贴图。然后使用菲涅尔技术提高边缘效果实现。将阿狸的尾巴的颜色调整成紫色而已。

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

一个简单的钻石展示效果

特效案例 点击数: 99

一个普通的钻石效果,使用了双层pass实现,两个IBL贴图,一个作为反射贴图,一个作为折射贴图。然后使用菲涅尔技术提高边缘效果实现。

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

使用顶点动画实现植物生长效果

特效案例 点击数: 278

简简单单的一个效果,通过模型的纹理uv的v值来控制显示隐藏,通过对法向进行相乘对顶点位置进行偏移,实现一个动画效果

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

使用matcap技术实现薄膜干涉的效果

特效案例 点击数: 199

使用matcap技术实现薄膜干涉的效果,薄膜干涉效果主要是通过NdotV实现fresnel的值,也就是视角和模型的夹角法向,设置uv,第二个就是matcap技术,获取到相机世界的法向,只使用xy的坐标系,将xy法向转换成uv需要将xy法向00时设置成uv中心,所以xy法向需要加各加上1.0再除以一办,实现转换成uv在0-1之间(法向的范围是-1到1)

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

一个边缘光加流光的炫酷效果

特效案例 点击数: 399

使用NdotV实现边缘光,然后再加上根据视角实现流光效果

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

一个基于物理的小车案例

特效案例 点击数: 2778

xg - 基于物理的渲染+物理模拟+ Garry的Mod原子地图 由 bigwig - 使用 ammo.js 物理引擎, 保时捷提供自 david diaz, 牧马人提供自 robert maillart, 卡车 提供自 kama, 天空盒 提供自 humus
使用 箭头键 / WASD操作汽车, 点击 空格键 刹车, 通过 1, 2, 3 键切换汽车, 点击 B, N, M 键重置相应汽车
点击 L 键切换光照, P 键切换景深效果, O 键切换相机

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

一个tiled Map 地图的展示效果

特效案例 点击数: 1694

当前地图资源为tiledMap Editer的官方demo,游戏引擎使用layabox开发完成。

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

完整的mmorpg游戏demo展示,加载资源有点慢

特效案例 点击数: 2561

这是本人根据教程写的一个demo,为教程的最终版本,自己使用js写出来的一个版本

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

HTML5 WebGL Three.js 模糊发光的立方体动画特效

特效案例 点击数: 3072

这是一款基于HTML5+WebGL+Three.js实现可拖拽的模糊发光立方体动画特效源码。黑色幕布背景上并排放着一大一小两个立方体,其中大立方体边缘呈现出模糊发光的视觉效果。通过鼠标拖拽可拖动两个立方体,从而改变观察角度。是一款比较典型的鼠标响应式3D动画效果源码

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

游戏角色增加A*算法以及平滑处理效果

特效案例 点击数: 1848

这是本人根据教程写的一个demo,对上一个demo进行了升级,增加了自动寻路算法,以及对寻路的平滑处理,并且角色走到柱子后面会进行半透明显示效果。

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

three.js实现banner切换效果,比js实现的赞

特效案例 点击数: 3286

素材取自jq22, 一个banner切换的效果。

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

游戏角色的移动以及状态切换效果

特效案例 点击数: 2558

这是本人根据教程写的一个demo,里面可通过点击进行角色移动,角色会切换朝向,并向目标位置移动,移动到目标位置自动切换到待机状态。

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

A星算法demo

特效案例 点击数: 2134

本demo是本人根据教程实现的一个案例,并经过了优化
* 1. 优化获取是否处于open列表和close列表,由原来的indexof判断 修改为设置为节点属性获取,性能提高一倍. 原来20毫秒左右可以降低为10毫秒左右
* 2. 使用二叉堆来优化open列表的排序性能,运算时间由原来的10毫秒降低为了3毫秒左右

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

头盔分散聚合的效果

特效案例 点击数: 4635

本示例是通过three.js后处理实现,在踏得网上的上传用户拷贝过来。

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

无限城市示例

特效案例 点击数: 11503

这是Three.js官方网站上的一个示例,创建了一个无限城市的效果。具体内容请大家自己观察。

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

WebVR 展厅

特效案例 点击数: 7729

这是一个室内可视化演示。 它旨在说明 WebGLWebVR 如何提供在Web上展示和定制产品的新方法。

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

Babylon.js官方第一人称交互案例

特效案例 点击数: 5773

W,S控制前后移动,A,D控制左右移动,鼠标拖拽切换视角,内置重力,可以上下楼梯。内置发光效果。一个不错的案例效果。还携带多种相机。

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

HTML5 WebGL绚丽五彩流体模拟动画DEMO演示

特效案例 点击数: 5549

从别的网站拷贝过来的案例。通过原生webgl实现的水墨流体的效果,通过鼠标进行拖拽即可显示出相应的效果,每次拖拽颜色会有改变。

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

弹珠机小游戏

特效案例 点击数: 2728

本人业余时间制作的弹珠机小游戏,使用到的技术栈Three.js、Physijs、Tween.js实现了一个模仿物理效果的弹珠游戏。

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

某网的banner云彩案例

特效案例 点击数: 4597

three.js版本更新到92,更新相关接口代码,提高性能。某网打着webgl的旗帜卖three.js的视频,在这里吐槽一番

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

three.js版全景图播放器panorama

特效案例 点击数: 5840

这是本人开源的一款three.js版本的全景图播放器。github地址是:https://github.com/johnson2heng/panorama 欢迎前去star。

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

地球动画特效

特效案例 点击数: 7553

这是我的徒弟兼好友汤圆制作的一款地球特效动画。特此放上来

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

自制迷宫小游戏

特效案例 点击数: 7306

这是一个three.js的小游戏案例。就是为了熟悉代码使用。里面使用了bsp进行模型拼合,使用raycaster射线检测模型碰撞。bug有点多,只能凑合。走到终点还有彩蛋~~~死机

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

背景飘带效果

特效案例 点击数: 7942

一个适用于一些场景的背景飘带的动画效果,使用原生的webgl制作的特效。

查看详情
Free HTML5 Bootstrap Template by FreeHTML5.co

使用three.js制作"TheAviator"小游戏

特效案例 点击数: 4527

使用 Three.js 的 3D 制作动画场景:飞行者,它包含了许多额外有趣的部分如:碰撞,抓硬币和增加得分。

查看详情

联系我们

一个人的力量不如两个人的,两个人的力量不如一群人的。欢迎加入大家庭一起共同学习,共同进步。

查看更多