HTML旋转爱心

系列文章

序号	目录
1	HTML满屏跳动的爱心（可写字）
2	HTML五彩缤纷的爱心
3	HTML满屏漂浮爱心
4	HTML情人节快乐
5	HTML蓝色爱心射线
6	HTML跳动的爱心（简易版）
7	HTML粒子爱心
8	HTML蓝色动态爱心
9	HTML跳动的爱心（双心版）
10	HTML橙色动态粒子爱心
11	HTML旋转爱心
12	HTML爱情树
13	HTML3D相册
14	HTML旋转相册
15	HTML基础烟花秀
16	HTML炫酷烟花秀
17	HTML粉色烟花秀
18	HTML新春烟花
19	HTML龙年大吉
20	HTML音乐圣诞树
21	HTML大雪纷飞
22	HTML想见你
23	HTML元素周期表
24	HTML飞舞的花瓣
25	HTML星空特效
26	HTML黑客帝国字母雨
27	HTML哆啦A梦
28	HTML流星雨
29	HTML沙漏爱心
30	HTML爱心字母雨
31	HTML爱心流星雨
32	HTML生日蛋糕
33	HTML3D旋转相册
34	HTML流光爱心
35	HTML满屏飘字
36	HTML飞舞爱心
37	HTML雪花圣诞树

系列文章

写在前面

完整代码

代码分析

写在后面

写在前面

HTML语言实现旋转爱心的完整代码。

完整代码

