光线投射

光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）可用于交互逻辑的实现

import * as THREE from 'three'
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
// 创建场景
const scene= new THREE.Scene()
// 创建相机
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
)
// 设置相机位置
camera.position.set(10, 10, 10)
// 将相机添加到场景中
scene.add(camera)
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
// // 设置物体材质
const cubeMaterial = new THREE.MeshBasicMaterial({ wireframe:true})
// 设置被选择后的物体材质
const yMaterial = new THREE.MeshBasicMaterial({ color:0xffff00})
// 存放小方块的数组
const cubeArr=[]
// 创建投射光线对象
const raycaster = new THREE.Raycaster();
// 鼠标的位置对象
const mouse = new THREE.Vector2()
// 循环创建1000个小方块
for(let i = -5 ;i<5;i++){
    for(let j=-5;j<5;j++){
        for(let k =-5;k<5;k++){
            const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
            cube.position.set(i,j,k)
            scene.add(cube)
            cubeArr.push(cube)
        }
    }
}
// 监听鼠标位置
window.addEventListener('click',e=> {
    // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
    //https://blog.csdn.net/xyphf/article/details/122350620
    mouse.x = (e.clientX / window.innerWidth) * 2 - 1
    // 转化y轴坐标 鼠标位置向下为正 three坐标向上为正
    mouse.y = -((e.clientY / window.innerHeight) * 2 - 1)
    // 通过摄像机和鼠标位置更新射线
    raycaster.setFromCamera(mouse, camera);
    // 计算物体和射线的焦点(检测多个物体)
    const intersects = raycaster.intersectObjects(cubeArr);
    console.log(intersects)
    for (let i = 0; i < intersects.length; i++) {
        intersects[i].object.material = yMaterial
    }
})
// 定义渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight)
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement)
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
// 阻尼效果
controls.enableDamping = true
// 渲染函数
function render() {
    renderer.render(scene, camera)
    //   渲染下一帧的时候就会调用render函数
    requestAnimationFrame(render)
}
// 调用渲染函数
render()