/**
* 射线投射器`Raycaster`的射线拾取选中网格模型对象函数choose()
* 选中的网格模型变为半透明效果
*/
function choose(event) {
var Sx = event.clientX; //鼠标单击位置横坐标
var Sy = event.clientY; //鼠标单击位置纵坐标
//屏幕坐标转WebGL标准设备坐标
var x = (Sx / window.innerWidth) * 2 - 1; //WebGL标准设备横坐标
var y = -(Sy / window.innerHeight) * 2 + 1; //WebGL标准设备纵坐标
//创建一个射线投射器`Raycaster`
var raycaster = new THREE.Raycaster();
//通过鼠标单击位置标准设备坐标和相机参数计算射线投射器`Raycaster`的射线属性.ray
raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
//返回.intersectObjects()参数中射线选中的网格模型对象
// 未选中对象返回空数组[],选中一个数组1个元素，选中两个数组两个元素
//加上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) {
// 选中模型的第一个设置为半透明
intersects[0].object.material.transparent = true;
intersects[0].object.material.opacity = 0.6;
}
}
addEventListener('click', choose); // 监听窗口鼠标单击事件
如果是sprite的可以在页面上面加上group
