three.js 学习笔记 | 光线投射技术 - 包围盒(碰撞检测)

2024-04-28 09:36
文章标签 技术 学习 笔记 js 包围 碰撞检测 光线 three 投射

本文主要是介绍three.js 学习笔记 | 光线投射技术 - 包围盒(碰撞检测)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • three.js 学习笔记
    • 光线投射技术实现3D场景交互事件 THREE.Raycaster
      • 坐标系的转换
      • 案例：选中的模型变为红色
    • 包围盒Box3 - 碰撞检测
      • AABB包围盒辅助器Box3Helper
        • 案例1：创建AABB包围盒/包围球
          • computeBoundingBox与boundingBox 搭配使用，创建包围盒
          • box3的常用场景

three.js 学习笔记

光线投射技术实现3D场景交互事件 THREE.Raycaster

语法：new THREE.Raycaster()
作用：光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）
参数
origin：光线投射的原点向量。
direction：向射线提供方向的方向向量(归一化)。

向量归一化：将向量的方向保持不变，大小归一化到1。
在这里插入图片描述在这里插入图片描述

Raycaster对象的属性及方法

属性及方法参数描述
setFromCamera ( coords : Vector2, camera : Camera ) : undefinedcoords：在标准化设备坐标中鼠标的二维坐标(x,y分量在-1,1之间)
camera：射线来源的相机		使用一个新的原点和方向来更新射线
intersectObjects ( objects : Array, recursive : Boolean, optionalTarget : Array ) : Arrayobjects：检测和射线相交的一组物体。
recursive ：检测物体本身外，是否同时检测所有物体的后代。默认值为true。
optionalTarget：设置存储结果的目标数组，最后返回的也是这个数组，如果没有设置则每次调用都会初始化一个新数组。采用push的方式向数组中添加，所以如果设置的是全局数组会不断的向里面push新元素

返回值：相交对象组成的数组		检测射线与这些物体之间是否有相交点

鼠标拾取(射线追踪法)
场景最终被输出在一个画布canvas元素上，所以没办法获取鼠标hover处模型的DOM对象。
在2D中，判断鼠标是否选中的标准是鼠标位置是否在该区域中。在3D场景中，由于屏幕是2D显示的，判断选中的标准是从相机为起点位置穿过鼠标位置的射线是否也穿过模型，如果穿过则认为该模型被选中。
在这里插入图片描述

坐标系的转换

  • 三维空间的坐标系：屏幕中心为原点，坐标取值范围(-1,1)
  • 页面的二维坐标：左上角为原点，取值范围是按照屏幕大小的实际像素位置来获取(x, y)。

三维空间的坐标系(世界坐标)
屏幕中心为原点，坐标取值范围(-1,1)
在这里插入图片描述

页面的二维坐标系
左上角为原点，取值范围是按照屏幕大小的实际像素位置来获取(x, y)。
在这里插入图片描述
转换步骤

  1. 鼠标位置(x1,y1)是二维画面中的坐标位置

    鼠标位置(x1,y1) = (event.clientX, event.clientY)

  2. 在鼠标拾取时，需要将该坐标转换为中间位置(x2,y2)，该中间位置以屏幕中心为原点，实际像素为x和y

    在二维页面中，屏幕中点的位置是(innerWidth / 2， innerHeight / 2)。可以得到任意点(x1,y1)的中间位置 x2 = x1 - (innerWidth / 2)，y2 = (innerHeight / 2) - y1
    在这里插入图片描述

  3. 由于三维坐标系中x与y分量的取值范围是(-1,1)，所以需要将(x2,y2)归一化处理得到(x3,y3)

    考虑极端点`(x2,y2) = (w/2,h/2)`对应的`(x3,y3)=(1,1)` 
x3 = (x2  / （w/2）)
= （  ( x1 -  ( w/2 )  ) /  (w/2) ）
=  （2   x1 / w） - 1
= （x1 / w）* 2 - 1 
同理得到 y3 = - ( y1 /  h) * 2  + 1将x1与y1待入可得 鼠标点击位置在三维坐标系中的坐标
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

案例：选中的模型变为红色

方法：intersectObjects ( objects : Array, recursive : Boolean, optionalTarget : Array ) : Array 检测射线与这些物体之间是否有相交点
参数
objects：检测和射线相交的一组物体。
recursive ：检测物体本身外，是否同时检测所有物体的后代。默认值为true。
optionalTarget：设置存储结果的目标数组，最后返回的也是这个数组，如果没有设置则每次调用都会初始化一个新数组。采用push的方式向数组中添加，所以如果设置的是全局数组会不断的向里面push新元素
返回值：相交对象组成的数组

