WEB 3D技术 three.js 3D贺卡(4) 添加鼠标滚轮移动屏幕改变贺卡文字功能

我会带着你远行 2024-04-22 07:33 43阅读 0赞

好，上文 [WEB 3D技术 three.js 3D贺卡(3) 点光源灯光动画效果][WEB 3D_ three.js 3D_3_] 那么 我们来做一下 鼠标滚动相机和滚动时不同文字的切换  
![在这里插入图片描述][3a3aa2d2caba462183102cd20e6e7274.png]  
首先 我们要设置多个场景 其实也不能完全叫场景 也可以说多个位置  
反正简单说就是多个位置 展现多个场景

我们先在代码的最下面 加上一个对象数组

let scenes = [
      {
        
        text: "圣诞快乐",
        callback:() => {
        
    
        }
      },
      {
        
        text: "感谢在这么大的世界遇见了你",
        callback:() => {
        
          
        }
      },
      {
        
        text: "愿陪你去探寻世界的每一个角落",
        callback:() => {
        
          
        }
      },
      {
        
        text: "愿将天上的星星送给你",
        callback:() => {
        
          
        }
      },
      {
        
        text: "愿有人去终成眷属",
        callback:() => {
        
          
        }
      }
    ]

![在这里插入图片描述][16452463f0c6477f8ee21f54dc509aad.png]  
这里 我们写了个数组 然后里面每一个下标都是对象，对象里面 text字段是要展示的文本 然后 callback 是一个回调函数  
这里 我们数组的每一个索引 相当于一个场景

然后 我们要给一个索引值 来记录它的位置  
首先 因为我们需要一个响应式变量 vue3声明响应式变量 我们需要先导入 vue内的这个ref

import {
         ref } from "vue"

![在这里插入图片描述][4b9857e9f1a9475699f693b3d1a607ca.png]  
然后 最下面 我们声明索引

let index = ref(0);

![在这里插入图片描述][d0e83649e17a4668bf65c72784eb73e4.png]  
我们用这个索引 来记录当前所处的场景

接下来 我们来监听鼠标的一个滚轮事件  
这样写

我们监听了 wheel 鼠标滚轮事件  
然后判断如果滚轮网上滚动 就触发我们if中的逻辑 将index先加一 然后判断 如果index索引的数值已经大于了 scenes数组的长度的话 那就将 index索引值归0  
![在这里插入图片描述][5a79d26cdf434d9f825df7936a121ccd.png]  
然后 我们来写一个定义相机移动函数 用补间动画控制相机移动

// 使用补间动画移动相机
    let timeLine1 = gsap.timeline();
    let timeline2 = gsap.timeline();
    /
    / 定义相机移动函数
    function tranlateCamera(position,target) {
        
      timeLine1.to(camera.position, {
        
        x: position.x,
        y: position.y,
        z: position.z,
        duration: 1,
        ease: "power2.inOut"
      })
    
      timeline2.to(controls.target, {
        
        x: target.x,
        y: target.y,
        z: target.z,
        duration: 1,
        ease: "power2.inOut"
      })
    }

![在这里插入图片描述][0888a79a3de94976b2e04510493206f4.png]  
这里 我们 tranlateCamera 函数 接受了两个参数 position 和 target  
他们分别控制  
position用来控制 camera 相机的 position 下的 x y z 位置属性 简单说 移动相机  
target用来控制 controls控制器的 target属性的下的x y z属性 target是控制相机聚焦的点 简单说 就是你旋转整个场景 它相机聚焦的一个中心点位置

通过 补间动画对象.to 进行控制

然后 我们就来改 scenes数组  
这样写

let scenes = [
      {
        
        text: "圣诞快乐",
        callback:() => {
        
          tranlateCamera(
            new THREE.Vector3(-3.23, 3, 4.06),
            new THREE.Vector3(-8, 2, 0)
          )
        }
      },
      {
        
        text: "感谢在这么大的世界遇见了你",
        callback:() => {
        
          tranlateCamera(
            new THREE.Vector3(7, 0, 23),
            new THREE.Vector3(0, 0, 0)
          )
        }
      },
      {
        
        text: "愿陪你去探寻世界的每一个角落",
        callback:() => {
        
          tranlateCamera(
            new THREE.Vector3(10, 3, 0),
            new THREE.Vector3(5, 2, 0)
          )
        }
      },
      {
        
        text: "愿将天上的星星送给你",
        callback:() => {
        
          tranlateCamera(
            new THREE.Vector3(7, 0, 23),
            new THREE.Vector3(0, 0, 0)
          )
        }
      },
      {
        
        text: "愿有人去终成眷属",
        callback:() => {
        
          tranlateCamera(
            new THREE.Vector3(-20, 1.3, 6.6),
            new THREE.Vector3(5, 2, 0)
          )
        }
      }
    ]

