Three.js 3D特效示例

2024-01-02 Three.js 3D 3D特效示例 936 0

Three.js 是一个用于创建 3D 场景和对象的 JavaScript 库。它提供了丰富的 API 来创建各种 3D 特效。以下是一些 Three.js 3D 特效示例：

粒子特效

粒子特效是 Three.js 中常用的一种 3D 特效。它可以用于模拟烟雾、火焰、爆炸等效果。

以下是一个使用 Three.js 创建粒子特效的示例：

// 创建一个粒子系统
var particleSystem = new THREE.ParticleSystem(new THREE.Vector3(0, 0, 0), 1000);

// 设置粒子参数
particleSystem.emitter.direction.set(0, 0, 1);
particleSystem.emitter.gravity.set(0, 0, -10);
particleSystem.emitter.particleCount = 1000;
particleSystem.emitter.particleLifespan = 2;
particleSystem.emitter.particleSize = 1;
particleSystem.emitter.particleColor = new THREE.Color("red");

// 添加粒子系统到场景中
scene.add(particleSystem);

运行该代码，将会看到一个红色的烟雾效果。

光照特效

光照是 Three.js 中另一种常用的 3D 特效。它可以用于改变 3D 对象的视觉效果。

以下是一个使用 Three.js 创建光照特效的示例：

// 创建一个点光源
var pointLight = new THREE.PointLight(0xffffff, 1, 100);

// 将点光源添加到场景中
scene.add(pointLight);

运行该代码，将会看到一个白色的点光源。

镜面反射特效

镜面反射是 Three.js 中常用的一种 3D 特效。它可以用于模拟镜面或玻璃的效果。

以下是一个使用 Three.js 创建镜面反射特效的示例：

// 创建一个镜面材质
var mirrorMaterial = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  shininess: 100,
  refractionRatio: 0.95,
});

// 创建一个球体
var sphere = new THREE.Mesh(new THREE.SphereGeometry(1, 16, 16), mirrorMaterial);

// 将球体添加到场景中
scene.add(sphere);

运行该代码，将会看到一个镜面球体。

阴影特效

阴影是 Three.js 中常用的一种 3D 特效。它可以用于模拟光线照射到物体后产生的阴影效果。

以下是一个使用 Three.js 创建阴影特效的示例：

// 创建一个平行光源
var directionalLight = new THREE.DirectionalLight(0xffffff, 1);

// 创建一个阴影投射器
var shadowMap = new THREE.OrthographicShadowMap(100, 100, 1, 10);

// 将阴影投射器添加到光源中
directionalLight.shadowMap = shadowMap;

// 将光源添加到场景中
scene.add(directionalLight);

运行该代码，将会看到一个球体产生的阴影。

以上只是 Three.js 3D 特效的一些示例。Three.js 还提供了许多其他的 3D 特效，如模糊特效、扭曲特效、粒子爆炸特效等。开发者可以根据自己的需求，使用 Three.js 来创建各种 3D 特效。