相交对象的属性描述
distance相机到相交对象交点的距离
face相交对象(鼠标点击的物体)面的信息
normal:Vector3相交点的法线向量
object相交对象
point:Vector3交点的坐标
uv
const sphere1 = new THREE.Mesh(new THREE.SphereGeometry(25, 32,32), new THREE.MeshBasicMaterial ({color: 0x00ff00,
}));
sphere1.position.x= -140;
scene.add(sphere1);const sphere2 = new THREE.Mesh(new THREE.SphereGeometry(25, 32,32), new THREE.MeshBasicMaterial ({color: 0x0000ff,
}));
scene.add(sphere2);const sphere3 = new THREE.Mesh(new THREE.SphereGeometry(25, 32,32), new THREE.MeshBasicMaterial ({color: 0xff00ff,
}));
sphere3.position.x= 140;
scene.add(sphere3);scene.add(new THREE.AxesHelper(100));// 创建射向
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
// 监听鼠标移动
window.addEventListener('click', (event) => {//设置鼠标在三维坐标系中的点击位置x,ymouse.x = (event.clientX / window.innerWidth) * 2 - 1;mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;console.log(mouse)
})

包围盒Box3 - 碰撞检测

包围盒是一个简单的几何空间，里面包含着复杂形状的物体。
为物体添加包围体的目的是快速的进行碰撞检测或者进行精确的碰撞检测之前进行过滤（即当包围体碰撞，才进行精确碰撞检测和处理）。

包围盒广泛地应用于①碰撞检测②摄像机视锥体的可见性判断，每一个物体都有自己的包围盒。因为包围盒一般为规则物体，因此用它来代替物体本身进行计算，会比直接用物体本身更加高效和简单。

在这里插入图片描述

常见包围盒描述特点
轴对齐包围盒（AABB)与坐标轴是对齐的，但不随物体旋转(图1刚好最小包围盒，图2老虎旋转了一个角度后，AABB包围盒便增加了较大的空隙)总是与世界坐标系(固定)的三个轴平行
有向包围盒（OBB）始终沿着物体的主成分方向生成最小的一个矩形包围盒，可以随物体旋转，可用于较精确的碰撞检测与物体局部坐标系(经常变换的坐标系)的三个轴平行

AABB包围盒辅助器Box3Helper

AABB包围盒的简单介绍
AABB盒：一个3D的AABB就是一个简单的六面体，每一边都平行于一个坐标平面，它的长、宽、高可以彼此不同。外边界是一个规整的形状，所以只需要两个坐标就能计算出该形状。
特别重要的两个顶点为：Pmin = [Xmin Ymin Zmin]，Pmax = [ Xmax Ymax Zmax](最小点一般是左后下方的点，最大点是右前上方的一个点)

AABB内的点满足以下条件
xmin≤x≤xmax
ymin≤y≤ymax
zmin≤z≤zmax

Box3的介绍
Box3类表示与三维空间中的一个轴对齐包围盒（axis-aligned bounding box，AABB
构造函数Box3( min : Vector3, max : Vector3 )

  • min:Vector3 可选,表示包围盒的下边界。 默认值是(+ Infinity, + Infinity, + Infinity )。
  • max:Vector3 可选,表示包围盒的上边界。 默认值是( - Infinity, - Infinity, - Infinity )。

AABB包围盒辅助器Box3Helper
语法：new THREE.Box3Helper( box : Box3, color : Color )
box：被三维包围盒包围的物体参数Box3
color：可选表示线框盒子的颜色， 默认为0xffff00
作用：模拟3维包围盒 Box3 的辅助对象，创建一个新的线框盒子用以表示指定的3维包围盒。
继承链：Object3D → Line → LineSegments → Box3Helper

包围球没有辅助器，通过创建球来代替辅助器。

// 获取包围球
const sphere = bufferGeometry.boundingSphere;
// 创建辅助球
let sphereHelper = new THERE.SphereGeometry(sphere.radius)
let sphereHelperMaterial = new THERE.MeshBasicMaterial();
let sphereMesh = new THERE.Mesh(sphereHelper ,sphereHelperMaterial);
sphereMesh.position.copy(sphere.center)
scene.add(sphereMesh)
案例1：创建AABB包围盒/包围球
computeBoundingBox与boundingBox 搭配使用，创建包围盒

获取包围盒Box3：bufferGeometry.boundingBox : Box3 ，获取当前 bufferGeometry 的外边界矩形，默认值是 null。
返回Box3:{max:{最大点的坐标},min:{最小点的坐标}}，

计算被包围物体的包围盒：bufferGeometry.computeBoundingBox()，计算当前几何体的边界矩形，该操作会更新已有boundingBox属性

为了可视化包围盒，我们会使用包围盒辅助器可视化包围盒，将bufferGeometry.boundingBox的值作为参数传递给包围盒辅助器Box3Helper的构造器参数。

