Three.js 快速入门教程【十八】射线拾取模型——鼠标点击屏幕选中模型或物体

请添加图片描述

系列文章目录

Three.js 快速入门教程【一】开启你的 3D Web 开发之旅
Three.js 快速入门教程【二】透视投影相机
Three.js 快速入门教程【三】渲染器
Three.js 快速入门教程【四】三维坐标系
Three.js 快速入门教程【五】动画渲染循环
Three.js 快速入门教程【六】相机控件 OrbitControls
Three.js 快速入门教程【七】常见几何体类型
Three.js 快速入门教程【八】常见材质类型
Three.js 快速入门教程【九】光源类型
Three.js 快速入门教程【十】常见的纹理类型
Three.js 快速入门教程【十一】天空盒的多种实现方式
Three.js 快速入门教程【十二】外部模型加载
Three.js 快速入门教程【十三】外部模型加载后常见的处理操作
Three.js 快速入门教程【十四】使用Stats.js监控渲染帧率和性能优化
Three.js 快速入门教程【十五】交互神器DragControls使用详解，实现对物体或模型拖拽
Three.js 快速入门教程【十六】调试神器 gui.js使用详解，可视化面板控制场景参数提高开发效率
Three.js 快速入门教程【十七】射线拾取模型——射线与射线投射器Raycaster介绍
Three.js 快速入门教程【十八】射线拾取模型——鼠标点击屏幕选中模型或物体

文章目录

系列文章目录
一、前言
二、射线拾取的核心原理回顾
三、屏幕坐标转标准设备坐标
- 3.1 屏幕坐标
- 3.2标准设备坐标
- 3.3 屏幕坐标转标准设备坐标
- - 通过clientX、clientY转换坐标
四、从摄像机位置向三维空间发射一条无限延伸的射线
五、鼠标点击拾取模型（物体）完整代码
六、总结

一、前言

在上一篇文章介绍了射线和射线投射器Raycaster使用，了解了射线拾取的核心原理。要实现鼠标点击选中模型的功能，还缺失关键的一步——如何将鼠标的2D屏幕坐标转换为三维空间坐标，并以此坐标为原点，相机与该坐标连线方向为射线方向检测这条射线与场景中模型是否相交。本教程将介绍该核心步骤实现。

二、射线拾取的核心原理回顾

将鼠标的2D屏幕坐标转换为三维空间坐标
从摄像机位置向三维空间发射一条无限延伸的射线
检测这条射线与场景中物体的交点
找出最近的碰撞物体进行处理

上篇文章已经介绍了3,4步骤实现相关知识点，本篇着重讲解1,2步骤实现过程

三、屏幕坐标转标准设备坐标

在 Three.js 等图形渲染库里，射线拾取等操作往往需要用到标准设备坐标（NDC，Normalized Device Coordinates）。而我们鼠标点击所获取到的坐标是屏幕坐标，因此需要把屏幕坐标转换为标准设备坐标。

3.1 屏幕坐标

鼠标点击事件回调对象中clientX 、clientY、offsetX、offsetY等表示坐标属性称为屏幕坐标，不同的坐标属性对应不同坐标系，不同的坐标系区别在于相对的坐标原点不同。

clientX 、clientY表示鼠标点击位置相对于浏览器窗口可视区域的坐标。浏览器窗口的左上角是坐标原点 (0, 0)，x 轴正方向向右，y 轴正方向向下

dom.addEventListener('click',function(event){console.log(event.clientX,"clientX" );console.log(event.clientY,"clientY" );
})

offsetX、offsetY表示鼠标点击位置相对于点击HTML元素内填充区域的坐标位置，HTML元素左上角为坐标原点，水平向右方向为x轴正方向，竖直向下方向为y轴正方向。

dom.addEventListener('click',function(event){console.log(event.offsetX,"offsetX" );console.log(event.offsetY,"offsetY" );
})

如下图所示：

在这里插入图片描述

当点击的HTML元素距离浏览器窗口上、左为0时，两个坐标系原点重合，clientX 、clientY和offsetX、offsetY值相同。例如three.js开发中，通常将canvas画布尺寸设置为窗口宽高并直接插入body，当点击画布此时2个坐标系重合。

3.2标准设备坐标

Three.js Canvas画布具有一个标准设备坐标系,该坐标系的坐标原点在canvas画布的正中间位置，x轴水平向右，y轴竖直向上.
标准设备坐标的范围是[-1, 1]， Canvas画布的左上角坐标是(-1, 1)，右上角坐标是(1, 1)，左下角坐标是(-1, -1)，右下角坐标是(1, -1)。

如下图所示：

在这里插入图片描述

这种归一化的坐标系统使得在不同分辨率和尺寸的屏幕上，能够以统一的方式处理图形和交互操作

3.3 屏幕坐标转标准设备坐标

在这里插入图片描述

假设画布宽高为width、height,则屏幕坐标转换为标准设备坐标计算公式如下

// 屏幕坐标转标准设备坐标
canvas.addEventListener('click',function(event){const x = (event.offsetX / width) * 2 - 1; //标准设备坐标xconst y = -(event.offsetY / height) * 2 + 1;//标准设备坐标y
})

解释：
event.offsetX / width值范围为0~1， (event.offsetX / width) * 2，值范围为0~2，(event.offsetX / width) * 2 - 1值范围为-1~1跟标准设备坐标范围一致。
同理event.offsetY / height值范围0-1，-(event.offsetY / height) * 2，值范围-2~0，-(event.offsetY / height) * 2+1值范围-1~1，因为y轴方向相反所以取相反数

而画布宽高可以通过如下方式获取：

