Three 之 three.js （webgl）绘制物体模型尺寸虚线包围框工具简单封装 DashLinesBoxTool

最新推荐文章于 2025-04-24 08:54:08 发布
最新推荐文章于 2025-04-24 08:54:08 发布
阅读量1.9k 收藏 7
点赞数 2
分类专栏： ThreeJS 文章标签： javascript webgl 前端 模型尺寸 虚线框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u014361280/article/details/127445508
版权
本文介绍了如何使用three.js封装一个简单绘制物体模型尺寸虚线包围框工具DashLinesBoxTool。主要涉及计算物体长宽高、构建BufferGeometry以及使用LineSegments和LineDashedMaterial创建虚线。还提到了使用注意事项和效果预览，提供了实现案例的步骤及关键代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Three 之 three.js （webgl）绘制物体模型尺寸虚线包围框工具简单封装 DashLinesBoxTool

目录

Three 之 three.js （webgl）绘制物体模型尺寸虚线包围框工具简单封装 DashLinesBoxTool

一、简单介绍

二、实现原理

三、注意事项

四、效果预览

五、效果案例实现步骤

六、关键代码

一、简单介绍

Three js 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。

本节介绍， three.js （webgl） 中绘制物体模型尺寸虚线包围框工具简单封装 DashLinesBoxTool，主要是给实物绘制线框，有点像AI 识别正方形包裹框的效果。其中，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。