const sphereGeometry = new THREE.SphereGeometry(50, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial();
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);
// 计算包裹盒，并将结果设置给bufferGeometry.boundingBox
sphereGeometry.computeBoundingBox()
const box3Helper = new THREE.Box3Helper( sphereGeometry.boundingBox)
scene.add(box3Helper);

在这里插入图片描述

box3的常用场景

  1. 包围盒应用与被包围三维物体同样的变化矩阵，包围盒应用变换矩阵applyMatrix4
    包围盒会受物体的形态影响，比如物体进行了变换。包围盒也需要应用同样的变换bufferGeometry.boundingBox.applyMatrix4 ( matrix : Matrix4 )

    可能包围盒根据物体顶点计算出来？但是有些变换不改变几何体的顶点信息?所以需要手动进行世界矩阵更新·

    box3.applyMatrix4 ( matrix : Matrix4 )：将参数的变换矩阵应用在当前Box3上，包围盒8个顶点都会乘以这个变换矩阵。

    // 三维物体更新世界矩阵	
mesh.updateWorldMatrix(true,true)
// box - 需要复制的包围盒 Box3  应用几何体的变化矩阵mesh.matrixWorld
box.copy( mesh.geometry.boundingBox ).applyMatrix4( mesh.matrixWorld );

  2. 让几何体居中 获取包围盒/包围球的中心位置 = 获取三维物体的中心位置
    几何体.center()：根据边界矩形将几何体居中，本质就是获取包围盒/包围球的中心位置。
    box3.getCenter ( target : Vector3 ) : Vector3：获取包围盒的中心位置。 如果指定了target ，结果将会被拷贝到target，返回中心位置。

    //1.计算几何体包围盒
bufferGeometry.computeBoundingBox()
//2.设置几何体居中
bufferGeometry.center();// 1.获取包围盒
const box = bufferGeometry.boundingBox()
// 2.获取包围盒的中心 打印法相两个值相等
const center = box .getCenter()

  3. 获取多个物体的包围盒

    思路：循环每一个几何体，获取单个的几何体包围盒不断合并成一个大包围盒
    方法：box3.union ( box : Box3 ) : this ：在 box 参数的上边界和已有box对象的上边界之间取较大者，而对两者的下边界取较小者，这样获得一个新的较大的联合盒子。
    box3.setFromObject ( object : Object3D ) : this 参数是需要计算包围盒的3D对象 Object3D。计算和世界轴对齐的一个对象 Object3D （含其子对象）的包围盒，计算对象和子对象的世界坐标变换。 该方法可能会导致一个比严格需要的更大的框。

    没理解这个是和世界轴对齐的包围盒AABB还是说物体对齐，对象和世界轴对齐是指什么意思？

    let box = new THREE.Box3
for(let i=0;i<scene.children.length;i++){// 获取包围盒的方法1// ① 获取当前几何体的包围盒  如果有场景中有其他不相关东西需要排出一下scene.children[i].geometry.computeBoundingBox();// ② 获取包围盒let box3 = scene.children[i].geometry.boundingBox;// ③ 更新世界矩阵scene.children[i].updateWorldMatrix(true,true)box3.applyMatrix4(scene.children[i].metrixWorld)// 获取包围盒的方法2//②let box3 = new THREE.Box3().setFromObject (scene.children[i])//合并包围盒box.unioin(box3);
}
// 使用包围盒辅助器显示
const box3Helper = new THREE.Box3Helper( box )
scene.add(box3Helper);

这篇关于three.js 学习笔记 | 光线投射技术 - 包围盒(碰撞检测)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/942898。

相关文章

51单片机学习记录———定时器

51单片机学习记录———定时器

文章目录 前言一、定时器介绍二、STC89C52定时器资源三、定时器框图四、定时器模式五、定时器相关寄存器六、定时器练习 前言 一个学习嵌入式的小白~ 有问题评论区或私信指出~ 提示：以下是本篇文章正文内容，下面案例可供参考 一、定时器介绍 定时器介绍：51单片机的定时器属于单片机的内部资源，其电路的连接和运转均在单片机内部完成。 定时器作用： 1.用于计数系统，可
阅读更多...
问题：第一次世界大战的起止时间是 #其他#学习方法#微信

问题：第一次世界大战的起止时间是 #其他#学习方法#微信

问题：第一次世界大战的起止时间是 A.1913 ~1918 年 B.1913 ~1918 年 C.1914 ~1918 年 D.1914 ~1919 年 参考答案如图所示
阅读更多...
[word] word设置上标快捷键 #学习方法#其他#媒体

[word] word设置上标快捷键 #学习方法#其他#媒体

