玫瑰花瓣粒子效果实现原理解析_绘制动态粒子玫瑰花-CSDN博客

本文链接：https://blog.csdn.net/lenovo96166/article/details/145659159

本文将详细介绍如何利用 Three.js 实现一个基于玫瑰花瓣形状的粒子动画效果，并对代码中的关键部分做详细解析。文章内容条理清晰、语言平实，适合各位前端开发爱好者学习参考。如果你觉得内容对你有帮助，记得关注、点赞，并在知识星球中下载完整源码。
特效视频效果展示：

1. 项目概述

本项目利用 Three.js 构建了一个动态粒子效果，其中每个粒子模拟一片玫瑰花瓣。花瓣粒子从画面上方缓缓飘落，同时具有随机的摆动与旋转效果。通过鼠标拖动和滚轮缩放，我们还实现了场景的交互控制。总体效果既有艺术感，又兼顾性能优化，适合在网页中展示高品质的粒子动画。

2. 环境搭建与基本设置

2.1 HTML 结构与样式

页面主要包含一个全屏容器 #container，同时利用 CSS 设置背景为渐变色，提升视觉效果：

<body>
  <div id="container"></div>
  <!-- 引入 three.js 库 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  ...
</body>

CSS 部分重点设置了 body 的 margin、overflow 以及背景渐变，确保粒子效果能够充满整个屏幕。

2.2 场景、相机与渲染器

我们首先创建了 Three.js 的基本元素：
场景（Scene）：所有3D对象都添加到这个场景中。
相机（Camera）：采用透视相机，并设置合适的视野角度和初始位置。
渲染器（Renderer）：创建 WebGL 渲染器，并绑定到 #container 容器上。
相关代码如下：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  60, // 视野角度
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(0, 0, 15);
const renderer = new THREE.WebGLRenderer({
    antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);

这部分代码是后续粒子动画以及交的基础。

3. 创建玫瑰花瓣几何体

为了使每个粒子具备玫瑰花瓣的形状，我们使用了 Three.js 提供的 Shape 和 ShapeGeometry 对象。利用贝塞尔曲线绘制花瓣的轮廓，形成较为真实的花瓣效果。

function createRosePetalGeometry() {
   
  const shape = new THREE.Shape();
  // 使用贝塞尔曲线绘制花瓣轮廓
  shape.moveTo(0, 0);
  shape.bezierCurveTo(2, 1, 3, 3, 0, 4);
  shape.bezierCurveTo(-3, 3, -2, 1, 0, 0);
  const geometry = new THREE.ShapeGeometry(shape);
  geometry.scale(0.1, 0.1, 0.1);
  return geometry;
}