Three.js中的Raycasting技术：实现3D场景交互事件的Raycaster详解

前言

在Web开发中，Three.js是一个极为强大的库，它让开发者能够轻松地在浏览器中创建和展示3D图形。随着3D技术在网页设计、游戏开发、数据可视化等领域的广泛应用，用户与3D场景的交互变得日益重要。而要实现这种交互，一个核心的技术就是光线投射（Raycasting）。通过Three.js提供的Raycaster类，我们可以检测鼠标或触摸事件在3D空间中的对应位置，进而实现点击、悬停等交互效果。本文将深入探讨如何使用Three.js的Raycaster来实现3D场景的交互事件。
光线投射原理及其属性介绍

通过Raycaster拾取模型进行轮廓高亮走这里>>>

什么是Raycasting？

Raycasting是一种计算机图形学技术，用于确定从一个点（通常是观察者的位置或屏幕上的某一点）发射出的光线与场景中物体的交点。在3D应用中，这一技术常用于模拟光照效果、碰撞检测以及用户交互。简单来说，当你在屏幕上点击或触摸时，Three.js会从该点向场景发射一条虚拟的射线，然后检查这条射线与场景中哪些对象相交，从而判断用户点击了哪个对象。
Three.js中的Raycasting技术：实现3D场景交互事件的Raycaster详解
这个类用于进行raycasting（光线投射）。 光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）。

Three.js中的Raycaster

在Three.js中，Raycaster类是实现这一功能的关键。它允许你创建一个射线，并提供方法来检测这个射线与场景中对象的交点。以下是使用Raycaster的基本步骤：

Raycaster实例解释

new THREE.Raycaster(origin, direction, near, far)

参数说明：

origin - 光线投射的原点，Vector3类型。
direction - 射线的方向，Vector3类型。
near - 投射近点，不能为负值，应该小于far，其默认值为0 。
far 投射远点，不能小于near，其默认值为无穷大。

射线交叉对象

创建的光线投射对象有一个intersectObject()方法用来获取射线交叉的对象，使用方法如下

const raycaster = new THREE.Raycaster(origin, direction, near, far)
const arr= raycaster.intersectObjects(object, recursive,optionalTarget)

raycaster.intersectObjects()参数

object - 要检查的是否与射线相交的对象，Object3D类型。
recursive - 是否检查所有后代，可选默认为false，Boolean类型。
optionalTarget - 可选参数，放置结果的目标数组。Array类型。若使用这个参数返回检查结果则在每次调用之前必须清空这个数组。

raycaster.intersectObjects()的返回值

Three.js中的Raycasting技术：实现3D场景交互事件的Raycaster详解

distance - 射线投射原点和相交部分之间的距离。
point - 相交部分的坐标。
face - 相交的面。
faceIndex - 相交的面的索引。
object - 相交的物体。
uv - 相交部分的点的UV坐标。

光线投射示例

Three.js中的Raycasting技术：实现3D场景交互事件的Raycaster详解

示例步骤

步骤一、创建射线

const raycaster = new THREE.Raycaster()

步骤二、用一个二维向量保存鼠标点击画布上的位置

const mouse = new THREE.Vector2(1, 1)

步骤三、监听窗口事件，将x,y轴归一化坐标，通过摄像机和鼠标的位置更新色线，计算物体和射线的焦点能不能碰到物体，碰到物体后随机改变射线照射物体的颜色。

window.addEventListener("click",(e)=>{//设置鼠标向量的x,y值,将XY轴归一化，X从-1到1，Y为从-1到1，所以除以2mouse.x = (e.clientX/window.innerWidth)*2-1mouse.y = -(e.clientY/window.innerHeight)*2+1// 通过摄像机和鼠标的位置，更新射线raycaster.setFromCamera(mouse,this.camera)//计算物体和射线的焦点能不能碰到物体const intersects = raycaster.intersectObjects([sphere1,sphere2,sphere3])if(intersects.length>0){intersects[0].object.material.color.set(this.color16())}
})
代码解释：
raycaster.setFromCamera(mouse,this.camera)

每次渲染循环中，你需要更新射线的起点（通常是相机的位置）和方向（通常是基于鼠标坐标计算出的向量）：这里，mouse是归一化设备坐标（即范围在(-1, -1)到(1, 1)之间的坐标），可以通过监听鼠标或触摸事件并使用THREE.Vector2和renderer.domElement.clientWidth/Height进行转换得到。

const intersects = raycaster.intersectObjects(scene.children, true);