word设置上标快捷键 办公中，少不了使用word，这个是大家必备的软件，今天给大家分享word设置上标快捷键，希望在办公中能帮到您！ 1、添加上标 在录入一些公式，或者是化学产品时，需要添加上标内容，按下快捷键Ctrl+shift++就能将需要的内容设置为上标符号。 word设置上标快捷键的方法就是以上内容了，需要的小伙伴都可以试一试呢！
阅读更多...
乐鑫 Matter 技术体验日｜快速落地 Matter 产品，引领智能家居生态新发展

乐鑫 Matter 技术体验日｜快速落地 Matter 产品，引领智能家居生态新发展

随着 Matter 协议的推广和普及，智能家居行业正迎来新的发展机遇，众多厂商纷纷投身于 Matter 产品的研发与验证。然而，开发者普遍面临技术门槛高、认证流程繁琐、生产管理复杂等诸多挑战。  乐鑫信息科技 (688018.SH) 凭借深厚的研发实力与行业洞察力，推出了全面的 Matter 解决方案，包含基于乐鑫 SoC 的 Matter 硬件平台、基于开源 ESP-Matter SDK 的一
阅读更多...
Tolua使用笔记（上）

Tolua使用笔记（上）

目录   1.准备工作 2.运行例子 01.HelloWorld：在C#中，创建和销毁Lua虚拟机 和 简单调用。 02.ScriptsFromFile：在C#中，对一个lua文件的执行调用 03.CallLuaFunction：在C#中，对lua函数的操作 04.AccessingLuaVariables：在C#中，对lua变量的操作 05.LuaCoroutine：在Lua中，
阅读更多...
AssetBundle学习笔记

AssetBundle学习笔记

AssetBundle是unity自定义的资源格式，通过调用引擎的资源打包接口对资源进行打包成.assetbundle格式的资源包。本文介绍了AssetBundle的生成，使用，加载，卸载以及Unity资源更新的一个基本步骤。 目录 1.定义： 2.AssetBundle的生成： 1）设置AssetBundle包的属性——通过编辑器界面 补充：分组策略 2）调用引擎接口API
阅读更多...
Javascript高级程序设计(第四版)--学习记录之变量、内存

Javascript高级程序设计(第四版)--学习记录之变量、内存

原始值与引用值 原始值：简单的数据即基础数据类型，按值访问。 引用值：由多个值构成的对象即复杂数据类型，按引用访问。 动态属性 对于引用值而言，可以随时添加、修改和删除其属性和方法。 let person = new Object();person.name = 'Jason';person.age = 42;console.log(person.name,person.age);//'J
阅读更多...
一份LLM资源清单围观技术大佬的日常；手把手教你在美国搭建「百万卡」AI数据中心；为啥大模型做不好简单的数学计算？ | ShowMeAI日报

一份LLM资源清单围观技术大佬的日常；手把手教你在美国搭建「百万卡」AI数据中心；为啥大模型做不好简单的数学计算？ | ShowMeAI日报

👀日报&周刊合集 | 🎡ShowMeAI官网 | 🧡 点赞关注评论拜托啦！ 1. 为啥大模型做不好简单的数学计算？从大模型高考数学成绩不及格说起 司南评测体系 OpenCompass 选取 7 个大模型 (6 个开源模型+ GPT-4o)，组织参与了 2024 年高考「新课标I卷」的语文、数学、英语考试，然后由经验丰富的判卷老师评判得分。 结果如上图所
阅读更多...
大学湖北中医药大学法医学试题及答案，分享几个实用搜题和学习工具 #微信#学习方法#职场发展

大学湖北中医药大学法医学试题及答案，分享几个实用搜题和学习工具 #微信#学习方法#职场发展

今天分享拥有拍照搜题、文字搜题、语音搜题、多重搜题等搜题模式，可以快速查找问题解析，加深对题目答案的理解。 1.快练题 这是一个网站 找题的网站海量题库,在线搜题,快速刷题~为您提供百万优质题库,直接搜索题库名称,支持多种刷题模式:顺序练习、语音听题、本地搜题、顺序阅读、模拟考试、组卷考试、赶快下载吧! 2.彩虹搜题 这是个老公众号了 支持手写输入，截图搜题，详细步骤，解题必备
阅读更多...
持久层 技术选型如何决策？JPA，Hibernate，ibatis(mybatis)

持久层 技术选型如何决策？JPA，Hibernate，ibatis(mybatis)

转自：http://t.51jdy.cn/thread-259-1-1.html 持久层 是一个项目 后台 最重要的部分。他直接 决定了 数据读写的性能，业务编写的复杂度，数据结构(对象结构)等问题。 因此 架构师在考虑 使用那个持久层框架的时候 要考虑清楚。 选择的 标准： 1，项目的场景。 2，团队的技能掌握情况。 3，开发周期(开发效率)。 传统的 业务系统，通常业
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2