使用3D引擎threeJS实现星空粒子移动效果

使用3D引擎threeJS实现星空粒子移动效果的完整攻略包含以下几个步骤：

步骤一：引入three.js

首先需要在代码中引入three.js这个库，代码如下:

<script src="https://cdn.bootcdn.net/ajax/libs/three.js/105/three.min.js"></script>

在引入这个库文件之后，我们需要准备canvas元素和相应的场景、相机等对象。

步骤二：准备canvas元素和相应的场景、相机等对象

在使用three.js创建3D场景之前，需要先创建canvas和渲染器对象，其中renderer对象是three.js中三维空间显示的核心，代码如下：

<canvas id="canvas"></canvas>

<script>
const canvas = document.querySelector("#canvas");
const renderer = new THREE.WebGLRenderer({
    canvas,
    alpha: true
});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
</script>

接着需要创建scene、camera和geometry等对象，代码如下：

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1200;

const particles = new THREE.Geometry();
const material = new THREE.PointsMaterial({
    size: 5,
    color: 0xffffff
});

这里我们创建了一个相机，放置在z=1200的位置，size为5，颜色为白色的材质类型为PointsMaterial，这个类可以定义点材质的颜色、大小等，也是实现星空粒子移动效果的关键。

步骤三：创建星空粒子

接下来我们需要在场景中创建星空粒子，代码如下：

for (let i = 0; i < 10000; i++) {
  const particle = new THREE.Vector3(
    Math.random() * 2000 - 1000,
    Math.random() * 2000 - 1000,
    Math.random() * 2000 - 1000
  );
  particles.vertices.push(particle);
}
const particleSystem = new THREE.Points(particles, material);
scene.add(particleSystem);

在这段代码中，我们首先使用for循环创建了10000个不同坐标的3D向量，这些向量分别被赋予在(x,y,z)三维坐标系中(-1000<=x,y,z<=1000)的位置上，这就产生了许多随机位置的星空粒子。最后使用Points对象将这些点聚集起来加入到场景中。

步骤四：制作星空移动效果

制作星空移动效果需要实现的是整个场景中所有粒子的移动。使用requestAnimationFrame在每帧都改变每个粒子的坐标，给人以在一个巨大的空旷的宇宙中缓缓飘浮的感觉，代码如下：

function animate() {
    requestAnimationFrame(animate);

    let time = Date.now() * 0.001;

    particleSystem.rotation.x = time * 0.25;
    particleSystem.rotation.y = time * 0.5;

    for (let i = 0; i < particles.vertices.length; i++) {
        let particle = particles.vertices[i];
        if (particle.z < -1000) {
            particle.z += 2000;
        }
        particle.z -= Math.random() * 3;
    }

    particles.verticesNeedUpdate = true;

    renderer.render(scene, camera);
}

animate();

在这段代码中，每帧都改变粒子的z坐标，实现了粒子的往后移动的效果，同时也会不断的调整每个粒子的旋转角度，通过Math.random()方法生成随机变化的方式，实现星空的自然效果。

示例一

接下来，以一个示例进行说明，展示如何在不同的条件下创建和定制使用three.js库的星空场景，并创建不同的星空效果。首先，在此示例中，我们在场景中添加了灯光和背景色，代码如下：

const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector("canvas"), antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor("#000000");

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 10, 20000);
camera.position.z = 1000;

// 点光源
const light = new THREE.PointLight(0xffffff, 1, 800);
scene.add(light);

// 星空
const starsGeometry = new THREE.Geometry();
for (let i = 0; i < 10000; i++) {
  const star = new THREE.Vector3(
    Math.random() * 2000 - 1000,
    Math.random() * 2000 - 1000,
    Math.random() * 2000 - 1000
  );
  starsGeometry.vertices.push(star);
}
const starsMaterial = new THREE.PointsMaterial({
  color: 0xffffff,
  size: 5,
  opacity: 0.6
});
const starField = new THREE.Points(starsGeometry, starsMaterial);
scene.add(starField);

示例二

接下来，以一个示例进行说明，展示如何使用代码生成文本，并在three.js场景中进行显示。首先需要引入CSS3DRenderer.jslibrary，代码如下：

<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r82/three.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r82/CSS3DRenderer.js"></script>

然后我们开始创建文本内容，代码如下：

const contentDiv = document.createElement("div");
contentDiv.id = "content";
contentDiv.innerHTML = "<p>Hello World!</p>";
contentDiv.style.position = "absolute";
contentDiv.style.top = "0";
contentDiv.style.left = "0";
document.body.appendChild(contentDiv);

为了将这个div中的DOM元素添加到three.js场景中，需要将它封装为CSS3DObject对象：

const css3DObject = new THREE.CSS3DObject(contentDiv);
css3DObject.position.set(-200, 200, 100);
scene.add(css3DObject);

在这个示例中，我们创建了一个<div>，并在其中添加文本内容。然后，我们创建了一个CSS3DObject对象，并将其添加到场景中。最后通过修改css3DObject对象的position属性，实现将文本对象放置在场景中任意位置，与星空粒子效果一同实现一个多彩的三维场景。