我们编写了每一个下标的 callback 函数  
这里因为我们塑标滚轮事件 你每次滚动 都会调用对应下标的 callback  
![在这里插入图片描述][c5824c8c3ed646928d86a0a75677c3ee.png]  
然后 就会根据事件给的定位参数 来到对应的位置 和找到 对应的相机聚焦点

我们运行项目  
![在这里插入图片描述][4d4dde91ca064b50bd269b6be6f1892c.png]  
然后滚动鼠标滚轮 整个摄像头都会移动  
![在这里插入图片描述][4587d842ff1146218355257c00fa168c.png]  
当然 你别鼠标滚动的太频繁了，要等它整个界面移动完毕。  
不然就会上一个没执行完 你下一个又触发了 整个界面动来动去的。

那么 这里这个问题 我们就可以做个防抖  
首先 大家要清楚 我们两个补间动画给的duration 时间都是一秒  
那么 这里 如下图修改滚轮事件  
![在这里插入图片描述][65ce57eeaec04d58a36812bd414659b6.png]  
定义一个叫 isAnimate 的变量 初始值是false  
然后 如果这个值为true 我们直接 函数 return 出去 不执行下面的逻辑了 就是防止你上一个动画还没结束 下一个动画又开始了  
然后 我们 执行callback 就是开启动画后  
开启定时器 一秒之后 再将 isAnimate 赋值会false  
那就是 每次执行完 callback 后面一秒内 isAnimate 都是true  
再进入事件 都会触发到if retrun 就不会执行动画了 而 动画执行完 1秒 定时器正好也是1秒  
就会将 isAnimate 回归false 然后再次触发 就又能进来了

这样 我们整个的滚动切换就算是OK了  
![在这里插入图片描述][dbf93b95f8704e4880774b63f25e11f7.png]  
然后 我们来写这个文字的效果  
我们在 template中这样写

![在这里插入图片描述][640a5f963f6442b3a97d80ad7a054ece.png]  
这里 我们最外层元素 固定定位在页面的左上角  
然后下面 v-for循环 遍历 scenes数组  
用 index 控制 transform属性

然后 我们在屏幕上滚动鼠标滚轮  
![在这里插入图片描述][11d89d8246c240b48a30d886adf1b1ce.png]  
这边文字就会一直发生变化了  
![在这里插入图片描述][f377763d5671434db34d5590cb2f4058.png]

[WEB 3D_ three.js 3D_3_]: https://blog.csdn.net/weixin_45966674/article/details/135665320
[3a3aa2d2caba462183102cd20e6e7274.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/dd048a7509ed4b0eb2c0049ed335d855.png
[16452463f0c6477f8ee21f54dc509aad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/df6624e7532444f5a44f21ab331bd799.png
[4b9857e9f1a9475699f693b3d1a607ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/73451a5aae3b414da806e556095a61b3.png
[d0e83649e17a4668bf65c72784eb73e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/503ae1762f984fc9a2ba5e24ae7856fa.png
[5a79d26cdf434d9f825df7936a121ccd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/878c5194daba4103933002e7b5656e31.png
[0888a79a3de94976b2e04510493206f4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/e8a8284165484b26a58818920fd8cb70.png
[c5824c8c3ed646928d86a0a75677c3ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/81d35c5ca41e414fa8dd2f883a79b2df.png
[4d4dde91ca064b50bd269b6be6f1892c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/cefb84e776c44e71a38d98d52fd4d619.png
[4587d842ff1146218355257c00fa168c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/b59a119a50e641ccbd5a8a4f22a723aa.png
[65ce57eeaec04d58a36812bd414659b6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/5ff5a3d4dd5649b9a79d8b96970e81e7.png
[dbf93b95f8704e4880774b63f25e11f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/12ac83b0573a4b839e56ab797417e61e.png
[640a5f963f6442b3a97d80ad7a054ece.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/6d002ba870e9493388b6542a404879a5.png
[11d89d8246c240b48a30d886adf1b1ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/590883e8bc8947d98571b610956a385c.png
[f377763d5671434db34d5590cb2f4058.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/0f1286105cab4d08a3df9738975b5b86.png