当前位置：首页 > news >正文

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

news 2025/6/22 20:09:41

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

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

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

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

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

import { ref } from "vue"

在这里插入图片描述
然后最下面我们声明索引

let index = ref(0);

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

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

window.addEventListener(// 监听用户鼠标滚轮事件"wheel", (e)=>{// 判断是否是向上滚轮if(e.deltaY > 0) {// 将index的索引值加一index.value++;// 判断 如果 index 的索引值 已经大于 scenes数组的长度了if(index.value > scenes.length - 1) {//将index 索引值归0index.value = 0;}}scenes[index.value].callback();}
)

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

// 使用补间动画移动相机
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"})
}

在这里插入图片描述
这里我们 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
在这里插入图片描述
然后就会根据事件给的定位参数来到对应的位置和找到对应的相机聚焦点

我们运行项目
在这里插入图片描述
然后滚动鼠标滚轮整个摄像头都会移动

当然你别鼠标滚动的太频繁了，要等它整个界面移动完毕。
不然就会上一个没执行完你下一个又触发了整个界面动来动去的。

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

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

<divclass="scenes"style="position: fixed;left: 0;top: 0;z-index: 10;pointer-events: none;transition: all 1s;"
><divv-for="item in scenes":key="item.text"style="width: 100vw;height: 100vh":style="{transform: `translate3d(0, ${-index * 100}vh,0)`}"><h1style="padding:100px 50px; font-size: 50px; color: #fff">{{ item.text }}</h1></div>
</div>