我在B站录制视频啦——RayCaster原理实现

简介: 前言之前做了一期关于B站的视频,反响效果还不错。感谢各位小伙伴的支持,但是我是个追求原理的工程师, three.js 射线检测到底是怎么去实现的,我🤔还是决定用简短的时间,带大家回顾下。到底是怎么实现的,本篇文章阅读大概5分钟你就能掌握。图片B站🔍喜欢图形的Fly背景如何知道鼠标所在位置是否存在图形,转换问题角度来看可以看做从鼠标所处位置发出一根射线,这根射线是否与三角形相交,换而言之即为「鼠标所在位置在一个三角形内是否存在投影的一点?」图片投影图思路解析根据上述描述可知,我们的真实需求是需要判断鼠标所在位置是否在三角形内,这里我们介绍一个最快的方法,我们可以以鼠标

前言



之前做了一期关于B站的视频,反响效果还不错。感谢各位小伙伴的支持,但是我是个追求原理的工程师, three.js 射线检测到底是怎么去实现的,我🤔还是决定用简短的时间,带大家回顾下。到底是怎么实现的,本篇文章阅读大概5分钟你就能掌握。




背景



如何知道鼠标所在位置是否存在图形,转换问题角度来看可以看做从鼠标所处位置发出一根射线,这根射线是否与三角形相交,换而言之即为「鼠标所在位置在一个三角形内是否存在投影的一点?」


image.png


投影图


思路解析



根据上述描述可知,我们的真实需求是需要判断鼠标所在位置是否在三角形内,这里我们介绍一个最快的方法,我们可以以鼠标所在点为origin,三角形a,b,c三点作为条件


步骤1


(设置前置变量,计算点origin到三角形顶点向量与三条边的向量):


image.png


image-20210811210122868


步骤2


(计算点到边与边的叉积):


image.png


image-20210811210157500


步骤3


(判断3个叉积值是否同向):若 P1,P2,P3P_1,P_2,P_3P1,P2,P3 的正负号一致,则说明射线与三角形相交


解释说明



向量的叉乘可判断向量方向,以 P1P_1P1 这个结果为例,若为0说明共线,若小于0垂直向内,若大于0说明垂直向外,一个点是否在三角形内部可以分别计算三个叉乘结果,如果在三角形内部则必定说明三个方向一定正负同号,异号则表示点在某条边的另外一侧


其他方法



  1. 判断某一点在三角形还有「重心坐标表示法」,该种解法是构造以鼠标为起点发出的射线,方向为正的参数方程,如果射线与三角形相交,则说明三角形内必有一点为三角形与射线的交点,需要联立射线参数方程与三角形重心坐标参数方程做等式求解,此处不另外展开说明


  1. 通常在求解鼠标所在位置是否存在图形时,不会采用直接求解射线与三角形是否相交的解法,因为一个复杂的几何表示可能有几千上万个三角形面片,计算量太大影响性能,通常会「采用包围盒计算方法」,虽然存在一定误差,但是能够大量的减少计算,性能十分可观


相关文章
|
自然语言处理 JavaScript
vue element plus Config Provider 全局配置
vue element plus Config Provider 全局配置
407 0
|
机器学习/深度学习 人工智能 定位技术
别的AI还在打游戏,这个AI已经当上“超级马里奥”游戏策划了|GECCO最佳论文
AI打游戏已经不是什么新鲜事了,“沉迷”Dota 2、星际争霸、LOL的AI一个接一个的出现。
1705 1
|
Shell Android开发 开发工具
Android虚拟机 USB转串口调试方法
     有时候需要在虚拟机调试串口,首先安装串口的驱动程序(不知道的话可以用驱动精灵),然后打开设备管理器找到驱动,查看驱动使用的端口(比如COM3),虚拟机需要在命令行启动:  将SDK下的tools文件夹加入path中,重启explorer。
1477 0
|
11天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1239 5
|
10天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1219 87
|
11天前
|
云栖大会
阿里云云栖大会2025年9月24日开启,免费申请大会门票,速度领取~
2025云栖大会将于9月24-26日举行,官网免费预约畅享票,审核后短信通知,持证件入场
1800 13
|
20天前
|
人工智能 运维 安全