使用raycaster.intersectObjects()方法来检测射线与场景中对象的交点：此方法返回一个数组，包含了所有与射线相交的对象信息。如果数组不为空，说明有对象被选中，你可以根据需要处理这些交点信息。

什么是归一化坐标：归一化坐标，是一个二维坐标，仅有X/Y两个维度，且X和Y的取值范围均为[-1, 1]，坐标原点位于three.js所创建的canvas的中心处。 ​
Three.js中的Raycasting技术：实现3D场景交互事件的Raycaster详解
归一化坐标公式：

mouse.x = ((event.clientX - container.getBoundingClientRect().left) / container.getBoundingClientRect().width) * 2 - 1;
mouse.y = - ((event.clientY - container.getBoundingClientRect().top) / container.getBoundingClientRect().height) * 2 + 1;

以上示例完整代码：

<template><div id="container"></div>
</template><script>
import * as THREE from 'three'
// webGL兼容
import WebGL from 'three/examples/jsm/capabilities/WebGL.js';
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
// 轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"
//导入RGBRload加载器
import { RGBELoader } from  "three/examples/jsm/loaders/RGBELoader.js"
//导入场景模型加载器
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader.js"
//导入模型解压器
import {DRACOLoader} from "three/examples/jsm/loaders/DRACOLoader.js"
export default {name: 'HomeView',components: {},mounted(){this.init()},data(){return {camera: null,  //相机对象scene: null,  //场景对象renderer: null,  //渲染器对象mesh: null,  //网格模型对象Meshmesh2:null,controls:null, //轨道控制器material2:null, //父元素planeMesh:null, //平面rgbeLoacer:null,}},methods:{//随机生成十六进制颜色color16(){//十六进制颜色随机var r = Math.floor(Math.random()*256);var g = Math.floor(Math.random()*256);var b = Math.floor(Math.random()*256);var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);return color;},init(){let container = document.body;//创建一个场景this.scene = new THREE.Scene()//透视摄像机this.camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,700)//创建渲染器this.renderer = new THREE.WebGLRenderer();//渲染器尺寸this.renderer.setSize( window.innerWidth,  window.innerHeight );    // 创建三个球const sphere1 = new THREE.Mesh(new THREE.SphereGeometry(1,32,32),new THREE.MeshBasicMaterial({color:0x00ff00}))sphere1.position.x = -3this.scene.add(sphere1)const sphere2 = new THREE.Mesh(new THREE.SphereGeometry(1,32,32),new THREE.MeshBasicMaterial({color:0xff0000}))sphere2.position.x = 0this.scene.add(sphere2)const sphere3 = new THREE.Mesh(new THREE.SphereGeometry(1,32,32),new THREE.MeshBasicMaterial({color:0x0000ff}))      sphere3.position.x = 3this.scene.add(sphere3)//创建射线const raycaster = new THREE.Raycaster()//用一个二维向量保存鼠标点击画布上的位置const mouse = new THREE.Vector2(1, 1)   window.addEventListener("click",(e)=>{//设置鼠标向量的x,y值,将XY轴归一化，X从-1到1，Y为从-1到1，所以除以2mouse.x = (e.clientX/window.innerWidth)*2-1mouse.y = -(e.clientY/window.innerHeight)*2+1console.log(mouse.x,mouse.y)// 通过摄像机和鼠标的位置，更新涉嫌raycaster.setFromCamera(mouse,this.camera)//计算物体和射线的焦点能不能碰到物体const intersects = raycaster.intersectObjects([sphere1,sphere2,sphere3])console.log("intersects",intersects)if(intersects.length>0){intersects[0].object.material.color.set(this.color16())}})this.scene.background=new THREE.Color(0x999999)// 设置相机位置this.camera.position.z = 15;   this.camera.position.y =2;  this.camera.position.x = 2; // 看的方向 this.camera.lookAt(0,0,0)//添加世界坐标辅助器const axesHelper = new THREE.AxesHelper(3) this.scene.add( axesHelper );//添加轨道控制器this.controls = new OrbitControls(this.camera,this.renderer.domElement)//添加阻尼带有惯性this.controls.enableDamping = true//设置阻尼系数this.controls.dampingFactor = 0.05//元素中插入canvas对象container.appendChild(this.renderer.domElement); if ( WebGL.isWebGLAvailable() ) {this.animate();} else {const warning = WebGL.getWebGLErrorMessage();document.getElementById( document.body ).appendChild( warning );}},//旋转起来animate() {this.controls.update()requestAnimationFrame( this.animate );// this.mesh.rotation.x += 0.01;// this.mesh.rotation.y += 0.01;this.renderer.render( this.scene, this.camera );}}
}
</script>

总结

通过Three.js的Raycaster，我们能够以直观且高效的方式实现3D场景中的交互事件。无论是简单的点击反馈，还是复杂的拖拽操作，Raycasting都是构建互动式3D体验不可或缺的一部分。掌握这项技术，无疑能极大提升你的3D应用或游戏的用户体验。希望本文能为你开启探索Three.js交互世界的大门，让你的3D项目更加生动有趣。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/23155.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

探索地产营销管理系统业务架构的设计与应用

探索地产营销管理系统业务架构的设计与应用

随着城市化进程的加速和人们对居住环境需求的不断提升&#xff0c;地产行业正迎来前所未有的发展机遇和挑战。在这个背景下&#xff0c;地产营销管理系统作为地产开发企业营销管理的重要工具&#xff0c;扮演着至关重要的角色。本文将深入探讨地产营销管理系统业务架构的设计与…
阅读更多...
java中的面试高频问题----2

java中的面试高频问题----2

一、进程、线程、协程有什么区别&#xff1f; 1.进程&#xff1a;进程是操作系统中独立运行的程序实例&#xff0c;每个进程都有自己的内存空间和系统资源&#xff1b;进程之间相互独立&#xff0c;每个进程有自己的内存地址空间&#xff0c;一个进程无法直接访问另一个进程的…
阅读更多...
H3C运维工程师面经

H3C运维工程师面经

H3C运维工程师面经 1、常用linux命令：top的作用1.1.系统监控与性能分析：1.2.进程管理：1.3.资源使用统计：1.4.自定义视图与交互操作：2、接触过的linux系统、小版本是多少？2.1CentOS的版本CentOS 8系列：CentOS 7系列：CentOS 6系列：2.2Ubuntu版本Ubuntu LTS版本：Ubuntu非…
阅读更多...
手机怎么压缩图片？通过三种压缩操作

手机怎么压缩图片？通过三种压缩操作

手机怎么压缩图片&#xff1f;在智能手机日益普及的今天&#xff0c;拍照分享已成为日常生活的一部分。然而&#xff0c;高质量的照片往往占用较大的存储空间&#xff0c;且在网络上传输时速度较慢。那么&#xff0c;如何在手机上压缩图片呢&#xff1f;本文将介绍三种实用的手…
阅读更多...
文件无法在当前环境下执行在 x86_64 系统上运行 ARM 可执行文件

文件无法在当前环境下执行在 x86_64 系统上运行 ARM 可执行文件

目录 遇到的问题是由于"..."文件无法在当前环境下执行。这个错误通常是因为二进制文件的格式不兼容&#xff0c;可能是因为它是为不同的架构编译的。例如&#xff0c;如果二进制文件是为 x86 架构编译的&#xff0c;但你在 ARM 设备上尝试运行它&#xff0c;就会出现…
阅读更多...
Oracle创建索引的LOGGING | NOLOGGING区别

Oracle创建索引的LOGGING | NOLOGGING区别

在Oracle中&#xff0c;创建索引时的LOGGING和NOLOGGING选项主要影响索引创建过程中产生的重做日志&#xff08;redo log&#xff09;的数量。这两个选项对于性能和数据恢复能力有着显著的影响。以下是关于这两个选项的详细解释和区别&#xff1a; LOGGING 定义&#xff1a;当…
阅读更多...
[数据集][目标检测]道路圆石墩检测数据集VOC+YOLO格式461张1类别

[数据集][目标检测]道路圆石墩检测数据集VOC+YOLO格式461张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;462 标注数量(xml文件个数)&#xff1a;462 标注数量(txt文件个数)&#xff1a;462 标注类别…
阅读更多...
Python怎么做单元测试

Python怎么做单元测试

在Python中&#xff0c;最常用的单元测试框架是unittest。以下是如何使用unittest进行单元测试的步骤&#xff1a; 导入unittest模块&#xff1a; 首先&#xff0c;你需要导入unittest模块。 import unittest创建测试类&#xff1a; 你需要创建一个继承自unittest.TestCase的类…
阅读更多...
运放应用2 - 同相放大电路

运放应用2 - 同相放大电路

1. 前置知识 同相放大电路存在 负反馈电路 &#xff0c;工作在线性区&#xff0c;可以利用 虚短 概念来分析电路。 注&#xff1a;运放的 虚断 特性是一直存在的&#xff0c;虚短 特性则需要运放工作在 线性区 有关运放的基础知识&#xff0c;可以参考我的另外一篇文章&#x…
阅读更多...
LeetCode题练习与总结：杨辉三角--118

LeetCode题练习与总结：杨辉三角--118

一、题目描述 给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]]示例 2: 输入: numRows 1 输出: [[1…
阅读更多...
【解决方案】前端React 、Vue工程如何开启GZIP压缩

【解决方案】前端React 、Vue工程如何开启GZIP压缩

在前端工程中&#xff0c;React 和 Vue 项目通常通过构建工具&#xff08;如Webpack&#xff09;进行打包&#xff0c;而服务器端配置则负责实际的GZIP压缩。以下是如何在React和Vue项目中开启GZIP压缩的一般步骤&#xff1a; React项目 使用Webpack构建&#xff1a; 如果你的…
阅读更多...
单元测试之CppTest测试框架

单元测试之CppTest测试框架

目录 1 背景2 设计3 实现4 使用4.1 主函数4.2 测试用例4.2.1 定义4.2.2 实现 4.3 运行 1 背景 前面文章CppTest实战演示中讲述如何使用CppTest库。其主函数如下&#xff1a; int main(int argc, char *argv[]) {Test::Suite mainSuite;Test::TextOutput output(Test::TextOut…
阅读更多...
Linux系统安全（用户、密码、grub引导密码、增加终端）

Linux系统安全（用户、密码、grub引导密码、增加终端）

目录 系统安全 用户安全 密码安全 PAM认证 命令的历史 用户切换 命令的执行权限 grub引导密码 增加终端 系统安全 用户安全 命令 说明 chattr i /etc/passwd chattr&#xff1a;为文件添加特殊权限 i&#xff1a;指定文件设为不可修改&#xff0c;只有root用户能为…
阅读更多...
【Centos】深度解析：CentOS下安装pip的完整指南

【Centos】深度解析：CentOS下安装pip的完整指南

【Centos】深度解析&#xff1a;CentOS下安装pip的完整指南 大家好 我是寸铁&#x1f44a; 总结了一篇【Centos】深度解析&#xff1a;CentOS下安装pip的完整指南✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 方式1(推荐) 下载get-pip.py到本地 sudo wget https://bootstrap.p…
阅读更多...
Python 机器学习 基础 之 【常用机器学习库】 NumPy 数值计算库

Python 机器学习 基础 之 【常用机器学习库】 NumPy 数值计算库

Python 机器学习 基础 之 【常用机器学习库】 NumPy 数值计算库 目录 Python 机器学习 基础 之 【常用机器学习库】 NumPy 数值计算库 一、简单介绍 二、Numpy 基础 1、安装NumPy 2、导入NumPy 3、创建数组 4、数组操作 5、常用函数 6、矩阵运算 7、广播机制 8、随机…
阅读更多...
JSP HTTP 状态码

JSP HTTP 状态码

JSP HTTP 状态码 引言 在Java Server Pages (JSP) 开发中&#xff0c;理解HTTP状态码对于创建高效、可靠的Web应用程序至关重要。HTTP状态码是服务器响应客户端请求时发送的数字代码&#xff0c;它们提供了关于请求结果的信息。本文将详细探讨JSP中常见的HTTP状态码&#xff…
阅读更多...
代理记账公司哪家好，深度剖析与选择指南

代理记账公司哪家好，深度剖析与选择指南

代理记账&#xff0c;作为企业会计管理和运营的重要环节&#xff0c;已经逐渐被越来越多的企业所重视&#xff0c;在众多的代理记账公司中&#xff0c;如何选择一家专业、高效且值得信赖的代理记账机构呢&#xff1f;以下是一些深度解析和推荐。 公司的规模 规模较大的代理记账…
阅读更多...
LeetCode-数学基础开篇

LeetCode-数学基础开篇

概念 1.实数 2.指数函数 f(x) &#xff08;a&#xff1e;0且a≠1&#xff09;【a: 底数&#xff08;常量&#xff09;&#xff0c;x: 指数&#xff08;变量&#xff09;】 特征&#xff1a;指数函数在x轴没有交点&#xff0c;是光滑的曲线 3.幂函数 f(x) 【x&#xff…
阅读更多...
Java基础之回调函数总结(八)

Java基础之回调函数总结(八)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…
阅读更多...
数据仓库介绍

数据仓库介绍

数据仓库&#xff08;Data Warehouse, DW&#xff09;是一种用于存储和管理大量业务数据的系统&#xff0c;旨在支持决策支持系统&#xff08;DSS&#xff09;和商业智能&#xff08;BI&#xff09;应用。它将来自不同来源的数据整合到一个统一的数据库中&#xff0c;以便于分析…
阅读更多...
最新文章

Copyright @ 2022~2023