返回

用threejs创造唯美雨幕，点亮你的视界

前端

用代码构建诗意世界：three.js 雨下场景

想象一下，在一个宁静的夜晚，你坐在窗前，被窗外的雨点轻轻拍打所吸引。雨滴在窗台上发出沙沙的声音，让人感到无比惬意。现在，让我们用代码来创造这样一个下雨场景，用 three.js 构建一个诗意的世界。

什么是 three.js？

three.js 是一款功能强大的 JavaScript 库，它可以轻松构建 3D 场景。它提供了丰富的 API 和示例，可以快速创建各种 3D 模型和动画。借助 three.js，你可以将你的创意转化为现实，让你的想象力在代码的世界中自由翱翔。

用 three.js 创建下雨场景

要使用 three.js 创建下雨场景，你需要分以下几个步骤：

  1. 创建场景 ：首先，你需要创建一个场景对象，它将包含雨滴和背景。
  2. 创建雨滴 ：接下来，你需要创建一个粒子集合，来代表雨滴。可以使用 Points 对象来创建粒子集合。
  3. 美化雨滴 ：为了让雨滴看起来更逼真，可以使用 PointsMaterial 对象给雨滴添加贴图。贴图可以让雨滴看起来更有质感和细节。
  4. 添加背景 ：为了让下雨场景更具沉浸感，可以添加一个背景，比如一个街道或者公园的背景。
  5. 添加动画 ：最后，你需要添加动画，让雨滴落下来。可以使用 TweenMax 库来实现雨滴的动画。

代码示例：

// 创建场景
const scene = new THREE.Scene();

// 创建粒子集合代表雨滴
const geometry = new THREE.Geometry();
for (let i = 0; i < 1000; i++) {
  const vertex = new THREE.Vector3();
  vertex.x = Math.random() * 200 - 100;
  vertex.y = Math.random() * 200 - 100;
  vertex.z = Math.random() * 200 - 100;
  geometry.vertices.push(vertex);
}

// 创建材质并添加贴图
const material = new THREE.PointsMaterial({
  size: 3,
  map: new THREE.TextureLoader().load('raindrop.png'),
});

// 创建粒子集合
const rain = new THREE.Points(geometry, material);

// 添加场景
scene.add(rain);

// 创建背景
const background = new THREE.Mesh(
  new THREE.PlaneGeometry(500, 500),
  new THREE.MeshBasicMaterial({
    color: 0x000000,
  })
);
background.position.z = -200;
scene.add(background);

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 500;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

// 添加到 DOM
document.body.appendChild(renderer.domElement);

// 添加动画
const animate = () => {
  requestAnimationFrame(animate);

  // 雨滴下落
  rain.position.y -= 0.1;

  // 重置雨滴位置
  if (rain.position.y < -200) {
    rain.position.y = 200;
  }

  // 渲染场景
  renderer.render(scene, camera);
};

animate();

结语

通过以上步骤，我们完成了下雨场景的创建。你可以通过调整雨滴的大小、数量、速度等参数，来改变下雨场景的视觉效果。同时，还可以添加更多的元素，比如雷电、风等，来让场景更加生动。希望大家能够通过本文，了解 three.js 的强大功能，并能够用它来创造出更多有趣的作品。

常见问题解答

1. 如何改变雨滴的大小？

material.size = 5; // 将雨滴大小设置为 5

2. 如何改变雨滴的数量？

const geometry = new THREE.Geometry();
for (let i = 0; i < 2000; i++) { ... } // 增加雨滴数量为 2000

3. 如何改变雨滴的速度？

rain.position.y -= 0.2; // 加快雨滴下落速度

4. 如何添加雷电？

const lightning = new THREE.Line(
  new THREE.Geometry(),
  new THREE.LineBasicMaterial({
    color: 0xffffff,
  })
);
lightning.position.set(0, 100, 0);
lightning.scale.set(100, 100, 100);
scene.add(lightning);

5. 如何添加风？

const wind = new THREE.Vector3(0.1, 0, 0); // 创建风向量
rain.position.add(wind); // 将风作用到雨滴上