BufferGeometry应用1-物体居中与包围盒的应用
学习ThreeJS的捷径问题案例：为什么会围绕Y轴旋转问题代码案例效果 模型中心的概念包围盒简介修正Mesh中心到包围盒中心关于模型中心的一些碎碎念下一篇预告学习ThreeJS的捷径
本段内容会写在0篇以外所有的，本人所编写的Threejs教程中
对，学习ThreeJS有捷径
当你有哪个函数不懂的时候，第一时间去翻一翻文档
当你有哪个效果不会做的时候，第一时间去翻一翻所有的案例，也许就能找到你想要的效果
最重要的一点，就是，绝对不要怕问问题，越怕找找别人问题，你的问题就会被拖的越久
如果你确定要走WebGL/ThreeJS的开发者路线的话，以下行为可以让你更快的学习ThreeJS
没事就把所有的文档翻一遍，哪怕看不懂，也要留个印象，至少要知道Threejs有什么没事多看看案例效果，当你记忆的案例效果足够多时，下次再遇到相似问题时，你就有可能第一时间来找对应的案例，能更快解决你自己的问题上述案例不只是官网的案例，郭隆邦技术博客，跃焱邵隼，暮志未晚等站点均有不少优质案例，记得一并收藏
/ 郭隆邦技术博客
/ 跃焱邵隼
/ 暮志未晚
这三个站点是我最常逛的站点，推荐各位有事没事逛一下，看看他们的案例和写法思路，绝对没坏处
问题案例：为什么会围绕Y轴旋转
上一篇中我们创造了自定义的BufferGeometry，然后接下来，我希望让它自转起来，于是，我写了这样的代码
问题代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>canvas{display: block;}body {margin: 0;overscroll-behavior: none;}#btns{position: absolute;top:10%;width: 500px;height: 100px;left: 50%;transform:translateX(-50%);}</style></head><body><div id="btns"></div><!-- Import maps polyfill --><!-- Remove this when import maps will be widely supported --><script async src="/es-module-shims@1.3.6/dist/es-module-shims.js"></script><script type="importmap">{"imports": {"three": "../../three.js-master/build/three.module.js"}}</script><script type="module">import * as THREE from '../../three.js-master/build/three.module.js';import {OrbitControls} from "../../three.js-master/examples/jsm/controls/OrbitControls.js";let scene,renderer,camera,orbitControls;let mesh;function init(){scene = new THREE.Scene();renderer = new THREE.WebGLRenderer({alpha:true,antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);camera.position.set(10,10,10);orbitControls = new OrbitControls(camera,renderer.domElement);let light = new THREE.PointLight();camera.add(light);scene.add(camera);let helper = new THREE.AxesHelper(5);scene.add(helper);}function addMesh(){const geometry = new THREE.BufferGeometry();const vertices = new Float32Array( [-1.0, -1.0, 1.0,1.0, -1.0, 1.0,1.0, 1.0, 1.0,1.0, 1.0, 1.0,-1.0, 1.0, 1.0,-1.0, -1.0, 1.0] );geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );puteVertexNormals();let material = new THREE.MeshStandardMaterial({color:"#ff0000",side:THREE.DoubleSide});mesh = new THREE.Mesh(geometry,material);scene.add(mesh);}function render(){renderer.render(scene,camera);requestAnimationFrame(render);mesh.rotation.y += 0.01;}init();addMesh();render();</script></body></html>
案例效果
这里就涉及到一个概念，叫模型中心
模型中心的概念
模型中心是一个Vector3，这个中心，并不是说我们视觉上看到的最中心，有可能是任何的位置，这个中心直接影响的，就是我们的旋转和缩放，对平移移动较小
举个例子
当我们的中心在这里的时候，物体就会围绕中心，做圆周运动，而不是自转
当我们的中心在这里的时候，物体的缩放也会直接影响物体的位置，缩放值越高，距离中心会越远
当我们的中心在图形中心时，图形才会自转
当我们的中心在图形中心时，图形缩放时，才会均匀缩放
暮佬的这个案例可以让你亲自体验一下模型中心偏移带来的后果
108 THREE.JS 使用矩阵对3D对象进行位置设置
所以，一般来说，我们在和建模师做交流的时候，一定要要求建模师，把模型的中心点，放到模型的包围盒中心，这样才能保证我们在操作模型的时候，不会出现问题
包围盒简介
这里的介绍为本人理解
包围盒会取所有你构成图形顶点的x,y,z的最大最小值，构成一个box，这个box可以完美装下你的模型，这个就是包围盒
一般来说，包围盒中心，是常规模型的中心，把模型的中心设置到包围盒中心时，我们在操作模型的时候，就很少能遇到问题
包围盒Box3官方文档
官方也提供了Box2的包围盒，但是笔者从来没用过，所以这里不做讨论
当然，官方也提供了可以显示包围盒的辅助对象
包围盒的辅助对象官方文档
修正Mesh中心到包围盒中心
修正原理很简单，就是把几何体的整体数据与包围盒的中心做一个减法，让模型直接移动到中心
mesh.geometry.center();//或者在创建geometry时,直接将geometry移动到中心geometry.center();
但是，我们发现，我们的模型虽然是修正了中心，但是位置也跟着变了，怎么办
首先我们先记录一下原模型的中心，然后再执行.center()将模型移回标准中心
let center = geometry.boundingBox.getCenter(new THREE.Vector3());geometry.center();
接下来用mesh来移动到这个中心
mesh.position.copy(center);
这样，我们就可以看到以自身为中心旋转的图形了
关于模型中心的一些碎碎念
有时候，建模软件导出来的模型， 你使用上面的方法居中，也未必能成功，笔者曾在居中问题上栽了无数的坑，且模型基本上都是FBX格式，也基本上都是从网上下载的未知版本的FBX格式文件。。。最终，笔者也没能彻底解决模型不能居中的问题
但是，有一种方法是绝对能解决这个问题的，就是在建模师手中，建模师在导出模型前，一定要有一个好习惯，就是把模型的中心轴放到包围盒中心，就可以最大程度的避免程序来处理这个问题
下一篇预告
BufferGeometry的实际应用2
