示例

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;/
//
// LIGHTING
//
/
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;// create shapesfor (var i = 0; i < numShapes; i++) {var geometryIndex = random(0, geometries.length - 1),geometry = geometries[geometryIndex],shape = new THREE.Mesh( geometry , material );// set a random position/rotation to startshape.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);// clone material so we can change color/opacity of this // shape independently from the restvar cloneMaterial = shape.material.clone();shape.material = cloneMaterial;shape.material.opacity = 0;shape.material.color = colors[random(0,colors.length - 1)];////// Animation ////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)
}

绚烂的纸花（Gorgeous shredded paper）相关推荐

令人头秃的集训第三周学习记录（练习题+感悟）
永动WA题机der学习摘录 (一)经典内容(课堂) 问题一:打印n个数的全排列,共n!个 Sample Input Sample Output 代码问题一de延伸:<五星填数> Samp ...
matlab拼碎纸片过程,碎纸片拼接复原模型
1. 引言破碎文件的拼接在司法物证复原.历史文献修复以及军事情报获取等领域都有着重要的应用.企事业.机关.院校和军队基于保密的需要,使用碎纸机对重要文件,单据以及材料进行销毁.一些重要的文件随着时 ...
WaWa的奇妙冒险（第三周集训自闭现场）
第三周集训自闭现场(a* ida* dbfs真的好难) (一)wlacm例题记录 A-有重复元素的排列问题 (水题,但卡我到自闭) Input Output Sample Input Sample O ...
CVPR 2011 全部论文标题和摘要
CVPR 2011 Tian, Yuandong; Narasimhan, Srinivasa G.; , ■Rectification and 3D reconstruction of curved ...
Paper：GPT-3《 Language Models are Few-Shot Learners》的翻译与解读
Paper:GPT-3< Language Models are Few-Shot Learners>的翻译与解读目录 <GPT-3: Language Models are Fe ...
Paper：GPT-3之《 Language Models are Few-Shot Learners》的翻译与解读
Paper:GPT-3之< Language Models are Few-Shot Learners>的翻译与解读目录 <GPT-3: Language Models are F ...
别光发Paper，搞点实际问题
文 / LVS 话说几个月前,我参加了一场学术大会,台上的教授不是北大.清华就是浙大.上交大,几位教授不约而同的吐槽招通信.算法和编解码的学生太难了.为什么呢?原来,先不比金融,仅仅与同是IT领域的A ...
网友们票选的2018 Best Paper，你pick谁？
整理 | 琥珀出品 | AI科技大本营不久前,Reddit 机器学习论坛上一位网友发布了一个帖子: "What is the best ML paper you read in 2018 ...
顶会paper越来越多，我该怎么看？
视学算法转载作者:王晋东顶会论文越来越多,如何阅读?中国科学院大学计算机应用技术博士王晋东给出了一些建议. 近年来,作为学术前沿研究的风向标的顶会接收的论文越来越多.例如,最近放榜的 NeurIP ...

绚烂的纸花（Gorgeous shredded paper）

绚烂的纸花（Gorgeous shredded paper）

示例

HTML

CSS

JS

绚烂的纸花（Gorgeous shredded paper）相关推荐

最新文章

热门文章