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。

相关文章

Go学习记录之runtime包深入解析

Go学习记录之runtime包深入解析

《Go学习记录之runtime包深入解析》Go语言runtime包管理运行时环境,涵盖goroutine调度、内存分配、垃圾回收、类型信息等核心功能,：本文主要介绍Go学习记录之runtime包的... 目录前言：一、runtime包内容学习1、作用：① Goroutine和并发控制：② 垃圾回收：③ 栈和
阅读更多...
Java中的登录技术保姆级详细教程

Java中的登录技术保姆级详细教程

《Java中的登录技术保姆级详细教程》：本文主要介绍Java中登录技术保姆级详细教程的相关资料,在Java中我们可以使用各种技术和框架来实现这些功能,文中通过代码介绍的非常详细,需要的朋友可以参考... 目录1.登录思路2.登录标记1.会话技术2.会话跟踪1.Cookie技术2.Session技术3.令牌技
阅读更多...
Android学习总结之Java和kotlin区别超详细分析

Android学习总结之Java和kotlin区别超详细分析

《Android学习总结之Java和kotlin区别超详细分析》Java和Kotlin都是用于Android开发的编程语言,它们各自具有独特的特点和优势,：本文主要介绍Android学习总结之Ja... 目录一、空安全机制真题 1：Kotlin 如何解决 Java 的 NullPointerExceptio
阅读更多...
使用Python获取JS加载的数据的多种实现方法

使用Python获取JS加载的数据的多种实现方法

《使用Python获取JS加载的数据的多种实现方法》在当今的互联网时代,网页数据的动态加载已经成为一种常见的技术手段,许多现代网站通过JavaScript（JS）动态加载内容,这使得传统的静态网页爬取... 目录引言一、动态 网页与js加载数据的原理二、python爬取JS加载数据的方法（一）分析网络请求1
阅读更多...
Web技术与Nginx网站环境部署教程

Web技术与Nginx网站环境部署教程

《Web技术与Nginx网站环境部署教程》：本文主要介绍Web技术与Nginx网站环境部署教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、Web基础1.域名系统DNS2.Hosts文件3.DNS4.域名注册二.网页与html1.网页概述2.HTML概述3.
阅读更多...
重新对Java的类加载器的学习方式

重新对Java的类加载器的学习方式

《重新对Java的类加载器的学习方式》：本文主要介绍重新对Java的类加载器的学习方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、介绍1.1、简介1.2、符号引用和直接引用1、符号引用2、直接引用3、符号转直接的过程2、加载流程3、类加载的分类3.1、显示
阅读更多...
Java使用WebView实现桌面程序的技术指南

Java使用WebView实现桌面程序的技术指南

《Java使用WebView实现桌面程序的技术指南》在现代软件开发中,许多应用需要在桌面程序中嵌入Web页面,例如,你可能需要在Java桌面应用中嵌入一部分Web前端,或者加载一个HTML5界面以增强... 目录1、简述2、WebView 特点3、搭建 WebView 示例3.1 添加 JavaFX 依赖3
阅读更多...
VSCode中配置node.js的实现示例

VSCode中配置node.js的实现示例

《VSCode中配置node.js的实现示例》本文主要介绍了VSCode中配置node.js的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一.node.js下载安装教程二.配置npm三.配置环境变量四.VSCode配置五.心得一.no
阅读更多...
Java学习手册之Filter和Listener使用方法

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》：本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter（过滤器）1. Filter 的工作原理2. Filter 的配置与使用二、Listen
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2