粒子3d球形 three.js

### 使用 Three.js 实现 3D 球形粒子效果 为了创建一个具有吸引力的 3D 球形粒子效果，可以利用 `THREE.BufferGeometry` 和 `THREE.Points` 对象。下面提供了一种方法来构建这样的视觉体验。 #### 导入必要的模块 首先确保项目环境中已经包含了 Three.js 的库文件，并引入任何额外所需的组件： ```javascript import * as THREE from 'three'; // 如果需要轨道控制或其他附加功能，则需单独导入 import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; ``` #### 初始化场景、相机与渲染器 建立基本框架以便后续操作可以在其中进行： ```javascript const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); new OrbitControls(camera, renderer.domElement); // 添加交互控制器 ``` #### 定义球形分布的粒子系统 接下来重点在于如何布置这些粒子形成球状结构。这里采用随机位置的方式，在单位半径范围内均匀撒布大量顶点数据作为粒子的位置坐标。 ```javascript function generateSphericalParticles(radius, count) { const positions = []; for (let i = 0; i < count; ++i) { const phi = Math.acos(-1 + (2 * i) / count); const theta = Math.sqrt(count * Math.PI) * phi; positions.push( radius * Math.cos(theta) * Math.sin(phi), radius * Math.sin(theta) * Math.sin(phi), radius * Math.cos(phi) ); } return new Float32Array(positions); } ``` 此函数基于斐波那契网格算法生成近似于球面上均匀分布的点集[^1]。 #### 设置材质属性及组合成最终对象 为每一个粒子指定外观特性（比如颜色），并通过 `THREE.PointsMaterial` 将其应用于整个集合之上；最后把准备好的几何形状连同材料一起传递给 `THREE.Points` 类实例化出完整的粒子群组。 ```javascript const particleCount = 8000; const geometry = new THREE.BufferGeometry(); geometry.setAttribute('position', new THREE.Float32BufferAttribute(generateSphericalParticles(1, particleCount), 3)); const material = new THREE.PointsMaterial({ size: 0.03, color: '#ff6f61', }); const particles = new THREE.Points(geometry, material); scene.add(particles); ``` 上述代码片段展示了怎样配置单个粒子的颜色以及尺寸等样式选项。 #### 动画循环更新显示画面 为了让这个静态模型变得生动起来，还需要编写动画逻辑不断刷新视图中的每一帧图像直至停止条件满足为止。 ```javascript function animate() { requestAnimationFrame(animate); // 更新时间戳或者其他动态变化的状态 renderer.render(scene, camera); } animate(); // 启动动画过程 ``` 这段脚本负责定期调用浏览器内置的方法去触发重绘事件，从而达到流畅播放的效果。