/**
* 射線投射器`Raycaster`的射線拾取選中網(wǎng)格模型對象函數(shù)choose()
* 選中的網(wǎng)格模型變?yōu)榘胪该餍Ч? */
function choose(event) {
var Sx = event.clientX; //鼠標(biāo)單擊位置橫坐標(biāo)
var Sy = event.clientY; //鼠標(biāo)單擊位置縱坐標(biāo)
//屏幕坐標(biāo)轉(zhuǎn)WebGL標(biāo)準(zhǔn)設(shè)備坐標(biāo)
var x = (Sx / window.innerWidth) * 2 - 1; //WebGL標(biāo)準(zhǔn)設(shè)備橫坐標(biāo)
var y = -(Sy / window.innerHeight) * 2 + 1; //WebGL標(biāo)準(zhǔn)設(shè)備縱坐標(biāo)
//創(chuàng)建一個射線投射器`Raycaster`
var raycaster = new THREE.Raycaster();
//通過鼠標(biāo)單擊位置標(biāo)準(zhǔn)設(shè)備坐標(biāo)和相機參數(shù)計算射線投射器`Raycaster`的射線屬性.ray
raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
//返回.intersectObjects()參數(shù)中射線選中的網(wǎng)格模型對象
// 未選中對象返回空數(shù)組[],選中一個數(shù)組1個元素窃肠，選中兩個數(shù)組兩個元素
//加上true 代表遍歷子元素
var intersects = raycaster.intersectObjects(scene.children,true);
console.log("射線投射器返回的對象", intersects);
// console.log("射線投射器返回的對象 點point", intersects[0].point);
// console.log("射線投射器返回的對象 幾何體",intersects[0].object.geometry.vertices)
// intersects.length大于0說明幸冻，說明選中了模型
if (intersects.length > 0) {
// 選中模型的第一個設(shè)置為半透明
intersects[0].object.material.transparent = true;
intersects[0].object.material.opacity = 0.6;
}
}
addEventListener('click', choose); // 監(jiān)聽窗口鼠標(biāo)單擊事件
如果是sprite的可以在頁面上面加上group
