BufferGeometry应用1-物体居中与包围盒的应用
- 学习ThreeJS的捷径
- 问题案例：为什么会围绕Y轴旋转
-
- 问题代码
- 案例效果
- 模型中心的概念
- 包围盒简介
- 修正Mesh中心到包围盒中心
- 关于模型中心的一些碎碎念
- 下一篇预告
学习ThreeJS的捷径
本段内容会写在0篇以外所有的，本人所编写的Threejs教程中
对，学习ThreeJS有捷径
当你有哪个函数不懂的时候，第一时间去翻一翻文档
当你有哪个效果不会做的时候，第一时间去翻一翻所有的案例，也许就能找到你想要的效果
最重要的一点，就是，绝对不要怕问问题，越怕找找别人问题，你的问题就会被拖的越久
如果你确定要走WebGL/ThreeJS的开发者路线的话，以下行为可以让你更快的学习ThreeJS
- 没事就把所有的文档翻一遍，哪怕看不懂，也要留个印象，至少要知道Threejs有什么
- 没事多看看案例效果，当你记忆的案例效果足够多时，下次再遇到相似问题时，你就有可能第一时间来找对应的案例，能更快解决你自己的问题
- 上述案例不只是官 的案例，郭隆邦技术博客，跃焱邵隼，暮志未晚等站点均有不少优质案例，记得一并收藏
http://www.yanhuangxueyuan.com/ 郭隆邦技术博客
https://www.wellyyss.cn/ 跃焱邵隼
http://www.wjceo.com/ 暮志未晚
这三个站点是我最常逛的站点，推荐各位有事没事逛一下，看看他们的案例和写法思路，绝对没坏处
问题案例：为什么会围绕Y轴旋转
上一篇中我们创造了自定义的BufferGeometry，然后接下来，我希望让它自转起来，于是，我写了这样的代码
问题代码
案例效果
当我们的中心在这里的时候，物体就会围绕中心，做圆周运动，而不是自转
当我们的中心在这里的时候，物体的缩放也会直接影响物体的位置，缩放值越高，距离中心会越远
当我们的中心在图形中心时，图形才会自转
当我们的中心在图形中心时，图形缩放时，才会均匀缩放
暮佬的这个案例可以让你亲自体验一下模型中心偏移带来的后果
108 THREE.JS 使用矩阵对3D对象进行位置设置
所以，一般来说，我们在和建模师做交流的时候，一定要要求建模师，把模型的中心点，放到模型的包围盒中心，这样才能保证我们在操作模型的时候，不会出现问题
包围盒简介
这里的介绍为本人理解
包围盒会取所有你构成图形顶点的x,y,z的最大最小值，构成一个box，这个box可以完美装下你的模型，这个就是包围盒
一般来说，包围盒中心，是常规模型的中心，把模型的中心设置到包围盒中心时，我们在操作模型的时候，就很少能遇到问题
包围盒Box3官方文档
官方也提供了Box2的包围盒，但是笔者从来没用过，所以这里不做讨论
当然，官方也提供了可以显示包围盒的辅助对象
包围盒的辅助对象官方文档
修正Mesh中心到包围盒中心
修正原理很简单，就是把几何体的整体数据与包围盒的中心做一个减法，让模型直接移动到中心
但是，我们发现，我们的模型虽然是修正了中心，但是位置也跟着变了，怎么办
首先我们先记录一下原模型的中心，然后再执行.center()将模型移回标准中心
接下来用mesh来移动到这个中心
这样，我们就可以看到以自身为中心旋转的图形了
关于模型中心的一些碎碎念
有时候，建模软件导出来的模型， 你使用上面的方法居中，也未必能成功，笔者曾在居中问题上栽了无数的坑，且模型基本上都是FBX格式，也基本上都是从 上下载的未知版本的FBX格式文件。。。最终，笔者也没能彻底解决模型不能居中的问题
但是，有一种方法是绝对能解决这个问题的，就是在建模师手中，建模师在导出模型前，一定要有一个好习惯，就是把模型的中心轴放到包围盒中心，就可以最大程度的避免程序来处理这个问题
下一篇预告
BufferGeometry的实际应用2
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！