射线拾取模型

鼠标坐标转化

// .offsetY、.offsetX以canvas画布左上角为坐标原点,单位px
const px = event.offsetX;
const py = event.offsetY;
//屏幕坐标px、py转WebGL标准设备坐标x、y
//width、height表示canvas画布宽高度
const x = (px / width) * 2 - 1;
const y = -(py / height) * 2 + 1;

!标准坐标系

canvas画布的宽度是width，.offsetX的范围是0_{width,.offsetX除以canvas画布宽度width，就可以从绝对值变成相对值，范围是0}1，相对值乘以2，范围0_{2，再减去1，范围是-1}1，刚好和canvas画布标准设备坐标的范围-1~1能够对应起来。

计算射线

//创建一个射线投射器`Raycaster`
const raycaster = new THREE.Raycaster();
//.setFromCamera()计算射线投射器`Raycaster`的射线属性.ray
// 形象点说就是在点击位置创建一条射线，用来选中拾取模型对象
raycaster.setFromCamera(new THREE.Vector2(x, y), camera);

射线交叉计算

let selectedObject = null;
const intersects = raycaster.intersectObject( group, true );

if ( intersects.length > 0 ) {

  const res = intersects.filter( function ( res ) {
    return res && res.object;
  } )[ 0 ];

  if ( res && res.object ) {
    selectedObject = res.object;
    selectedObject.material.color.set( '#f00' );
  }
}