three.js导入obj模型子模型位置为{0,0,0}之处理

发表于 | 分类于 | 阅读 次
获取每个子模型的坐标

获得子模型坐标

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//子模型为 obj

obj.geometry.computeBoundingBox();
 
var centroid = new THREE.Vector3();
centroid.addVectors( obj.geometry.boundingBox.min, obj.geometry.boundingBox.max );
centroid.multiplyScalar( 0.5 );
 
centroid.applyMatrix4( obj.matrixWorld );

let sphere = new THREE.Mesh(new THREE.SphereGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({
    color: 0xffffff,
    wireframe: true
  })
);
sphere.position.set(centroid.x, centroid.y, centroid.z)

通过获取obj子模型最小值和最大值来计算其质心位置,在其质心位置画个球。
子模型 obj 的坐标可以看做是 centroid.x, centroid.y, centroid.z

参考

改变控制中心

当场景中只显示一个子模型时，可以把子模型的坐标作为中心点。
把相机视角指向子模型：

1
camera.lookAt(new THREE.Vector3(centroid.x, centroid.y, centroid.z))

结果视角并没有变化。原因是受到 OrbitControls 控件的影响
改变OrbitControls.target即可：

1
controls.target = new THREE.Vector3(centroid.x, centroid.y, centroid.z);

再调整相机位置，使子模型显示在场景中间：

1
2
3
4
5
6
7
8
9
10
11
// 直接移动相机位置
camera.position.set(centroid.x, centroid.y+200, centroid.z+200)

// 用 TweenMax 动画库
TweenMax.to(camera.position, 1, {
  x: centroid.x,
  y: centroid.y+200,
  z: centroid.z+200,
  ease: Expo.easeInOut,
  onComplete: function () {}
})

恢复显示整个模型时，只需controls.reset()，即可将相机位置及视角还原。

参考