绚烂的纸花(Gorgeous shredded paper)
示例
HTML
<h1>ABC</h1>
CSS
body {
background: #333;
}
h1 {
font-family: helvetica, arial, sans-serif;
font-size: 1em;
font-weight: 400;
text-transform: uppercase;
color: #ddd;
text-align: center;
letter-spacing: 1px;
position: absolute;
top: 60%;
left: 0;
width: 100%;
outline: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
JS
var scene, camera, renderer,
width = window.innerWidth,
height = window.innerHeight,
aspect = width / height,
timing = 1.5,
numShapes = 20,
geometries = [
new THREE.BoxGeometry(1, 1, 1),
new THREE.TetrahedronGeometry(1, 0),
new THREE.OctahedronGeometry(1, 0),
new THREE.IcosahedronGeometry(1, 0)
],
colors = [
new THREE.Color(0xffff00),
new THREE.Color(0xffff66),
new THREE.Color(0xffffaa)
],
material = new THREE.MeshLambertMaterial({ color: 0xffff00 }),
shapes = [];
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, aspect, .1, 1000);
renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
camera.position.z = 0;
renderer.setSize( width, height );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setClearColor( 0xffffff, 0);
renderer.shadowMap.enabled = true;
renderer.shadowMapSoft = true;
camera.add(new THREE.AmbientLight(0xFFFFFF));
var light, backlight, droplight;
light = new THREE.DirectionalLight(0xffffff, 1.8);
light.position.set(60, 100, 20);
scene.add(light)
backlight = new THREE.DirectionalLight(0xffffff, 1.8);
backlight.position.set(-60, 100, 20)
scene.add(backlight)
droplight = new THREE.DirectionalLight(0xffffff, 1.8);
droplight.position.set(0, -50, 0)
scene.add(droplight)
document.body.appendChild(renderer.domElement);
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
function explode (e) {
e.preventDefault()
var xPos = (e.pageX - width / 2) / 15,
yPos = (e.pageY - height / 2) / -15;
for (var i = 0; i < numShapes; i++) {
var geometryIndex = random(0, geometries.length - 1),
geometry = geometries[geometryIndex],
shape = new THREE.Mesh( geometry , material );
shape.position.x = xPos + random(-2, 2);
shape.position.y = yPos + random(-2, 2);
shape.position.z = -20;
shape.rotation.x = random(0, 1);
shape.rotation.y = random(0, 1);
var cloneMaterial = shape.material.clone();
shape.material = cloneMaterial;
shape.material.opacity = 0;
shape.material.color = colors[random(0,colors.length - 1)];
TweenMax.set(shape.scale, {
x: 0,
y: 0,
z: 0
});
TweenMax
.to(shape.scale, timing, {
bezier: {
curviness: 1.25,
values: [
{ x: 1.2, y: 1.2 , z: 1.2 },
{ x: .8, y: .8, z: .8 },
{ x: .2, y: .2, z: .2 },
{ x: 0, y: 0 , z: 0 }
]
}
});
TweenMax
.to(shape.material, timing, {
bezier: {
curviness: 1.25,
values: [
{ opacity: 1 },
{ opacity: 1 },
{ opacity: .4 },
{ opacity: 0, }
]
},
onComplete: () => {
scene.remove(shape);
}
});
TweenMax.to(shape.position, timing, {
x: xPos + random(-10, 10),
y: yPos + random(-10, 10),
ease: Cubic.easeOut
});
TweenMax.to(shape.rotation, timing, {
y: random(-10, 10),
x: random(-10, 10),
ease: Cubic.easeOut
});
shapes.push(shape);
scene.add(shape);
}
}
document.addEventListener('click', explode)
document.addEventListener('touchstart', explode)
function random(min, max) {
return Math.floor(Math.random() * (1 + max - min) + min)
}