three.js 通过计算边界框使Group模型居中

最新推荐文章于 2024-07-19 18:41:18 发布
最新推荐文章于 2024-07-19 18:41:18 发布
阅读量3.7k 收藏 2
点赞数 1
分类专栏： threejs 文章标签： three.js 模型居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41111068/article/details/82494678
版权

box3是在3D空间中表示一个盒子或立方体，其主要目的是为了表示对象的最小边界框。 
box3有两个属性max和min分别是边框的最值。 
min：表示盒子的下（x，y，z）的边界 
max：表示盒子的上（x，y，z）的边界 

获取Group的边界最值

一般加载的模型都是通过对象组合放在一个Group中的，因此想要获取模型的边界值就需要获取整个Group的最值。 
使用box3的方法expandByObject()参数是一个Object3D对象也即是Group对象或者是一个Mesh对象。 

该方法返回一个Box3，因此可以获取边界最值。 
同样也可以获取一组顶点或者一组向量以及一组标量的边界最值，方法如下，具体参考文档  

 

蜗牛速度额
关注
专栏目录
Three 之 three.js （webgl）绘制物体模型尺寸虚线包围框工具简单封装 DashLinesBoxTool
仙魁XAN
10-21 1817
Three js 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍， three.js （webgl） 中绘制物体模型尺寸虚线包围框工具简单封装 DashLinesBoxTool，主要是给实物绘制线框，有点像AI 识别正方形包裹框的效果。其中，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
Three.js - 模型中心设置为场景中心并获取边界框最值
热门推荐
ithanmang
08-30 1万+
在加载模型以及创建字体，旋转模型的时候会发现并不居中，特别是字体的旋转轴是边缘的y轴。 因此需要使模型的轴心位于模型的中心并且与场景的中心一致。 示例： http://ithanmang.com/threeJs/home/201808/20180830/01-compute-center.html 1、 使用 .center方法 无论是缓存几何BufferGeometry还是简单几何Ge...
Three.JS飞入定位模型的位置。
最新发布
this__valve的博客
07-19 489
这里创建了一个 Tween 对象，定义了初始状态（旧的相机位置和目标点）和最终状态（新的相机位置和目标点），以及动画的时间参数。如果是创建mesh不需要这部，因为我gitf模型的处理是用回调去处理添加的gltb模型。在render循环里面记得加 TWEEN.update();方法设置 Tween 的目标状态和动画时间。是一个函数，接受旧的相机位置 ()，还有一个可选的动画时间参数 (库创建动画效果，实现平滑过渡。方法设置缓动函数，这里使用了。，表示缓入缓出的三次方缓动效果。)，以及新的相机位置 (
THREEJS - 模型居中
Kreme的博客
03-02 4900
在使用THREEJS的过程中，我们常常会遇到关于模型的处理，有时候建模的同事会帮我们将模型归零后给我们，有时候是没有归零的，但这时候需要将模型在场景中居中展示。 这里采用的办法是包围盒的方式，具体代码如下： // 将模型的中心点设置到canvas坐标系的中心点，保证模型显示是居中的，object就是操作的目标模型 let box = new THREE.Box3().setFromObject(object); // 获取模型的包围盒 let mdlen = box.max.x - box.min.x
Three.js加载模型自动居中
qq_39503511的博客
12-08 6216
Three.js加载模型自动居中Three.js加载模型自动居中概述解决方案 Three.js加载模型自动居中 概述 有时会出现这样得场景，在加载模型成功后，在场景中很难找到模型具体加载到了哪个位置，我们在打印出模型后可以看到模型得定位是(0,0,0)，但加载的模型并不是在(0, 0, 0)位置，这是由于建模师在处理模型的时候就不是在(0, 0, 0)处进行建模的。 解决方案 此处有两种解决方案 建模师处理模型，将模型的位置移动到（0， 0， 0）处即可 使用代码进行模型强制居中处理 /** * 设置
three.js 控制相机居中，全屏渲染模型
云
07-20 1082
【代码】three.js 控制相机居中，全屏渲染模型。
Threejs 多个模型对象自动居中显示
qq_27080351的博客
06-12 449
【代码】Threejs 多个模型对象自动居中显示
vue使用three.js实现外部加载模型的自动缩放的效果
菜鸟karroy
06-12 3467
效果图： 具体实现的步骤： 1、新建文件 在src中创建views文件夹，在views中创建scale文件夹。在scale中创建components文件夹和index.vue文件，最后在components创建ModelScale.vue文件。 2、BoxSwitch.vue文件中 （1）、加载需要的js文件 import * as THREE from 'three' import * a...
threejs效果记录
蛋蛋老公的博客
08-18 4198
/ 使用SceneUtils创建多材质对象 let mesh = new THREE . SceneUtils . createMultiMaterialObject(geometry , materials);}
Vue-Threejs学习
lifei799的博客
12-16 838
Threejs学习 最近在学习threejs，探索3D开发，主要记录一下学习的过程及遇到的问题，以后续查看，目前主要涉及的也就几个知识点，纹理贴图、2D标签、挖洞、简单动画（开关门）、引入Etharts图表，还未涉及到其它知识点。 最新效果图2020-12-16 前端代码 import { remoteCallAjaxService } from '@/assets/baseJs/ajaxservice' import { transtoTree, isNull } from '@/asse
ThreeJS —— 机房Demo（三）
weixin_41998030的博客
06-06 1713
ThreeJS —— 机房Demo（三）目录结构创建文字创建3D文字创建精灵文字Sprite改进版精灵文字创建光圈效果 上一节我们重构了我们的代码，形成了两个区域，绘制出了一个大致的场景，这一节我们将在此基础上再添加一些实用的场景 目录结构 ├── font // 字体文件  |├──── font.ttf // 字体源文件  |└──── font.json // 转换后的字体文件 ├── img // 素材图片  |├──── xx.png  |├──── xxx
Three.js——七、Group层级模型
NanChen的博客
05-30 1848
通过 THREE.Group 类创建一个组对象 group,然后通过 add 方法把网格模型 mesh1、mesh2 作为设置为组对象 group 的子对象，然后在通过执行 scene.add(group)把组对象 group 作为场景对象的 scene 的子对象。也就是说场景对象是 scene 是 group 的父对象，group 是 mesh1、mesh2 的父对象。我们在开发的时候，会优先加载外部的模型，之后要对模型上添加标签锕，标点啊等等，就需要批量给子对象设置节点名称。
10.相机基础
weixin_60645637的博客
07-01 651
在实际应用中，透视投影相机的规则是远小近大，相机距离目标观察点距离越远，目标模型显示越小，距离越近显示越大 前面给大家讲解过，对于透视投影相机而言，OrbitControls缩放，本质上就是改变相机的位置属性.position。通过.minPolarAngle和.maxPolarAngle属性控制上下的旋转范围，默认从0到180度，默认情况下0度，XOZ平面平行canvas画布，y轴垂直指向屏幕外，90度时候，渲染结果y轴竖直向上，180度，XOZ平面平行canvas画布，y轴垂直指向屏幕内。
46 Three.js使用THREE.ExtrudeGeometry拉伸SVG为三维图形
现在学习也不晚
12-20 5806
简介 SVG是可缩放矢量图（Scalable Vector Graphics）。它基于XML的标准，用来在网页上创建二维矢量图。该标准是一个所有现代浏览器都支持的开房标准。我们可以使用Three.js的THREE.ExtrudeGeometry来将SVG格式的图形转换成三维图形。 实现方式 首先，将库文件引入到页面当中 <script src="https://johns...
WEB 3D技术 three.js 包围盒
weixin_45966674的博客
01-06 2068
THREE.Box3Helper 需要两个参数 第一个是 需要处理的包围盒对象 就是我们从gltf几何体对象上拿到的 boundingBox属性 第二个为一个颜色属性。还有就是 比如 我们物体做的比较复杂 是非常多顶点构建的 那么 我们判断它有没有和其他物体接触就很麻烦 但 有了包围盒 我们只需要判断包围盒有没有接触即可。它的作用 比较明显的就是 当用户点击某个物体 我们用包围盒套住 用户能够很直观的知道自己当前选中的物体是哪一个。这里 我们有两个 一个是 包围盒 另一个是 包围圈。
threejs加载3D模型实现模型在画布自动居中
weixin_58737883的博客
04-14 667
在loader里调用这个方法传入模型对象即可实现根据不同设备自动居中。
threejs加载模型,实现模型自适应大小
weixin_58737883的博客
04-14 5106
获取最大的尺寸值，也就是模型在三个轴向上的最大值。然后，我们通过除以这个值来计算出每个轴需要缩放的比例。最后，我们将每个轴上的缩放比例应用到模型的。请注意，计算出的比例可能需要根据实际需要进行微调。另外，如果在场景中同时展示了多个模型，需要对每个模型都进行以上的操作。，并获取模型的边界盒。接下来，计算得到获取边界盒的尺寸，然后使用。4.计算出最大的尺寸值，即在三个轴向上的最大值。6.将每一个轴的缩放比例应用到模型的。5.计算出每一个轴需要缩放的比例。方法将其设置为模型的边界盒。加载模型，并获取模型的。
three.js组对象Group、层级模型
yinge0508的博客
02-16 1064
创建两个模型对象添加到组对象中，效果如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&..
Vue与Three.js结合加载glTF模型实战指南
要在Vue项目中使用Three.js加载glTF模型，首先你需要通过npm安装Three.js库： ```bash npm install three ``` 接着，为了加载glTF模型，还需要安装GLTFLoader： ```bash npm install three-gltf-loader ``` 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值