标签归档：Three.js

HTML5 3D 神秘游戏场景动画

今天分享的是一个基于Three.js的HTML5 3D动画，这个动画模拟了游戏中的一个炫酷的3D场景，支持360度视角查看，也支持鼠标滚轮进行缩放。画面中主要展现了一个游戏中传送门的效果，同时还有路两边的围栏、灯笼、石头，以及星光闪闪的萤火虫，整个画面显得十分神秘。不得不说，threejs作为webgl的上层库，基本可以满足我们动画制作的大部分需求。

html5-3d-game-scene

在线演示源码下载

基于Three.js的图片撕碎切换动画

这次要给大家带来一个特别炫酷的HTML5 Canvas图片切换动画，它是基于three.js动画库实现的，主要动画是图片以撕碎的特效进行切换，相当震撼。另外，在图片切换过程中，你也可以通过鼠标拖动来查看切换时的具体细节效果。如果将它制作成一个效果非常独特而华丽的相册或者焦点图插件，相信会很不错的。

three-js-image-animation

在线演示源码下载

HTML5圣诞礼物大炮发射3D动画

今天给大家带来一款基于HTML5的圣诞礼物大炮发射动画，这个动画主要是构造了一个3D的卧室场景，我们通过点击鼠标让一门大炮可以源源不断地发射各种各样的圣诞礼物，并且伴随大炮发射的声音，显得非常逼真有趣。这个HTML5动画主要算法是一些物体的碰撞检测，以及物体碰撞时的运动方向计算，对开发者的数学功底要求还是比较高的，有兴趣的朋友可以学习一些动画的JS代码。

html5-christmas-cannon

在线演示源码下载

基于Three.js和HTML5 Canvas的3D水晶球体

6,932 人浏览
发表回复
2019-01-21 15:09:19

今天给大家分享一个很酷的HTML5 Canvas 3D动画，它同样是一个基于Three.js制作的动画特效。在Canvas上有一个用许多长度各异的水晶柱形组成的球体，我们还可以用鼠标拖拽球体来从不同角度观察球面，还可以用鼠标滚轮来缩放球面。还有一个特性就是，双击球面可以改变水晶面的颜色，同时水晶面上会随着旋转的角度出现亮光，更加凸显出其3D立体的视觉效果。

threejs-canvas-3d-crystals

在线演示源码下载

基于Three.js的碰撞检测穿马路动画

8,728 人浏览
发表回复
2018-12-29 13:26:49

Three.js是JavaScript编写的WebGL第三方库，提供了非常多的3D显示功能。今天要给大家分享的就是一款基于Three.js的穿马路游戏动画，主要使用了Three.js的碰撞检测功能，马路上穿梭着很多车辆，你可以通过方向键控制小方块的行进方向，顺利通过马路，如果方块和行驶的车辆发生碰撞，则游戏结束。

threejs-impact-checking

在线演示源码下载