HTML5 & Three.js 爱心雨粒的妙笔丹青

HTML5 的问世，为网页世界带来了前所未有的可能性。在 Three.js 的加持下，Canvas 摇身一变成为一幅数字画布，让我得以挥洒创意，用代码谱写一场唯美浪漫的视觉盛宴——手写爱心雨。

从舞台到渲染

场景可以类比为世界大舞台，相机就是你的眼睛，渲染器则担当着大脑的角色，将你所见化为屏幕上的图像。在动笔之前，需要设定边界的宽高，以保证爱心在屏幕内反复运动。

爱心的笔触

要画出惟妙惟肖的爱心，需要确定远近端点，就像控制一支画笔的起点和终点。通过调整这些端点，可以呈现出不同形态的爱心，或圆润饱满，或纤细修长。

爱意的流动

为了让爱心雨动感十足，需要赋予它们生命力。通过设定爱心的运动轨迹和速度，我可以让它们在屏幕上自由流动，宛若一场视觉交响曲。

重复利用的巧思

为了优化性能，我采用了重复利用爱心的策略。当爱心超出边界时，我会将其重置到屏幕边缘，实现无缝衔接，让爱意绵绵不绝。

代码的魅力

这一场爱心雨的背后，是 Three.js 代码的巧妙编织。通过控制粒子系统，我可以定义爱心的数量、颜色、透明度，让每一颗爱心都独具个性。

感受爱意

用 Three.js 手写爱心雨的体验，就像用代码谱写一首浪漫的乐章。每一个跳动的爱心，都是我对世界的爱意表达。通过屏幕传递的不仅仅是图像，更是一份份真挚的情感。

代码实现

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.Geometry();

for (let i = 0; i < 1000; i++) {
  const x = Math.random() * 2 - 1;
  const y = Math.random() * 2 - 1;
  const z = Math.random() * 2 - 1;
  const particle = new THREE.Vector3(x, y, z);
  geometry.vertices.push(particle);
}

const material = new THREE.PointsMaterial({
  size: 0.1,
  color: 0xff0000
});

const particles = new THREE.Points(geometry, material);
scene.add(particles);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);

  particles.rotation.x += 0.01;
  particles.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();