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

介绍 顾名思义，Raycaster 可以向特定方向投射（或发射）一条射线，并测试与它相交的对象。 您可以使用该技术来检测玩家前面是否有墙，测试激光枪是否击中了什么东西，测试当前鼠标下方是否有东西来模拟鼠标事件，以及许多其他事情。 设置 在我们的启动器中，我们有 3 个红色球体，我们将射出一条光线，看看这些球体是否相交。 创建光线投射器 实例化一个Raycaster： /*** Ra

效果： 代码： <template><div><el-container><el-main><div class="box-card-left"><div id="threejs" style="border: 1px solid red"></div><div class="box-right" style="text-align: left; padding: 10px"><div s

文章目录 0. 参考文章1. Canvas1.1 Screen Space-Overlay —— 屏幕空间覆盖模式1.2 Screen Space-Camera —— 相机模式1.3 World Space —— 世界模式 2. Canvas Scaler：控制UI画布的放大缩放的比例2.1 Constant Pixer Size —— 恒定像素2.2 Scale With Screen S