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)聽(tīng),具體方法是利用Three.js的Vector2和Raycaster,首先,創(chuàng)建一個(gè)Vector2對(duì)象來(lái)獲取鼠標(biāo)位置；然后,創(chuàng)建一個(gè)Raycaster對(duì)象來(lái)投射光線
Vue3+Three.js為模型添加點(diǎn)擊事件
監(jiān)聽(tīng)鼠標(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)聽(tīng)器
window.addEventListener('click', onMouseClick, false);通過(guò)鼠標(biāo)的位置與光線的位置重合
來(lái)獲取模型信息
if (intersects.length > 0) 成立的條件下，處理點(diǎn)擊事件。
此處是將選中的模型組進(jìn)行沿Z軸平移10個(gè)單位。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli2與vue-cli3在一臺(tái)電腦共存的實(shí)現(xiàn)方法
這篇文章主要介紹了vue-cli2與vue-cli3在一臺(tái)電腦共存的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了詳解如何在nuxt中添加proxyTable代理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue實(shí)現(xiàn)滾動(dòng)鼠標(biāo)滾輪切換頁(yè)面
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滾動(dòng)鼠標(biāo)滾輪切換頁(yè)面，類(lèi)似于縱向走馬燈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Vue tagsview實(shí)現(xiàn)多頁(yè)簽導(dǎo)航功能流程詳解
基本上后臺(tái)管理系統(tǒng)都需要有多頁(yè)簽的功能，但是因?yàn)橐恍┠_手架項(xiàng)目基本都把這個(gè)功能給集成好了，導(dǎo)致在學(xué)習(xí)或者修改的時(shí)候不知道該如何下手。今天這篇文章就來(lái)聊一聊，vue-element-admin項(xiàng)目是如何實(shí)現(xiàn)多頁(yè)簽功能的2022-09-09
vue頁(yè)面切換項(xiàng)目實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的方法
這篇文章主要介紹了vue頁(yè)面切換項(xiàng)目實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue遞歸組件+Vuex開(kāi)發(fā)樹(shù)形組件Tree--遞歸組件的簡(jiǎn)單實(shí)現(xiàn)
這篇文章也是我自己開(kāi)發(fā)的從無(wú)到有的過(guò)程，所以它可以為你提供一些Tree組件開(kāi)發(fā)的思路，本文重點(diǎn)給大家介紹vue遞歸組件的簡(jiǎn)單實(shí)現(xiàn)，感興趣的朋友跟隨小編一起看看吧2019-04-04
這篇文章主要介紹了Vue props用法詳解(小結(jié)),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
在Web開(kāi)發(fā)中,跨域問(wèn)題是一大挑戰(zhàn),跨域是指網(wǎng)絡(luò)請(qǐng)求從一個(gè)域名發(fā)起,而請(qǐng)求的目標(biāo)資源位于另一個(gè)不同的域名下,通常使用Vue CLI的代理來(lái)解決跨域問(wèn)題,而在生產(chǎn)環(huán)境中,可以通過(guò)后端配置CORS或使用Nginx反向代理,或者通過(guò)服務(wù)器中轉(zhuǎn)來(lái)解決跨域問(wèn)題2023-10-10
vue項(xiàng)目中向數(shù)組添加元素的3種方式
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中向數(shù)組添加元素的3種方式,在Vue中添加元素到數(shù)組非常簡(jiǎn)單,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue截取視頻第一幀的圖片問(wèn)題,基本就是用cavas進(jìn)行繪制，解決一下跨域問(wèn)題，截視頻第一幀，然后根據(jù)視頻原本的寬高進(jìn)行繪制，最后轉(zhuǎn)一下圖片格式即可，需要的朋友可以參考下2022-11-11