資訊專(zhuān)欄INFORMATION COLUMN
摘要：選擇對(duì)象的本質(zhì)是從點(diǎn)擊位置發(fā)射光線，但屏幕坐標(biāo)系與坐標(biāo)系是不同的，而把屏幕的二維坐標(biāo)轉(zhuǎn)化為三維坐標(biāo)就是關(guān)鍵，做一步換算后交由的方法即可。
Three.js 選擇對(duì)象的本質(zhì)是從點(diǎn)擊位置發(fā)射光線，但屏幕坐標(biāo)系與webgl坐標(biāo)系是不同的，而把屏幕的二維坐標(biāo)轉(zhuǎn)化為三維坐標(biāo)就是關(guān)鍵，做一步換算后交由Raycaster的setFromCamera方法即可。
所以思路如下：
1.獲取屏幕坐標(biāo)(x, y)
2.換算至webgl坐標(biāo)中的(x2,y2)，此時(shí)長(zhǎng)度仍為像素單位下的長(zhǎng)度
3.由于webgl坐標(biāo)軸的范圍為(-1,1)，做個(gè)比值，稱(chēng)為標(biāo)準(zhǔn)化
4.Raycaster.setFromCamera(mouse, camera)發(fā)射射線
5.Raycaster.intersectObjects獲取射得的所有對(duì)象,再按需要操作
先對(duì)比下各坐標(biāo)軸，再按代碼分析步驟
代碼中使用了我封裝的方法，threeConf對(duì)象包含three.js的基本組件，但不影響拾取對(duì)象的邏輯，拾取的代碼于此
一、坐標(biāo)軸 1.屏幕坐標(biāo)軸即我們的屏幕的二維坐標(biāo)，矩形為我們的屏幕，左上角就是(0, 0)，長(zhǎng)度即是以px為單位
2.世界坐標(biāo)系即webgl中的坐標(biāo)系，屏幕中心為(0, 0, z)，第三個(gè)坐標(biāo)為從屏幕指向我們的z軸。三個(gè)坐標(biāo)的大小范圍為(-1,1)，如圖
這里其實(shí)還有個(gè)相機(jī)坐標(biāo)系，因?yàn)檫€沒(méi)有學(xué)習(xí)webgl或者opengl怕胡說(shuō)八道，我覺(jué)得一篇很棒的blog貼于文末
但是我們實(shí)現(xiàn)選擇拾取功能時(shí)，但單純從three.js角度來(lái)看可以不需要相關(guān)知識(shí)
全部代碼請(qǐng)看上方地址
1.坐標(biāo)標(biāo)準(zhǔn)化//1.獲取屏幕坐標(biāo)(x, y)
//2.換算至webgl坐標(biāo)中的(x2,y2)，此時(shí)長(zhǎng)度單位仍為像素
//3.由于webgl坐標(biāo)軸的范圍為(-1,1)，做個(gè)比值，稱(chēng)為標(biāo)準(zhǔn)化
//這三步后化簡(jiǎn)的式子如下，這里我們three.js的窗口為整個(gè)瀏覽器
let rayRaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
function onMouseMove(event) {
mouse.x = (event.clientX/window.innerWidth) * 2 - 1;
mouse.y = 1 -(event.clientY/window.innerHeight) * 2 ;
}
window.addEventListener("mousemove", onMouseMove, false);
x1 = event.clientX，y1 = event.clientY，即點(diǎn)擊位置，換算過(guò)程如下（這里默認(rèn)畫(huà)布寬高為瀏覽器寬高）
根據(jù)式子帶入x1與y1即可得到代碼中相同的式子
這里截取射線代碼
function render() {
//射線射出
rayRaster.setFromCamera(mouse, threeConf.camera);
//射線上的物體
let intersects = rayRaster.intersectObjects(threeConf.scene.children);
//選中另一物體的情況，仍為同一物體則不更新，這里我們只拿第一個(gè)物體
if(selectedObj !== intersects[0]){
selectedObj && selectedObj.object.material.color.set(0x87CEEB); //復(fù)原
intersects.length && intersects[0].object.material.color.set(0xff0000);
selectedObj = intersects[0];
document.body.style.cursor = "pointer";
}
//未選中物體情況
if(intersects[0] === undefined){
document.body.style.cursor = "auto";
}
threeConf.stats.update();
threeConf.renderer.render(threeConf.scene, threeConf.camera);
requestAnimationFrame(render);
}
即可
三、參考資料OpenGL.坐標(biāo)系統(tǒng)的介紹與坐標(biāo)變換的實(shí)現(xiàn)(此篇blog包含相機(jī)坐標(biāo)軸)
https://blog.csdn.net/stringN...
ThreeJS中的點(diǎn)擊與交互——Raycaster的用法
https://segmentfault.com/a/11...
Three.js Raycaster官方文檔
https://threejs.org/docs/#api...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100202.html
摘要：開(kāi)發(fā)傳送門(mén)開(kāi)發(fā)教程交互事件一頭顯與手柄開(kāi)發(fā)教程交互事件二使用開(kāi)發(fā)教程深度剖析關(guān)于的開(kāi)發(fā)調(diào)試方案以及原理機(jī)制開(kāi)發(fā)教程標(biāo)準(zhǔn)入門(mén)使用開(kāi)發(fā)場(chǎng)景的入門(mén)教程 showImg(https://segmentfault.com/img/remote/1460000011814846?w=1240&h=587); Cardboard可以說(shuō)是手機(jī)VR頭顯的元老了，狹義上指的是Google推出的一個(gè)帶有雙凸...
摘要：在文末，我會(huì)附上一個(gè)可加載的模型方便學(xué)習(xí)中文藝術(shù)字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說(shuō)是 HTML5 技術(shù)生態(tài)鏈中最為令人振奮的標(biāo)準(zhǔn)之一，它把 Web 帶入了 3D 的時(shí)代。 初識(shí) WebGL 先通過(guò)幾個(gè)使用 Web...
摘要：一般說(shuō)來(lái)，對(duì)于制圖建模軟通常使正交投影，這樣不會(huì)因?yàn)橥队岸淖兾矬w比例而對(duì)于其他大多數(shù)應(yīng)用，通常使用透視投影，因?yàn)檫@更接近人眼的觀察效果。 showImg(https://segmentfault.com/img/remote/1460000012581680?w=1920&h=1080); 1. 概述 1.1 什么是WebGL？ WebGL是在瀏覽器中實(shí)現(xiàn)三維效果的一套規(guī)范 想要使用...
摘要：使用將能夠利用硬件加速?gòu)亩岣咪秩拘阅?。這個(gè)渲染器比渲染器有更好的性能。聲明構(gòu)造器是一個(gè)可選對(duì)象，包含用來(lái)定義渲染器行為的屬性。所用的渲染上下文對(duì)象。設(shè)置背景色和背景色透明度渲染器渲染器不使用來(lái)繪制場(chǎng)景，而使用相對(duì)較慢的。 渲染器api WebGL渲染器（WebGLRenderer） WebGL渲染器使用WebGL來(lái)繪制您的場(chǎng)景，如果您的設(shè)備支持的話。使用WebGL將能夠利用GPU硬...
閱讀 5058·2021-07-25 21:37
閱讀 698·2019-08-30 15:53
閱讀 3362·2019-08-29 18:47
閱讀 696·2019-08-29 15:39
閱讀 2144·2019-08-29 13:12
閱讀 1812·2019-08-29 12:43
閱讀 3000·2019-08-26 11:52
閱讀 1899·2019-08-26 10:15
