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