three.jsgsap滚动交互网页实现 2-创建文字并添加离开动画

news2025/1/12 15:56:46

添加动画
让聚光灯的角度随着下滑增大，展示完整的场景

    const container = document.querySelector("#container");

    gsap.to(light, {
        angle: 0.7,
        scrollTrigger: {
            trigger: container,
            start: 0,
            end: innerHeight,
            scrub: 1
        },
    });

这样下滑一个屏幕高度聚光灯的角度会增加到0.7 ，并且上滑会降到0.3
如图下滑后显示完整场景
在这里插入图片描述

添加文本
文字的创建可参考之前的博客three.js 置换贴图 alpha贴图的妙用 - 3D文字不引入字体文件
使用其中的CanvasFontMesh类通过canvas创建文字

添加一个title “HELLO😄” 并添加到一个Group中
每个文字x轴累加排列
最后将这个group向左移动到适当的位置

    const title = ["H", "E", "L", "L", "O", "😄"];
    const titleGroup = new THREE.Group();

    title.forEach((t, i) => {
        const font = new CanvasFontMesh(t);
        font.mesh.scale.setScalar(0.3);
        font.mesh.position.x += i * 0.5;
        font.mesh.material.transparent = true;
        titleGroup.add(font.mesh);
    });
    titleGroup.position.x = -1.3;
    helper.add(titleGroup);

在这里插入图片描述
同理加入描述文本

    const desc = ["滚", "动", "浏", "览"];
    const descGroup = new THREE.Group();

    desc.forEach((t, i) => {
        const font = new CanvasFontMesh(t);
        font.mesh.scale.setScalar(0.1);
        font.mesh.material.transparent = true;
        font.mesh.position.x += i * 0.3;
        descGroup.add(font.mesh);
    });
    descGroup.position.x = -0.5;
    descGroup.position.y -= 1;
    descGroup.position.z = 1;
    helper.add(descGroup);

在这里插入图片描述
接下来设置文字和背景线条的动画
在聚光灯显示出来之后线条向前走
设置线条group的z轴到170 超出屏幕不可见

gsap.to(group.position, 
	{
      z: 170,
      duration: 1,
      scrollTrigger: {
          trigger: container,
          start: innerHeight,
          end: innerHeight * 2,
          scrub: 1,
      },
    });

在线条的入场动画完成后将其加入，以免两次设置z轴在进入页面时滚动条有高度的情况下z轴位置冲突

helper.loadGltf("/models/line_bg.glb").then((gltf) => {
		//...
        gsap.to(group.position, {
            duration: 1,
            z: 0,
            onComplete: () => {
                gsap.to(group.position, {
                    z: 170,
                    duration: 1,
                    scrollTrigger: {
                        trigger: container,
                        start: innerHeight,
                        end: innerHeight * 2,
                        scrub: 1,
                    },
                });
            },
        });
    });

在这里插入图片描述
文字透明
创建一个函数将内部mesh同意opacity

    function setGroupOpacity(object3D: Object3D, opacity: number) {
        object3D.traverse((obj) => {
            if (obj.type == "Mesh") {
                obj.material.opacity = opacity;
            }
        });
    }

将创建的两组文字opacity设置为0

    setGroupOpacity(titleGroup, 0);
    setGroupOpacity(descGroup, 0);

在聚光灯扩大角度是时候显示文本
使用scrollTrigger的onUpdate回调函数设置值

gsap.to(light, {
        angle: 0.7,
        scrollTrigger: {
            trigger: container,
            start: 0,
            end: innerHeight,
            scrub: 1,
            onUpdate: ({ progress }) => {
                setGroupOpacity(titleGroup, progress);
                setGroupOpacity(descGroup, progress);
            },
        },
    });

在背景线条离场时淡出文本

onComplete: () => {
     gsap.to(group.position, {
         z: 170,
         duration: 1,
         scrollTrigger: {
             trigger: container,
             start: innerHeight,
             end: innerHeight * 2,
             scrub: 1,
             onUpdate: ({ progress }) => {
                 setGroupOpacity(titleGroup, 1 - progress);
                 titleGroup.position.z = progress * -4;
                 setGroupOpacity(descGroup, 1 - progress);
                 descGroup.position.z = progress * -4;
             },
         },
     });
 },