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个单位。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了vue3+ts+vant移动端H5项目搭建，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
本文主要介绍了vue3+webpack中npm发布组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-01-01
这篇文章主要介绍了vue 条件渲染v-if和v-show，在模板中，可以根据条件进行渲染。条件用到的是v-if、v-else-if以及v-else来组合实现的，有时候我们想要在一个条件中加载多个html元素，那么我们可以通过template元素上实现，下面就来看看具体实现吧2021-10-10
本文主要介绍了el-table表头文字换行的三种方式，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要为大家详细介绍了vue实现图片预览组件封装与使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了vue中关于click.stop的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
在现代前端开发中,特别是使用Vue.js进行构建时,开发者常常面临着如何更有效地管理DOM结构与组件之间的关系的问题,Vue 3引入了两个颇具魅力的概念——Teleport和Portal,本文将深入探讨这两者的不同之处,需要的朋友可以参考下2025-01-01
文章主要介绍了如何在Vue 3中使用el-table组件实现数据回显和选中功能,HTML部分展示了如何构建表格行,而JavaScript部分则通过`item`变量表示每一行的数据,并通过布尔值`true`来标记选中状态,作者通过个人经验分享,希望能为其他开发者提供参考和支持2025-12-12
这篇文章主要介绍了详解vue实现坐标拾取器功能示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-11-11
最新评论