Three.js 对象居中

Question

I just started working with three.js recently and I finally have my models loading in properly. However, looking at the examples I noticed that the centering in most of the examples is done with coding like this

object.position.y = - 95;

That works fine for the example's purpose but I'm loading multiple objects of different sizes and I don't want to hard code a value for every single model. So my question is, how do you center an object dynamically?

I saw geometry.center was a way to achieve this but I couldn't find any examples and I don't understand how to add that into this example

http://threejs.org/examples/#webgl_loader_obj_mtl

Any suggestions, tutorials, tips, or examples would be great. Thanks!

Answer 1

If the pivot point of your models is at the vertical center of your model, you can use this general approach:

//object.geometry.center();
var box = new THREE.Box3().setFromObject( object )
var boundingBoxSize = box.max.sub( box.min );
var height = boundingBoxSize.y;
object.position.y = - height / 2;

And if the geometry is already shifted, you can re-center it using geometry.center() .