<!DOCTYPE html>
<html lang="en"><head><title>Love</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><style>body {font-family: Monospace;background-color: #f0f0f0;margin: 0px;overflow: hidden;}</style>
</head><body><script src="js/nb.js"></script><script src="js/Projector.js"></script><script src="js/CanvasRenderer.js"></script><script src="js/tween.min.js"></script><script src="js/Sparks.js"></script><!-- load the font file from canvas-text --><script src="js/helvetiker_regular.typeface.js"></script><script>var container;var camera, scene, renderer;var group, text, plane;var targetRotation = 0;var targetRotationOnMouseDown = 0;var mouseX = 0;var mouseXOnMouseDown = 0;var windowHalfX = window.innerWidth / 2;var windowHalfY = window.innerHeight / 2;var heartShape, particleCloud, sparksEmitter, emitterPos;var _rotation = 0;var timeOnShapePath = 0;init();animate();function init() {container = document.createElement('div');document.body.appendChild(container);//相机camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);camera.position.set(0, 150, 800);//场景scene = new THREE.Scene();group = new THREE.Group();scene.add(group);// Get text from hashvar string = "Love";var hash = document.location.hash.substr(1);if (hash.length !== 0) {string = hash;}var text3d = new THREE.TextGeometry(string, {size: 80,height: 20,curveSegments: 2,font: "helvetiker"});text3d.computeBoundingBox();var centerOffset = -0.35 * (text3d.boundingBox.max.x - text3d.boundingBox.min.x);var textMaterial = new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff, overdraw: 0.5 });text = new THREE.Mesh(text3d, textMaterial);// Potentially, we can extract the vertices or faces of the text to generate particles too.// Geo > Vertices > Positiontext.position.x = centerOffset;text.position.y = 100;text.position.z = 0;text.rotation.x = 0;text.rotation.y = Math.PI * 2;group.add(text);particleCloud = new THREE.Object3D(); // Just a groupparticleCloud.y = 800;group.add(particleCloud);// Create Particle Systems// Heartvar x = 0, y = 0;heartShape = new THREE.Shape();heartShape.moveTo(x + 25, y + 25);heartShape.bezierCurveTo(x + 25, y + 25, x + 20, y, x, y);heartShape.bezierCurveTo(x - 30, y, x - 30, y + 35, x - 30, y + 35);heartShape.bezierCurveTo(x - 30, y + 55, x - 10, y + 77, x + 25, y + 95);heartShape.bezierCurveTo(x + 60, y + 77, x + 80, y + 55, x + 80, y + 35);heartShape.bezierCurveTo(x + 80, y + 35, x + 80, y, x + 50, y);heartShape.bezierCurveTo(x + 35, y, x + 25, y + 25, x + 25, y + 25);var hue = 0;var hearts = function (context) {context.globalAlpha = 0.5;var x = 0, y = 0;context.scale(0.05, -0.05); // Scale so canvas render can redraw within boundscontext.beginPath();// From http://blog.burlock.org/html5/130-pathscontext.bezierCurveTo(x + 2.5, y + 2.5, x + 2.0, y, x, y);context.bezierCurveTo(x - 3.0, y, x - 3.0, y + 3.5, x - 3.0, y + 3.5);context.bezierCurveTo(x - 3.0, y + 5.5, x - 1.0, y + 7.7, x + 2.5, y + 9.5);context.bezierCurveTo(x + 6.0, y + 7.7, x + 8.0, y + 5.5, x + 8.0, y + 3.5);context.bezierCurveTo(x + 8.0, y + 3.5, x + 8.0, y, x + 5.0, y);context.bezierCurveTo(x + 3.5, y, x + 2.5, y + 2.5, x + 2.5, y + 2.5);context.fill();context.lineWidth = 0.5; //0.05context.stroke();}var setTargetParticle = function () {var material = new THREE.SpriteCanvasMaterial({program: hearts});material.color.setHSL(hue, 1, 0.75);hue += 0.001;if (hue > 1)hue -= 1;particle = new THREE.Sprite(material);particle.scale.x = particle.scale.y = Math.random() * 40 + 40;particleCloud.add(particle);return particle;};var onParticleCreated = function (p) {p.target.position.copy(p.position);};var onParticleDead = function (particle) {particle.target.visible = false;particleCloud.remove(particle.target);};sparksEmitter = new SPARKS.Emitter(new SPARKS.SteadyCounter(160));emitterpos = new THREE.Vector3();sparksEmitter.addInitializer(new SPARKS.Position(new SPARKS.PointZone(emitterpos)));sparksEmitter.addInitializer(new SPARKS.Lifetime(0, 2));sparksEmitter.addInitializer(new SPARKS.Target(null, setTargetParticle));sparksEmitter.addInitializer(new SPARKS.Velocity(new SPARKS.PointZone(new THREE.Vector3(0, -50, 10))));// TOTRY Set velocity to move away from centroidsparksEmitter.addAction(new SPARKS.Age());//sparksEmitter.addAction(new SPARKS.Accelerate(0.2));sparksEmitter.addAction(new SPARKS.Move());sparksEmitter.addAction(new SPARKS.RandomDrift(50, 50, 2000));sparksEmitter.addCallback("created", onParticleCreated);sparksEmitter.addCallback("dead", onParticleDead);sparksEmitter.addCallback("updated", function (particle) {particle.target.position.copy(particle.position);});sparksEmitter.start();// End Particlesrenderer = new THREE.CanvasRenderer();renderer.setClearColor(0xf0f0f0);renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);container.appendChild(renderer.domElement);document.addEventListener('mousedown', onDocumentMouseDown, false);document.addEventListener('touchstart', onDocumentTouchStart, false);document.addEventListener('touchmove', onDocumentTouchMove, false);//window.addEventListener('resize', onWindowResize, false);}function onWindowResize() {windowHalfX = window.innerWidth / 2;windowHalfY = window.innerHeight / 2;camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}//document.addEventListener('mousemove', onDocumentMouseMove, false);function onDocumentMouseDown(event) {event.preventDefault();mouseXOnMouseDown = event.clientX - windowHalfX;targetRotationOnMouseDown = targetRotation;if (sparksEmitter.isRunning()) {sparksEmitter.stop();} else {sparksEmitter.start();}}function onDocumentMouseMove(event) {mouseX = event.clientX - windowHalfX;targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;}function onDocumentTouchStart(event) {if (event.touches.length == 1) {event.preventDefault();mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;targetRotationOnMouseDown = targetRotation;}}function onDocumentTouchMove(event) {if (event.touches.length == 1) {event.preventDefault();mouseX = event.touches[0].pageX - windowHalfX;targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;}}//function animate() {//更新场景requestAnimationFrame(animate);render();}function render() {timeOnShapePath += 0.0337;if (timeOnShapePath > 1)timeOnShapePath -= 1;// TODO Create a PointOnShape Action/Zone in the particle enginevar pointOnShape = heartShape.getPointAt(timeOnShapePath);emitterpos.x = pointOnShape.x * 5 - 100;emitterpos.y = -pointOnShape.y * 5 + 400;// Pretty cool effect if you enable this// particleCloud.rotation.y += 0.05;group.rotation.y += (targetRotation - group.rotation.y) * 0.05;renderer.render(scene, camera);}</script></body></html>

代码分析

这段代码使用了 Three.js 和 Sparks.js 进行 3D 渲染和粒子特效创建，其核心功能是生成一个动态心形粒子效果，并结合“Love”文本渲染，实现互动的 3D 场景。以下是详细的分解与分析：

HTML 结构

页面头部:
- 使用了 <meta> 设置编码为 UTF-8，支持视口适配移动设备。
- 引入内联样式表，设置 body 背景色和无滚动属性。
核心 JavaScript 文件:
- nb.js、Projector.js、CanvasRenderer.js: 提供 Three.js 的扩展功能和基础渲染器（CanvasRenderer 用于非 WebGL 的情况下）。
- tween.min.js: 动画库，提供平滑过渡的时间控制。
- Sparks.js: 粒子系统的实现，定义了粒子的生命周期、位置和行为。
- helvetiker_regular.typeface.js: 引入 Three.js 字体文件，用于生成 3D 文本。

JavaScript 核心逻辑

1. 初始化场景

通过 init() 函数初始化 Three.js 场景，包括以下部分：

相机（camera）: 使用 PerspectiveCamera 设置透视投影，相机位置 (0, 150, 800)。
场景（scene）: 通过 Scene() 创建场景对象，添加子对象 group（用于管理场景内的物体）。
文本渲染: 利用 TextGeometry 和字体 helvetiker 创建 “Love” 文本，并设置:
- 尺寸：80。
- 厚度：20。
- 颜色随机。文本被添加到 group，并设定其位置 (x: centerOffset, y: 100, z: 0)。

2. 粒子系统

代码中定义了一个粒子云 particleCloud，粒子的行为和特效通过 Sparks.js 实现：

心形路径（heartShape）: 使用 Three.Shape() 定义一个心形路径，结合 bezierCurveTo() 创建心形曲线。
粒子行为:
- 每个粒子通过 SpriteCanvasMaterial 渲染，附加一个绘制心形的 program。
- 粒子大小随机，范围在 40 至 80。
- 粒子被添加到 particleCloud。
粒子发射器（sparksEmitter）:
- 使用 SPARKS.SteadyCounter 控制每秒 160 粒子。
- 初始化器包括：
  - 位置：Position 定义初始点为心形路径点。
  - 生命期：Lifetime 设置粒子存活时间为 0 至 2 秒。
  - 速度：Velocity 定义粒子向下漂移 (0, -50, 10)。
- 行为动作：
  - Age：控制粒子的生命周期。
  - Move：移动粒子。
  - RandomDrift：随机漂移，增强动态效果。
- 注册回调：
  - created: 每创建一个粒子时更新位置。
  - dead: 粒子死亡后移除。