系列文章
| 序号 | 目录 |
| 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 hash
var 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 > Position
text.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 group
particleCloud.y = 800;
group.add(particleCloud);
// Create Particle Systems
// Heart
var 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 bounds
context.beginPath();
// From http://blog.burlock.org/html5/130-paths
context.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.05
context.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 centroid
sparksEmitter.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 Particles
renderer = 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 engine
var 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: 粒子死亡后移除。
3. 用户交互
支持鼠标和触摸交互：
- 鼠标事件:
mousedown: 点击后切换粒子发射器的运行状态（开启/停止）。mousemove: 控制粒子云的旋转角度。
- 触摸事件:
touchstart和touchmove控制移动设备上的旋转交互。
通过 targetRotation 和 group.rotation.y 实现平滑旋转。
4. 动画更新
animate() 函数使用 requestAnimationFrame() 实现持续更新：
时间路径控制:
timeOnShapePath变量控制粒子沿心形路径运动，结合heartShape.getPointAt()获取路径上的点坐标。粒子更新: 每一帧调整粒子的位置，使其形成动态效果。
渲染: 调用
renderer.render()更新整个场景。
核心亮点
动态心形路径粒子: 粒子在心形路径上运动，路径通过贝塞尔曲线精确定义。
三维交互: 利用鼠标、触摸事件调整视角，增强体验感。
文本渲染: 将 3D 文本和粒子效果结合，提升视觉吸引力。
小结
该代码通过 Three.js 和 Sparks.js 实现了一个视觉效果丰富、互动性强的 3D 粒子场景，展示了动态文本和心形粒子的结合。适合用于情感表达、节日贺卡或动态网页展示场景。
写在后面
我是一只有趣的兔子，感谢你的喜欢！