three.js 载入FBX格式的3D模型

20 min read

要在three.js中使用FBX格式的3D模型，需要使用three.js提供的FBXLoader模块。下面是一个简单的示例代码：

  1. 加载模型
//创建FBXLoader对象
var loader = new THREE.FBXLoader();
//加载FBX模型
loader.load('model.fbx', function(object) {
  //添加模型到场景中
  scene.add(object);
});
  1. 调整模型

FBX模型在three.js中可能需要调整一下，在加载之后可以对模型进行一些调整，如调整缩放或位置。

//缩放模型
object.scale.set(0.05, 0.05, 0.05);
//移动模型到中心位置
var bbox = new THREE.Box3().setFromObject(object);
var center = bbox.getCenter(new THREE.Vector3());
object.position.sub(center);

注意，在加载模型之前要确保three.js和FBXLoader模块已经被正确引入。

<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/loaders/FBXLoader.min.js"></script>

当然，这里只是一个简单的示例代码，具体的调整和操作还可以根据实际情况进行调整和扩展。