176. 实战：佛光普照（六）

上节加上了飞舞的经文：

2025-08-10 17.15.24.gif

这个拉远看像不像一个花蕊：

2025-08-11 11.27.21.gif

我们可以下面加一个莲花，用这个作为花蕊，然后镜头从远到近。

一花一世界的感觉。

从 sketchfab.com 找个模型：

https://sketchfab.com/3d-models/lotus-flower-by-geometry-nodes-398b0f0eafe640a2a3dec98305a8e1c3

下载，放到 public 目录

代码里加载一下：

创建 flower.js

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/Addons.js';

const loader = new GLTFLoader();
const group = new THREE.Group();
export const loadPromise2 = loader.loadAsync("./flower.glb");

loadPromise2.then(gltf => {
    group.add(gltf.scene);

    gltf.scene.scale.setScalar(5000);
    gltf.scene.position.y = -2000;

    gltf.scene.traverse(obj => {
        if(obj.isMesh) {
            console.log(obj.name, obj);
        }
    })
});

export default group;

先改一下灯光强度以及视野范围：

之前为了让佛祖亮一点才改的这么大光照强度，现在先调小。

引入：

看下效果：

2025-08-11 12.42.54.gif

从远拉近，就可以看到莲花中的佛祖了。

我们用 gsap 来实现这个相机动画：

截屏2025-08-11 15.22.50.png

Promise.all([loadPromise2, loadPromise]).then(() => {
  gsap.to(camera.position, {
    y: 200,
    z: 600,
    ease: 'ease',
    repeat: 0,
    duration: 3,
    onUpdate() {
      const box3 = new THREE.Box3();
      box3.expandByObject(mesh);

      const center = box3.getCenter(new THREE.Vector3());
  
      camera.lookAt(center.x, center.y, center.z);
    }
  });
})

等两个模型加载完，相机位置运动到 0,200,600 的位置，然后不断更新 lookAt，看向模型中央。

2025-08-11 15.29.34.gif

然后运动到目标位置后，我们去掉莲花，并让光线逐渐变亮。

截屏2025-08-11 15.53.29.png

相机动画完成后，删除花的模型，光线强度变大。

并且之前佛光太多了，画面比较乱，我们改成 200：

截屏2025-08-11 15.55.39.png

看下效果：

2025-08-11 15.58.47.gif

现在背景色变化太突兀了，突然从紫色变成了黑色，我们也可以加一个动画过程：

const color1 = new THREE.Color('#d4b5da');
const color2 = new THREE.Color('#000000');
const obj = { percent: 0};
gsap.to(obj, {
    percent: 100,
    ease: 'none',
    repeat: 0,
    duration: 1,
    onUpdate() {
      const c = color1.clone().lerp(color2, obj.percent / 100);
      scene.background = c;
    }
});

用颜色插值函数，一秒内从 0% 到 100%，变化为另一种颜色。

看下效果：

2025-08-11 17.15.02.gif

有个背景颜色渐变后，好多了。

这样，入场动画就完成了。

案例代码上传了小册仓库

总结

这节我们给 3D 场景加上了入场动画。

找了一个花的模型，摄像机从上往下运动，运动到目标位置之后删除莲花，让灯光强度增加。

所有的动画都是用 gsap 做的。

当然，你还可以自己加上音乐。

这样，这个实战就完成了。

用到了 gsap、SpriteText、three.quarks 粒子效果、曲线 API，后期通道等，算是一个综合的小实战。

176. 实战：佛光普照（六）

总结

评论