Three.js - 模型中心设置为场景中心并获取边界框最值

最新推荐文章于 2024-06-04 10:24:01 发布

「已注销」

最新推荐文章于 2024-06-04 10:24:01 发布

阅读量1.1w

点赞数 5

分类专栏： threejs

本文链接：https://blog.csdn.net/ithanmang/article/details/82217963

版权

在加载模型以及创建字体，旋转模型的时候会发现并不居中，特别是字体的旋转轴是边缘的y轴。
因此需要使模型的轴心位于模型的中心并且与场景的中心一致。
示例：
https://ithanmang.gitee.io/threejs/home/201808/20180830/01-compute-center.html

1、使用 .center方法

无论是缓存几何BufferGeometry还是简单几何Geometry，都有一个方法.center ()。
直接让模型的几何结构调用这个方法就可以让模型居中。
这里写图片描述
例如下面的字体
① 以左侧边缘为中心点显示

② 以模型的中心点为旋转中心
添加以下代码

// TextGeometry文本几何对象
let fontGeometry = new THREE.TextGeometry(text,fontCfg);
fontGeometry.center();

这里写图片描述

2、通过计算边界框使模型居中

模型的边界框boundingBox一个box3对象，默认为null，计算模型的边界框，需要调用.computeBoundingBox ()方法。
例如字体模型，在没有计算边界框之前的TextGeometry的boundingBox属性是null
这里写图片描述
计算边界框之后

fontGeometry.computeBoundingBox();//计算边界框

这里写图片描述
可以看到此时的boundingBox是一个box3对象，box3是在3D空间中表示一个盒子或立方体，其主要目的是为了表示对象的最小边界框。
box3有两个属性max和min分别是边框的最值。
min：表示盒子的下（x，y，z）的边界
max：表示盒子的上（x，y，z）的边界
因此可以计算获取模型的中心点，只需要计算x轴的坐标，就可以使模型居中

font.position.x = -(fontGeometry.boundingBox.max.x - fontGeometry.boundingBox.min.x) / 2;

这里写图片描述
或者直接调用返回的box3对象的getCenter（）方法，返回一个Vector3向量，然后设置为模型的中心点，也已实现居中显示。

2、获取Group的边界最值

一般加载的模型都是通过对象组合放在一个Group中的，因此想要获取模型的边界值就需要获取整个Group的最值。
使用box3的方法expandByObject()参数是一个Object3D对象也即是Group对象或者是一个Mesh对象。
这里写图片描述
该方法返回一个Box3，因此可以获取边界最值。
同样也可以获取一组顶点或者一组向量以及一组标量的边界最值，方法如下，具体参考文档

字体模型示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制字体模型</title>
    <style>

        body{
   
            margin: 0;
            overflow: hidden;
        }
        #loading {
   
            position: fixed;
            top: 50%;
            left: 50%;
            color: #FFFFFF;
            font-size: 20px;
            margin-top: -30px;

最低0.47元/天解锁文章

「已注销」

关注

5
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
Three.js - 模型中心设置为场景中心并获取边界框最值

在加载模型以及创建字体，旋转模型的时候会发现并不居中，特别是字体的旋转轴是边缘的y轴。因此需要使模型的轴心位于模型的中心并且与场景的中心一致。示例： http://ithanmang.com/threeJs/home/201808/20180830/01-compute-center.html1、使用 .center方法无论是缓存几何BufferGeometry还是简单几何Ge...
复制链接

扫一扫