使用threejs。用大量的粒子构成一个动态的3D爱心
很好的主意！以下是一个使用three.js创建动态3D爱心的简单示例：
首先，我们需要引入three.js库和一个HTML canvas元素：
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<canvas id="canvas"></canvas>
然后，在JavaScript中，我们可以创建一个场景、相机、渲染器、以及一个包含很多粒子的粒子系统：
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('canvas')
});
renderer.setSize(window.innerWidth, window.innerHeight);
const particles = new THREE.Geometry();
for (let i = 0; i < 10000; i++) {
const particle = new THREE.Vector3(
Math.random() * 200 - 100,
Math.random() * 200 - 100,
Math.random() * 200 - 100
);
particles.vertices.push(particle);
}
const particleMaterial = new THREE.PointsMaterial({
color: 0xff00ff,
size: 0.2
});
const particleSystem = new THREE.Points(particles, particleMaterial);
scene.add(particleSystem);
这里我们创建了一个包含10,000个粒子的粒子系统，每个粒子的位置随机分布在立方体内。我们使用THREE.Points类来创建粒子系统，并使用THREE.PointsMaterial来定义粒子的颜色和大小。
接下来，我们可以设置相机的位置，添加一个旋转动画，以及渲染场景：
camera.position.z = 300;
function animate() {
requestAnimationFrame(animate);
particleSystem.rotation.x += 0.001;
particleSystem.rotation.y += 0.001;
renderer.render(scene, camera);
}
animate();
最后，我们可以将粒子系统的形状改为一个爱心。为此，我们可以在粒子创建循环中添加一些代码，以限制粒子的位置只在爱心的内部。以下是修改后的代码：
const particles = new THREE.Geometry();
for (let i = 0; i < 10000; i++) {
const u = Math.random() * Math.PI * 2;
const v = Math.random() * Math.PI * 2;
const r = 100 * Math.sin(u) * Math.cos(u) * Math.sin(v) / (Math.pow(Math.sin(u), 3) + Math.pow(Math.cos(v), 3) + Math.pow(Math.sin(v), 3));
if (r < 100) {
const particle = new THREE.Vector3(
r * Math.cos(u) * Math.sin(v),
r * Math.sin(u) * Math.sin(v),
r * Math.cos(v)
);
particles.vertices.push(particle);
}
}
这里我们使用了一个参数方程来定义一个3D爱心的形状，然后在粒子创建循环中限制了粒子的位置只在爱心内部。
完整的示例代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D Heart Particles</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<canvas id="canvas"></canvas>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('canvas')
});
renderer.setSize(window.innerWidth, window.innerHeight);
const particles = new THREE.Geometry();
for (let i = 0; i < 10000; i++) {
const u = Math.random() * Math.PI * 2;
const v = Math.random() * Math.PI * 2;
const r = 100 * Math.sin(u) * Math.cos(u) * Math.sin(v) / (Math.pow(Math.sin(u), 3) + Math.pow(Math.cos(v), 3) + Math.pow(Math.sin(v), 3));
if (r < 100) {
const particle = new THREE.Vector3(
r * Math.cos(u) * Math.sin(v),
r * Math.sin(u) * Math.sin(v),
r * Math.cos(v)
);
particles.vertices.push(particle);
}
}
const particleMaterial = new THREE.PointsMaterial({
color: 0xff00ff,
size: 0.2
});
const particleSystem = new THREE.Points(particles, particleMaterial);
scene.add(particleSystem);
camera.position.z = 300;
function animate() {
requestAnimationFrame(animate);
particleSystem.rotation.x += 0.001;
particleSystem.rotation.y += 0.001;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
``
原文地址: https://www.cveoy.top/t/topic/d7Ec 著作权归作者所有。请勿转载和采集!