光线投射
大约 2 分钟约 449 字...
光线投射用于进行鼠标拾取(在三维空间中计算出鼠标移过了什么物体)可用于交互逻辑的实现
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()