threeJS射线拾取机制及案例
前言
在浏览器中浏览三维图形的时候，有时想要与三维图形之间做一些点击事件和交互操作，其中比较常用的一个解决方案就是使用Raycaster对象来实现（射线拾取）。
基础知识
- 世界坐标系：webGL中，世界坐标系是以屏幕中心为原点(0, 0, 0)，且是始终不变的。面对屏幕时，右边是x正轴，上面是y正轴，由屏幕内指向屏幕外的是z正轴。
- 屏幕坐标系：webGL的重要功能之一就是将三维的世界坐标经过变换、投影等计算，最终计算出它在显示设备上对应的位置，这个位置就称为设备坐标，也就是二维坐标。
- 视点坐标系： 是以视点（照相机）为原点，以视线的方向为Z轴正方向的坐标系。
原理
利用webGL，既可以将三维坐标换算为二维坐标，也可以将二维坐标换算成三维坐标。webGL会将世界坐标先换算到视点坐标，然后进行裁剪，只有在视线范围之内的场景才会进入下一阶段的计算。
效果图1
- 图中圆柱体是演示拾取的三维图形；
- 图中绿、红、蓝三条轴线分别代表三维坐标中的Y正轴、X正轴和Z正轴；
- 图中蓝色五角形，其实是由视点（照相机）坐标出发，以鼠标点击位置为正方向，绘制的一条箭头图形，代表绘制的射线,五角形中心即鼠标点击位置。
当鼠标点击圆柱体边缘以外时，圆柱体材质颜色没有发生变化，说明此时鼠标点击位置并没有拾取到圆柱体。
效果图2
当鼠标点击圆柱体边缘以外时，圆柱体材质颜色发生了变化，说明此时鼠标点击位置已经拾取到了圆柱体，并在控制台打印出了圆柱体的mesh对象，并可以对它进行操作。
演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>钉钉分享</title>
<!--threejs版本是71版本-->
<script src="three.js"></script>
</head>
<body style="margin: 0;overflow: hidden;">
<!-- 输出容器 -->
<div id="webgl-output"></div>
<!-- 操作代码 -->
<script>
// 声名Threejs对象(场景、相机、渲染器)
var scene, camera, renderer;
// 初始化
function init() {
// 添加浏览器窗口大小监听事件(画布自适应方法onResize)
window.addEventListener('resize', onResize, false);
// 鼠标点击拾取
document.addEventListener('click', initRay, false);
// 创建场景
scene = new THREE.Scene();
// 创建相机(设置相机位置，设置相机朝向)
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(10, 50, 50);
camera.lookAt(scene.position);
// 创建渲染器
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth, window.innerHeight);
// 创建辅助轴线
var axis = new THREE.AxisHelper(100);
scene.add(axis);
// 添加图形---圆柱体
let _radius = 5;
var cylinderGeometry = new THREE.CylinderGeometry(_radius, _radius, 20, 40, 40);
var cylinderMaterial = new THREE.MeshBasicMaterial({ color: 0x765432 });
var cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
scene.add(cylinder);
// 将图形输出到页面
document.getElementById('webgl-output').appendChild(renderer.domElement);
// 逐帧绘制方法
function renderScene() {
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
// 开启渲染
renderScene();
}
// 画布自适应
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// 射线拾取
function initRay(event) {
// 获取画布
let mainCanvas = document.querySelector("#webgl-output canvas");
// 将屏幕坐标转为标准设备坐标(支持画布非全屏的情况)
let x = ((event.clientX - mainCanvas.getBoundingClientRect().left) / mainCanvas.offsetWidth) * 2 - 1; // 设备横坐标
let y = -((event.clientY - mainCanvas.getBoundingClientRect().top) / mainCanvas.offsetHeight) * 2 + 1; // 设备纵坐标
let standardVector = new THREE.Vector3(x, y, 1); // 设备坐标
// 标准设备坐标转为世界坐标
let worldVector = standardVector.unproject(camera);
// 射线投射方向单位向量(worldVector坐标减相机位置坐标)
let ray = worldVector.sub(camera.position).normalize();
// 绘制射线
drawRay(scene, camera.position, ray);
// 创建射线投射器对象
let rayCaster = new THREE.Raycaster(camera.position, ray);
// 返回射线选中的对象数组(第二个参数默认值是false，意为是否遍历图形内部的所有子图形)
let intersects = rayCaster.intersectObjects(scene.children, true);
if (intersects.length > 0) {
// 射线拾取的首个对象
let currObj = intersects[0];
console.log(currObj);
// 改变被拾取对象的材质颜色(随机)
let currcolor = `rgb(${Math.floor(Math.random() * 256).toString()},${Math.floor(Math.random() * 256).toString()},${Math.floor(Math.random() * 256).toString()})`
currObj.object.material.color.set(currcolor);
}
}
// 绘制射线(箭头射线)
function drawRay(scene, start, dir) {
let prevRay = scene.getObjectByName("customRay");
if (prevRay) {
scene.remove(prevRay);
}
let arrow = new THREE.ArrowHelper(dir, start, 1000, 0x0000ff);
arrow.name = "customRay";
scene.add(arrow);
}
// 初始化
window.onload = init();
</script>
</body>
</html>