二、实现原

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Three.js 基础入门--第05课：基础功能之 Material 材质
liuhao9999的博客
04-11 314
上一篇我们讲解了模型的形状，本文我们讲解下模型的表现，也就是我们看到的的模型外观——材质。简单的说，就是物体看起来是什么质地。材质可以看成是材料和质感的结合。在渲染程序中，它是表面各种可视属性的结合，这些可视属性是指表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。Three.js 给我们封装好了大部分的材质效果，避免我们使用复杂的 Shader 语言自己去实现。接下来我们先介绍下 Material 常用的一些属性和方法。
threejs--01整体api整理
墨迹斑斑的老墙
04-14 1473
掌握3d知识，整体掌握threejs的基本内容，根据需求选择合适的api，快速上手
THREE.JS绘制虚线
jarisMA的博客
08-29 3611
THREE.JS绘制虚线 发布时间：2018-10-11 17:23:50 var lineGeometry = new THREE.Geometry();//生成几何体 lineGeometry.vertices.push(new THREE.Vector3(0, 1000, 5));//线段的两个顶点 lineGeometry.vertices.push(new THREE....
ThreeJs中虚线线框实现
最新发布
qq_47976220的博客
04-24 183
ThreeJs虚线线条效果
threejs 绘制多段虚线
liwenhui的博客
03-11 3563
threejs绘制多段虚线 在三维的webgl类库threejs下，绘制多段实线没有问题；使用同样的方式绘制多段虚线却出现了问题。简单说明一下，虚线绘制时，类库的方法是计算相邻两个端点的距离，然后生成虚线段，所以在绘制多段虚线时，需要重复端点一次。下面是参考的代码： var getDashedLine = function ( points, opt ) { if ( !p...
ThreeJS绘制流动的虚线效果
yue1241630499的博客
01-21 6629
Threejs绘制等距流动线 three.js flow line Three中LineMaterial中支持将线渲染为虚线样式，通过在LineMaterial中引入时间，可以使虚线动起来，产生流动效果。具体效果图如下： LineMaterial Three中绘制线，是采用instance方式来绘制的，每个线段作为一个instance进行绘制，每个instance通过着色器来生成虚线效果。 绘制LineGeometry时,LineMaterial中可以通过指定dashed来将线样式渲染为虚线。直接打
three.js 包围盒
yinge0508的博客
03-09 506
想要显示包围盒的样子；需要借助 Box3Helper 辅助显示；
基于three.js开发可视化应用经验总结
lovelygugu的博客
04-26 5028
文章目录背景简介技术方案介绍及对比WebglThree.jsWEBGL和Three.js的关系具体应用过程星空背景流线汇聚效果行政分区环形选择器Three.js 中使用TWEEN插件实现动画使用orbit controls插件（轨道控制）来控制模型交互动作通过THREE.RAYCASTER给模型绑定鼠标事件疑难问题分析及解决方案Canvas纹理贴图模糊场景中渲染顺序错误z-fighting问题透明渲染Three.js性能优化 背景简介 越来越多的应用已经不再满足于二维的数据可视化，追求效果更好的3D数据可视
Three.js 现学现卖
前端栈开发
07-10 377
引言三维计算机图形和二维计算机图形的不同之处在于计算机存储了几何数据的三维表示，其用于计算和绘制最终的二维图像。——《3D computer graphics》随着 WebGL 标准的快速推进，越来越多团队尝试在浏览器上推出可交互的 3D 作品。相较于二维场景，它更能为用户带来真实和沉浸的体验。然而 OpenGL 和 WebGL（基于 OpenGL ES） 都比较复杂，Three.js 则更适合初...
Three.js 中的包围盒（Bounding Box）
qq_34820371的博客
01-01 1416
包围盒通常是一个简单的矩形或立方体，它最小化了包含物体所需的空间。包围盒的核心目的是提供一个快速计算物体空间占用的方式，不需要处理复杂的几何形状。轴对齐包围盒（AABB，Axis-Aligned Bounding Box）：包围盒的边与坐标轴平行。最小包围盒（OBB，Oriented Bounding Box）：包围盒的边不一定与坐标轴平行，它能够更紧密地包围物体。在 Three.js 中，我们常用的是轴对齐包围盒（AABB）。
Three.js杂记（十三）—— 包围盒
苦作舟的空城机
04-29 2327
ThreeJs包围盒Box按照字面理解就是包围一个物体的盒子，那就是一个长方形空间。可以用于碰撞检测、物体选择、可视化剔除等功能。
WEB 3D技术 three.js 包围盒
weixin_45966674的博客
01-06 2420
THREE.Box3Helper 需要两个参数 第一个是 需要处理的包围盒对象 就是我们从gltf几何体对象上拿到的 boundingBox属性 第二个为一个颜色属性。还有就是 比如 我们物体做的比较复杂 是非常多顶点构建的 那么 我们判断它有没有和其他物体接触就很麻烦 但 有了包围盒 我们只需要判断包围盒有没有接触即可。它的作用 比较明显的就是 当用户点击某个物体 我们用包围盒套住 用户能够很直观的知道自己当前选中的物体是哪一个。这里 我们有两个 一个是 包围盒 另一个是 包围圈。
threejs给物体添加边框
m0_73495473的博客
08-08 1575
threejs物体加边框的两种方式
three.js 包围盒`Box3`
u014291990的博客
12-13 1190
所谓包围盒Box3，就是一个长方体空间，把模型的所有顶点数据包围在一个最小的长方体空间中，这个最小长方体空间就是该模型的包围盒Box3。
threejs给模型添加边框线
hcdu
12-06 2156
适用：做模型一些特效的时候可以用，还有就是有些模型内部的wireframe线框比较乱的时候可以用。
three.js 包围盒简单应用
weitaming1的博客
08-30 8649
一、包围盒 二、包围盒简单应用： （一）移动模型到合适的位置 计算多个模型组合的group的包围盒 var bbox = new THREE.Box3().setFromObject(group) 将导入的外部模型移动到世界坐标中心。（比较粗糙的，实际上是包围盒的中心移动到世界坐标中心，而非实际模型） 注意点：从代码中看，group.position.set(-x1,-y1,-z1)...
Three.js计算模型尺寸
qq_28918357的博客
02-14 3471
Three.js模型尺寸计算代码 代码 const scene = new THREE.Scene() const loader = new GLTF Loader() loader.load(url, (gltf) => { const box3 = new THREE.Box3() box3.expandByObject(gltf.scene) const v3 = new THREE.Vector3() box3.getSize(v3) console.log('size', v3)
three.js 学习笔记 | 光线投射技术 - 包围盒(碰撞检测)
好好学习天天向上
04-27 2620
如果没有设置则每次调用都会初始化一个新数组。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

仙魁XAN

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值