Vue3+Three.js實現(xiàn)為模型添加點擊事件
更新時間：2024年10月04日 10:14:15 作者：小楊同學0906
本文主要介紹了如何在Vue3和Three.js環(huán)境中為模型添加點擊事件監(jiān)聽,具體方法是利用Three.js的Vector2和Raycaster,首先,創(chuàng)建一個Vector2對象來獲取鼠標位置；然后,創(chuàng)建一個Raycaster對象來投射光線
Vue3+Three.js為模型添加點擊事件
監(jiān)聽鼠標點擊事件
使用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
}
}
}
}
// 鼠標點擊事件監(jiān)聽器
window.addEventListener('click', onMouseClick, false);通過鼠標的位置與光線的位置重合
來獲取模型信息
if (intersects.length > 0) 成立的條件下，處理點擊事件。
此處是將選中的模型組進行沿Z軸平移10個單位。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3+ts+vant移動端H5項目搭建的實現(xiàn)步驟
本文主要介紹了vue3+ts+vant移動端H5項目搭建，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
vue3+webpack中npm發(fā)布組件的實現(xiàn)
本文主要介紹了vue3+webpack中npm發(fā)布組件的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-01-01
這篇文章主要介紹了vue 條件渲染v-if和v-show，在模板中，可以根據(jù)條件進行渲染。條件用到的是v-if、v-else-if以及v-else來組合實現(xiàn)的，有時候我們想要在一個條件中加載多個html元素，那么我們可以通過template元素上實現(xiàn)，下面就來看看具體實現(xiàn)吧2021-10-10
本文主要介紹了el-table表頭文字換行的三種方式，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了淺談在不使用ssr的情況下解決Vue單頁面SEO問題(2)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖片預覽組件封裝與使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了vue中關(guān)于click.stop的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue3中的Teleport與Portal的區(qū)別分析
在現(xiàn)代前端開發(fā)中,特別是使用Vue.js進行構(gòu)建時,開發(fā)者常常面臨著如何更有效地管理DOM結(jié)構(gòu)與組件之間的關(guān)系的問題,Vue 3引入了兩個頗具魅力的概念——Teleport和Portal,本文將深入探討這兩者的不同之處,需要的朋友可以參考下2025-01-01
vue3 el-table回顯選中的數(shù)據(jù)方式
文章主要介紹了如何在Vue 3中使用el-table組件實現(xiàn)數(shù)據(jù)回顯和選中功能,HTML部分展示了如何構(gòu)建表格行,而JavaScript部分則通過`item`變量表示每一行的數(shù)據(jù),并通過布爾值`true`來標記選中狀態(tài),作者通過個人經(jīng)驗分享,希望能為其他開發(fā)者提供參考和支持2025-12-12
這篇文章主要介紹了詳解vue實現(xiàn)坐標拾取器功能示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11