// 获取画布宽高const width= renderer.domElement.clientWidth;const height= renderer.domElement.clientHeight;

最终为：

//渲染画布
let canvas=renderer.domElement
// 屏幕坐标转标准设备坐标
canvas.addEventListener('click',function(event){const x = (event.offsetX / canvas.clientWidth) * 2 - 1; //标准设备坐标xconst y = -(event.offsetY / canvas.clientHeight) * 2 + 1;//标准设备坐标y
})

通过clientX、clientY转换坐标

上述方式是通过offsetX 、offsetY 进行转换，也可以通过clientX、clientY计算转换
由3.1介绍我们知道了两个坐标系区别，假设渲染画布距离窗口左边距离为left，上边距离为top，能得出：

 const offsetX =clientX-leftconst offsetY =clientY-top

在这里插入图片描述

而left、top可通过DOM元素的边界矩形获取

// 获取渲染器DOM元素的边界矩形const rect = renderer.domElement.getBoundingClientRect();const left=rect.leftconst top=rect.top

最终为：

//渲染画布
let canvas=renderer.domElement
// 屏幕坐标转标准设备坐标
canvas.addEventListener('click',function(event){const rect = canvas.getBoundingClientRect();const left=rect.leftconst top=rect.topconst x = ((event.clientX-left) / canvas.clientWidth) * 2 - 1; //标准设备坐标xconst y = -((event.clientY-top) / canvas.clientHeight) * 2 + 1;//标准设备坐标y
})

四、从摄像机位置向三维空间发射一条无限延伸的射线

上一篇文章我们介绍了射线投射器（Raycaster），射线投射器实例还有一个setFromCamera方法未做介绍，它的作用是依据鼠标位置（以标准化设备坐标形式呈现）和相机信息设置射线的原点和方向。

setFromCamera(coords: Vector2, camera: Camera)

下面详细介绍其参数：

coords：该参数代表鼠标在标准化设备坐标中的位置，类型为 Vector2。
camera：此参数为场景中使用的相机对象，像 THREE.PerspectiveCamera 或 THREE.OrthographicCamera 这类

示例：

// 创建射线投射器
const raycaster = new THREE.Raycaster();
//渲染画布
let canvas=renderer.domElement
// 添加画布点击事件
canvas.addEventListener('click',function(event){
// 创建一个二维向量用于存储标准设备坐标const mouse = new THREE.Vector2();//屏幕坐标转标准设备坐标mouse.x = (event.offsetX / canvas.clientWidth) * 2 - 1; //标准设备坐标xmouse.y = -(event.offsetY / canvas.clientHeight) * 2 + 1;//标准设备坐标y// 通过鼠标位置和相机信息更新射线投射器raycaster.setFromCamera(mouse, camera);
})

最后结合模拾取模型核心原理3,4步骤就能检查鼠标点击位置发出的射线是否与模型有相交从何确定是否选中模型

五、鼠标点击拾取模型（物体）完整代码

完整示例代码——实现点击选中物体，并改变其材质为红色半透明：

import * as THREE from "three";
//引入相机控制器
import { OrbitControls } from "three/addons/controls/OrbitControls.js";// 创建场景
const scene = new THREE.Scene();// 创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,3000
);
camera.position.set(1, 3, 6);// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 2);
scene.add(ambientLight);//添加平行光
const light = new THREE.DirectionalLight(0xffffff, 2);
light.position.set(0, 2, 20);
scene.add(light);// 创建立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshLambertMaterial({ color: 0x8844aa });
const box = new THREE.Mesh(geometry, material);
box.position.set(0, 0, 0);
scene.add(box);// //创建圆柱体
const geometry2 = new THREE.CylinderGeometry(0.5, 0.5, 1);
const material2 = new THREE.MeshLambertMaterial({color: 0x0000ff,
});
const cylinder = new THREE.Mesh(geometry2, material2);
cylinder.position.set(-4, 0, 0);
scene.add(cylinder);// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);/**** 拾取模型相关代码*/// 创建射线投射器
const raycaster = new THREE.Raycaster();
// 创建一个二维向量用于存储标准设备坐标
const mouse = new THREE.Vector2();
//渲染画布
let canvas = renderer.domElement;
// 添加画布点击事件
canvas.addEventListener("click", function (event) {//屏幕坐标转标准设备坐标mouse.x = (event.offsetX / canvas.clientWidth) * 2 - 1; //标准设备坐标xmouse.y = -(event.offsetY / canvas.clientHeight) * 2 + 1; //标准设备坐标y// 通过鼠标位置和相机信息更新射线投射器raycaster.setFromCamera(mouse, camera);// 检测射线与立方体、圆柱体相交情况const intersects = raycaster.intersectObjects([box, cylinder]);//有选中处理选中逻辑if (intersects.length > 0) {// 选中的物体设置成红色半透明intersects[0].object.material = new THREE.MeshLambertMaterial({color: 0xff0000,transparent: true,opacity: 0.5,});}
});// 创建 OrbitControls 控件
const controls = new OrbitControls(camera, renderer.domElement);
// 渲染循环
function animate() {requestAnimationFrame(animate);controls.update();renderer.render(scene, camera);
}animate();

运行效果：

在这里插入图片描述

六、总结

通过本教程，你应该已经了解了射线（Ray）、射线拾取模型（Raycaster）、屏幕坐标转标准设备坐标的相关概念和实现方法，以及相关 API 的使用。射线拾取模型是 Three.js 中非常重要的一个功能，它可以为你的 3D 应用程序增添更多的交互性。希望你可以将这些知识应用到实际项目中，创造出更加精彩的 3D 场景。

更多three.js入门知识点请关注该系列教程后续的更新。