第七章、精讲投射光线实现三维物体交互；

一、什么是光线投射 Raycaster？

       光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）。

二、完整代码；

// 目标：raycaster 射线投射器
 
// 一、导入第三方类库
// 导入three.js
import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 
// 二、创建场景、相机
// 1.创建场景
const scene = new THREE.Scene();
// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  300
);
// 3.设置相机位置
camera.position.set(0, 0, 20);
scene.add(camera);
 
// 三、创建1000个立方几何体
// 1.正方体几何体
const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
// 2.几何体材质
const material = new THREE.MeshBasicMaterial({
  wireframe: true,
});
// 3.选中物体的几何体材质
const redMaterial = new THREE.MeshBasicMaterial({
  color: "#ff0000",
});
// 4、创建1000个立方体
let cubeArr = [];
for (let i = -5; i < 5; i++) {
  for (let j = -5; j < 5; j