利用 Three.js 实现 3D 粒子正方体效果

在这篇文章中，我将向大家展示如何使用 Three.js 创建一个带有粒子的 3D 正方体效果。通过这段代码，我们将能够在浏览器中渲染一个 3D 正方体形状，并且该正方体内部填充了大量粒子（可视化效果）。你可以通过鼠标控制视角，查看旋转的正方体。
实现效果视频如下：

这不是特效，代码实现的宇宙魔方的粒子世界

一、项目概述

我们使用了 Three.js，一个强大的 JavaScript 3D 图形库，来创建和渲染这个 3D 场景。这个项目展示了如何在 3D 空间中放置大量粒子，并且通过 OrbitControls 让用户可以旋转场景，查看 3D 物体的各个面。

二、主要功能

1. 粒子系统：在正方体的每个位置放置一个粒子，模拟一个由数千个粒子构成的 3D 正方体。
2. 自旋效果：粒子系统在场景中不断旋转，形成动态的视觉效果。
3. 视角控制：使用 OrbitControls 实现鼠标控制的自由视角，用户可以查看粒子系统的不同角度。
4. 响应式设计：支持浏览器窗口的大小调整，保证粒子系统和相机的比例始终正确。

三、实现步骤

3.1. 引入必要的库

首先，我们需要引入 Three.js 和 OrbitControls.js。Three.js 用于渲染 3D 场景，OrbitControls.js 用于实现鼠标控制的视角。

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

3.2. 设置场景、相机和渲染器

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);

这里我们创建了一个场景、一个透视相机和一个 WebGL 渲染器。相机的视场角为 75 度，渲染器会填充整个浏览器窗口。

3.3. 创建粒子系统

粒子系统由大量的点（粒子）构成。我们通过 BufferGeometry 来设置粒子的位置，并将其存储在 Float32Array 中。

const particleCount = 50000;
const particles = new THREE.BufferGeometry();
const particlePositions = new Float32Array(particleCount * 3);

const size = 20;
const spacing = 1;
let index = 0;

for (let x = -size / 2; x <= size / 2; x += spacing) {
    for (let y = -size / 2; y <= size / 2; y += spacing) {
        for (let z = -size / 2; z <= size / 2; z += spacing) {
            if (index < particleCount) {
                particlePositions[index * 3] = x;
                particlePositions[index * 3 + 1] = y;
                particlePositions[index * 3 + 2] = z;
                index++;
            }
        }
    }
}

particles.setAttribute('position', new THREE.BufferAttribute(particlePositions, 3));

在上述代码中，我们使用三个嵌套的循环来生成正方体内部的每个粒子的坐标，并存入 particlePositions 数组。

3.4. 粒子材质

我们为粒子选择了一个简单的点材质（PointsMaterial），设置其颜色为白色，大小为 0.05，并启用了大小衰减效果。

const particleMaterial = new THREE.PointsMaterial({
    color: 0xffffff,
    size: 0.05,
    sizeAttenuation: true
});

const particleSystem = new THREE.Points(particles, particleMaterial);
scene.add(particleSystem);

3.5. 相机位置与视角控制

为了让场景呈现出一个合适的视角，我们将相机的位置设置为 (x: -30, y: 20, z: 50)。通过 OrbitControls，我们能够实现鼠标控制视角的功能。

const controls = new THREE.OrbitControls(camera, renderer.domElement);
camera.position.z = 50;
camera.position.y = 20;
camera.position.x = -30;
camera.lookAt(0, 0, 0);

3.6. 动画与渲染

为了让粒子系统旋转并持续渲染，我们需要一个动画循环。每一帧中，我们会对粒子系统进行旋转，并更新相机的视角。

function animate() {
    requestAnimationFrame(animate);
    particleSystem.rotation.y += 0.003;
    controls.update();
    renderer.render(scene, camera);
}

animate();

3.7. 处理窗口大小调整

为了让视图在窗口大小调整时仍然保持合适的比例，我们添加了 resize 事件监听器。

window.addEventListener('resize', () => {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
});

四、效果展示

当你运行这段代码时，浏览器会显示一个旋转的 3D 粒子正方体。通过鼠标，你可以自由旋转视角，观察不同角度下的粒子分布和正方体的形状。这个效果非常适合用于展示粒子系统或者创建动态的 3D 艺术效果。

五、总结

这篇教程展示了如何使用 Three.js 实现一个简单的粒子正方体效果。通过对粒子的控制、视角控制和窗口自适应等特性的结合，能够为用户提供一个生动且互动的 3D 体验。对于有兴趣深入学习 Three.js 的开发者，这个项目是一个很好的起点。

如果大家有任何问题或想法，欢迎在评论区留言讨论！