Vue3+Three.js实现为模型添加点击事件
更新时间：2024年10月04日 10:14:15 作者：小杨同学0906
本文主要介绍了如何在Vue3和Three.js环境中为模型添加点击事件监听,具体方法是利用Three.js的Vector2和Raycaster,首先,创建一个Vector2对象来获取鼠标位置；然后,创建一个Raycaster对象来投射光线
Vue3+Three.js为模型添加点击事件
监听鼠标点击事件
使用const mouse = new THREE.Vector2();鼠标位置；
使用Raycaster射线投射器，光线的位置。
// 射线投射器
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const onMouseClick =(event) => {
// 计算鼠标点击位置
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
// 更新射线投射方向
raycaster.setFromCamera(mouse, camera);
// 计算射线投射的物体交点
const intersects = raycaster.intersectObjects(scene.children, true);
if (intersects.length > 0) {
// 点击到模型时的处理
const selectedObject = intersects[0].object;
// 检查点击的对象是否为模型
if (selectedObject.name) {
if (selectedObject.parent.position.z === 0) {
selectedObject.parent.position.z += 10
}else {
selectedObject.parent.position.z -= 10
}
}
}
}
// 鼠标点击事件监听器
window.addEventListener('click', onMouseClick, false);通过鼠标的位置与光线的位置重合
来获取模型信息
if (intersects.length > 0) 成立的条件下，处理点击事件。
此处是将选中的模型组进行沿Z轴平移10个单位。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue-cli2与vue-cli3在一台电脑共存的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了详解如何在nuxt中添加proxyTable代理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了vue实现滚动鼠标滚轮切换页面，类似于纵向走马灯，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
基本上后台管理系统都需要有多页签的功能，但是因为一些脚手架项目基本都把这个功能给集成好了，导致在学习或者修改的时候不知道该如何下手。今天这篇文章就来聊一聊，vue-element-admin项目是如何实现多页签功能的2022-09-09
这篇文章主要介绍了vue页面切换项目实现转场动画的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
这篇文章也是我自己开发的从无到有的过程，所以它可以为你提供一些Tree组件开发的思路，本文重点给大家介绍vue递归组件的简单实现，感兴趣的朋友跟随小编一起看看吧2019-04-04
这篇文章主要介绍了Vue props用法详解(小结),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
在Web开发中,跨域问题是一大挑战,跨域是指网络请求从一个域名发起,而请求的目标资源位于另一个不同的域名下,通常使用Vue CLI的代理来解决跨域问题,而在生产环境中,可以通过后端配置CORS或使用Nginx反向代理,或者通过服务器中转来解决跨域问题2023-10-10
这篇文章主要给大家介绍了关于vue项目中向数组添加元素的3种方式,在Vue中添加元素到数组非常简单,文中通过代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue截取视频第一帧的图片问题,基本就是用cavas进行绘制，解决一下跨域问题，截视频第一帧，然后根据视频原本的宽高进行绘制，最后转一下图片格式即可，需要的朋友可以参考下2022-11-11
最新评论