基于canvas制作全屏的3D方块粒子悬停，跟随鼠标移动3D翻转动画特效。支持360度无死角翻转效果，先来看看效果：
一部分关键的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>粒子</title>
</head>
<body>
<script src="js/three.min.js"></script>
<div></div>
<script>
var Stats=function(){var e=Date.now(),t=e,i=0,n=1/0,r=0,s=0,o=1/0,a=0,l=0,h=0,c=document.createElement("div");c.id="stats",c.addEventListener("mousedown",function(e){e.preventDefault(),v(++h%2)},!1),c.style.cssText="width:80px;opacity:0.9;cursor:pointer";var u=document.createElement("div");u.id="fps",u.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#002",c.appendChild(u);var d=document.createElement("div");d.id="fpsText",d.style.cssText="color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px",d.innerHTML="FPS",u.appendChild(d);var p=document.createElement("div");for(p.id="fpsGraph",p.style.cssText="position:relative;width:74px;height:30px;background-color:#0ff",u.appendChild(p);74>p.children.length;){var f=document.createElement("span");f.style.cssText="width:1px;height:30px;float:left;background-color:#113",p.appendChild(f)}var m=document.createElement("div");m.id="ms",m.style.cssText="padding:0 0 3px 3px;text-align:left;background-color:#020;display:none",c.appendChild(m);var g=document.createElement("div");g.id="msText",g.style.cssText="color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px",g.innerHTML="MS",m.appendChild(g);var y=document.createElement("div");for(y.id="msGraph",y.style.cssText="position:relative;width:74px;height:30px;background-color:#0f0",m.appendChild(y);74>y.children.length;){var f=document.createElement("span");f.style.cssText="width:1px;height:30px;float:left;background-color:#131",y.appendChild(f)}var v=function(e){switch(h=e){case 0:u.style.display="block",m.style.display="none";break;case 1:u.style.display="none",m.style.display="block"}},b=function(e,t){var i=e.appendChild(e.firstChild);i.style.height=t+"px"};return{REVISION:11,domElement:c,setMode:v,begin:function(){e=Date.now()},end:function(){var h=Date.now();return i=h-e,n=Math.min(n,i),r=Math.max(r,i),g.textContent=i+" MS ("+n+"-"+r+")",b(y,Math.min(30,30-30*(i/200))),l++,h>t+1e3&&(s=Math.round(1e3*l/(h-t)),o=Math.min(o,s),a=Math.max(a,s),d.textContent=s+" FPS ("+o+"-"+a+")",b(p,Math.min(30,30-30*(s/100))),t=h,l=0),h},update:function(){e=this.end()}}};
(function() {
'use strict';
// 'To actually be able to display anything with Three.js, we need three things:
// A scene, a camera, and a renderer so we can render the scene with the camera.'
// - https://threejs.org/docs/#Manual/Introduction/Creating_a_scene
var scene, camera, renderer;
// I guess we need this stuff too
var container, HEIGHT,
WIDTH, fieldOfView, aspectRatio,
nearPlane, farPlane, stats,
geometry, particleCount,
i, h, color, size,
materials = [],
mouseX = 0,
mouseY = 0,
windowHalfX, windowHalfY, cameraZ,
fogHex, fogDensity, parameters = {},
parameterCount, particles;
init();
animate();
function init() {
HEIGHT = window.innerHeight;
WIDTH = window.innerWidth;
windowHalfX = WIDTH / 2;
windowHalfY = HEIGHT / 2;
fieldOfView = 75;
aspectRatio = WIDTH / HEIGHT;
nearPlane = 1;
farPlane = 300;
/* fieldOfView ? Camera frustum vertical field of view.
aspectRatio ? Camera frustum aspect ratio.
nearPlane ? Camera frustum near plane.
farPlane ? Camera frustum far plane.
- https://threejs.org/docs/#Reference/Cameras/PerspectiveCamera
In geometry, a frustum (plural: frusta or frustums)
is the portion of a solid (normally a cone or pyramid)
that lies between two parallel planes cutting it. - wikipedia. */
cameraZ = farPlane / 3; /* So, 1000? Yes! move on! */
fogHex = 0x000000; /* As black as your heart. */
fogDensity = 0.0007; /* So not terribly dense? */
camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, nearPlane, farPlane);
camera.position.z = cameraZ;
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(fogHex, fogDensity);
container = document.createElement('div');
document.body.appendChild(container);
document.body.style.margin = 0;
document.body.style.overflow = 'hidden';
geometry = new THREE.Geometry(); /* NO ONE SAID ANYTHING ABOUT MATH! UGH! */
particleCount = 20000; /* Leagues under the sea */
/* Hope you took your motion sickness pills;
We're about to get loopy. */
for (i = 0; i < particleCount; i++) {
var vertex = new THREE.Vector3();
vertex.x = Math.random() * 2000 - 1000;
vertex.y = Math.random() * 2000 - 1000;
vertex.z = Math.random() * 2000 - 1000;
geometry.vertices.push(vertex);
}
/* We can't stop here, this is bat country! */
parameters = [
[
[1, 1, 0.5], 5
],
[
[0.95, 1, 0.5], 4
],
[
[0.90, 1, 0.5], 3
],
[
[0.85, 1, 0.5], 2
],
[
[0.80, 1, 0.5], 1
]
];
parameterCount = parameters.length;
/* I told you to take those motion sickness pills.
Clean that vommit up, we're going again! */
for (i = 0; i < parameterCount; i++) {
color = parameters[i][0];
size = parameters[i][1];
materials[i] = new THREE.PointCloudMaterial({
size: size
});
particles = new THREE.PointCloud(geometry, materials[i]);
particles.rotation.x = Math.random() * 6;
particles.rotation.y = Math.random() * 6;
particles.rotation.z = Math.random() * 6;
scene.add(particles);
}
/* If my calculations are correct, when this baby hits 88 miles per hour...
you're gonna see some serious shit. */
renderer = new THREE.WebGLRenderer(); /* Rendererererers particles. */
renderer.setPixelRatio(window.devicePixelRatio); /* Probably 1; unless you're fancy. */
renderer.setSize(WIDTH, HEIGHT); /* Full screen baby Wooooo! */
container.appendChild(renderer.domElement); /* Let's add all this crazy junk to the page. */
/* I don't know about you, but I like to know how bad my
code is wrecking the performance of a user's machine.
Let's see some damn stats! */
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.right = '0px';
container.appendChild(stats.domElement);
/* Event Listeners */
window.addEventListener('resize', onWindowResize, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
}
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
function render() {
var time = Date.now() * 0.00005;
camera.position.x += (mouseX - camera.position.x) * 0.05;
camera.position.y += (-mouseY - camera.position.y) * 0.05;
camera.lookAt(scene.position);
for (i = 0; i < scene.children.length; i++) {
var object = scene.children[i];
if (object instanceof THREE.PointCloud) {
object.rotation.y = time * (i < 4 ? i + 1 : -(i + 1));
}
}
for (i = 0; i < materials.length; i++) {
color = parameters[i][0];
h = (360 * (color[0] + time) % 360) / 360;
materials[i].color.setHSL(h, color[1], color[2]);
}
renderer.render(scene, camera);
}
function onDocumentMouseMove(e) {
mouseX = e.clientX - windowHalfX;
mouseY = e.clientY - windowHalfY;
}
/* Mobile users? I got your back homey */
function onDocumentTouchStart(e) {
if (e.touches.length === 1) {
e.preventDefault();
mouseX = e.touches[0].pageX - windowHalfX;
mouseY = e.touches[0].pageY - windowHalfY;
}
}
function onDocumentTouchMove(e) {
if (e.touches.length === 1) {
e.preventDefault();
mouseX = e.touches[0].pageX - windowHalfX;
mouseY = e.touches[0].pageY - windowHalfY;
}
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
})();
</script>
</body>
</html>全部代码：全屏的3D悬浮粒子翻转动效
扫一扫
758
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
