<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html5 canvas炫酷线条动画特效</title>
<style>
body {
overflow: hidden;
margin: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
canvas {
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
h2 {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
color: white;
font-family: 'Josefin Sans', sans-serif;
letter-spacing: 4px;
opacity: 0.2;
font-weight: 300;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/perlin.js"></script>
<canvas></canvas>
<h2>长按任意键</h2>
<script>
console.clear();
var renderer = new THREE.WebGLRenderer({
canvas: document.querySelector("canvas"),
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
renderer.setSize(window.innerWidth, window.innerHeight);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
1000
);
camera.position.z = 60;
var length = 30;
var mouseJump = {
x: 0,
y: 0
};
var offset = 0;
function Spline() {
this.geometry = new THREE.Geometry();
this.color = Math.floor(Math.random() * 80 + 180);
for (var j = 0; j < 180; j++) {
this.geometry.vertices.push(
new THREE.Vector3(j / 180 * length * 2 - length, 0, 0)
);
this.geometry.colors[j] = new THREE.Color(
"hsl(" + (j * 0.6 + this.color) + ",70%,70%)"
);
}
this.material = new THREE.LineBasicMaterial({
vertexColors: THREE.VertexColors
});
this.mesh = new THREE.Line(this.geometry, this.material);
this.speed = (Math.random() + 0.1) * 0.0002;
scene.add(this.mesh);
}
var isMouseDown = false;
var prevA = 0;
function render(a) {
requestAnimationFrame(render);
for (var i = 0; i < splines.length; i++) {
for (var j = 0; j < splines[i].geometry.vertices.length; j++) {
var vector = splines[i].geometry.vertices[j];
vector.y =
noise.simplex2(j * 0.05 + i - offset, a * splines[i].speed) * 8;
vector.z = noise.simplex2(vector.x * 0.05 + i, a * splines[i].speed) * 8;
vector.y *= 1 - Math.abs(vector.x / length);
vector.z *= 1 - Math.abs(vector.x / length);
}
splines[i].geometry.verticesNeedUpdate = true;
}
scene.rotation.x = a * 0.0003;
if (isMouseDown) {
mouseJump.x += 0.001;
if (a - prevA > 100) {
updateColor();
prevA = a;
}
} else {
mouseJump.x -= 0.001;
}
mouseJump.x = Math.max(0, Math.min(0.07, mouseJump.x));
offset += mouseJump.x;
renderer.render(scene, camera);
}
var splines = [];
for (var i = 0; i < 12; i++) splines.push(new Spline());
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function updateColor() {
for (var i = 0; i < splines.length; i++) {
var color = Math.abs((splines[i].color - offset * 10) % 360);
for (var j = 0; j < splines[i].geometry.vertices.length; j++) {
splines[i].mesh.geometry.colors[j] = new THREE.Color(
"hsl(" + (j * 0.6 + color) + ",70%,70%)"
);
}
splines[i].mesh.geometry.colorsNeedUpdate = true;
}
}
function onMouseDown(e) {
isMouseDown = true;
e.preventDefault();
return false;
}
function onMouseUp() {
isMouseDown = false;
}
window.addEventListener("resize", onResize);
window.addEventListener("keydown", onMouseDown);
document.body.addEventListener("mousedown", onMouseDown);
document.body.addEventListener("mouseup", onMouseUp);
document.body.addEventListener("touchstart", onMouseDown);
document.body.addEventListener("touchend", onMouseUp);
requestAnimationFrame(render);
</script>
</body>
</html>
html5 canvas炫酷线条动画特效.zip （3个子文件） 
js 
perlin.js 10KB three.js 1016KB
index.html 4KB资源评论
码云笔记
- 粉丝: 3w+
- 资源: 5852
最新资源
- 颜料墨水粘合剂，全球前13强生产商排名及市场份额（by QYResearch）.pdf
- 小核酸药物，全球前12强生产商排名及市场份额（by QYResearch）.pdf
- 硬盘销毁设备，北美前17强生产商排名及市场份额.pdf
- 硬盘销毁设备，全球前12强生产商排名及市场份额（by QYResearch）.pdf
- 医药级哌啶衍生物，全球前8强生产商排名及市场份额（by QYResearch）.pdf
- 原子层沉积（ALD）隔膜阀，全球前5强生产商排名及市场份额（by QYResearch）.pdf
- 中空纤维膜氮氧分离系统，全球前10强生产商排名及市场份额（by QYResearch）.pdf
- 6分力传感器，全球前25强生产商排名及市场份额（by QYResearch）.pdf
- 基于Python Turtle库的流星图案绘制代码实例
- 普通电机控制程序 封装好的电机功能块，西门子plc，支持博途v15以上版本 包括正转，反转，变频控制，模拟量，故障，故障复位，控制字来显示电机的6种状态等，底层使用SCl编程，直接可以导出库文件，使
- 仿mediaPlayer小的样子，马马虎虎
- 双伺服打孔机程序双伺服打孔机程序，使用三菱FX1S系列PLC和威纶通，也可以额外有偿转移指其他触摸屏，比如昆仑通态还有信捷等等
- C# Modbus RTU协议主站设计工程源码带注释，开源dll文件，支持访问多个从站，多线程实现
- this is an important file
- 使用Python Turtle绘制蝙蝠图形实例演示
- 黑龙江省各市、县、区及街镇SVG图
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
