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。

相关文章

SpringBoot3实现Gzip压缩优化的技术指南

SpringBoot3实现Gzip压缩优化的技术指南

《SpringBoot3实现Gzip压缩优化的技术指南》随着Web应用的用户量和数据量增加,网络带宽和页面加载速度逐渐成为瓶颈,为了减少数据传输量,提高用户体验,我们可以使用Gzip压缩HTTP响应,... 目录1、简述2、配置2.1 添加依赖2.2 配置 Gzip 压缩3、服务端应用4、前端应用4.1 N
阅读更多...
用js控制视频播放进度基本示例代码

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意：总结前言在javascript中控制视频播放
阅读更多...
Java利用JSONPath操作JSON数据的技术指南

Java利用JSONPath操作JSON数据的技术指南

《Java利用JSONPath操作JSON数据的技术指南》JSONPath是一种强大的工具,用于查询和操作JSON数据,类似于SQL的语法,它为处理复杂的JSON数据结构提供了简单且高效... 目录1、简述2、什么是 jsONPath？3、Java 示例3.1 基本查询3.2 过滤查询3.3 递归搜索3.4
阅读更多...
Python中随机休眠技术原理与应用详解

Python中随机休眠技术原理与应用详解

《Python中随机休眠技术原理与应用详解》在编程中,让程序暂停执行特定时间是常见需求,当需要引入不确定性时,随机休眠就成为关键技巧,下面我们就来看看Python中随机休眠技术的具体实现与应用吧... 目录引言一、实现原理与基础方法1.1 核心函数解析1.2 基础实现模板1.3 整数版实现二、典型应用场景2
阅读更多...
Java进阶学习之如何开启远程调式

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,：本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx
阅读更多...
Node.js net模块的使用示例

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服
阅读更多...
mac安装nvm(node.js)多版本管理实践步骤

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》：本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
Java深度学习库DJL实现Python的NumPy方式

Java深度学习库DJL实现Python的NumPy方式

《Java深度学习库DJL实现Python的NumPy方式》本文介绍了DJL库的背景和基本功能,包括NDArray的创建、数学运算、数据获取和设置等,同时,还展示了如何使用NDArray进行数据预处理... 目录1 NDArray 的背景介绍1.1 架构2 JavaDJL使用2.1 安装DJL2.2 基本操
阅读更多...
JS 实现复制到剪贴板的几种方式小结

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点：缺点：
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2