当前位置： 首页 > article >正文

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

article 2025/3/31 9:00:33

请添加图片描述

系列文章目录

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; //标准设备坐标x
    const 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; //标准设备坐标x
    const y = -(event.offsetY / canvas.clientHeight) * 2 + 1;//标准设备坐标y
})

通过clientX、clientY转换坐标

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

 const offsetX =clientX-left
 const offsetY =clientY-top

在这里插入图片描述

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

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

最终为：

//渲染画布
let canvas=renderer.domElement
// 屏幕坐标转标准设备坐标
canvas.addEventListener('click',function(event){
    const rect = canvas.getBoundingClientRect();
    const left=rect.left
    const top=rect.top
    const x = ((event.clientX-left) / canvas.clientWidth) * 2 - 1; //标准设备坐标x
    const 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; //标准设备坐标x
    mouse.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; //标准设备坐标x
  mouse.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入门知识点请关注该系列教程后续的更新。


http://www.kler.cn/a/611516.html

相关文章：

  • 【AI大模型】搭建本地大模型GPT-J：详细步骤及常见问题
  • 计算机视觉中的椭圆带权平均算法全解析
  • 【NLP 44、实践 ⑪ 用Bert模型结构实现自回归语言模型的训练】
  • Docker技术系列文章，第七篇——Docker 在 CI/CD 中的应用
  • 全息教学系统的软件开发，沉浸式数字沙盘展示系统如何改变历史教学
  • 孟德尔随机化：脑卒中研究新钥匙
  • Linux 设备分类详解：字符设备、块设备与网络设备解析
  • Java后端API限流秘籍：高并发的防护伞与实战指南
  • MySQL 5.7升级8.0报异常：ONLY_FULL_GROUP_BY
  • 飞速（FS）InfiniBand解决方案助力领先科技公司网络升级
  • playwright-go实战：自动化登录测试
  • 华为Pura先锋盛典及鸿蒙智家产品发布，空气算法重构健康家居“阔”美学
  • Linux的一些常见指令
  • 探索PyMOL新插件NRGSuite-Qt：全面提升分子对接、结合位点预测与动力学模拟的研究效率
  • 低空智能目标（无人机）管理控制系统技术详解
  • 进军场景智能体，云迹机器人又快了一步
  • 【C++网络编程】第8篇：协议设计与序列化（Protobuf、FlatBuffers）
  • Containerd+Kubernetes搭建k8s集群
  • Svelte 深度理解
  • HTML5 SVG：图形绘制的现代标准