正如Three.js的文档所述,更改摄像机的位置后,我们必须调用updateProjectionMatrix()
方法。我也一样但这给了我这样的错误:
TypeError: object.updateWorldMatrix is not a function
at Box3.expandByObject (three.module.js:6329)
at Box3.setFromObject (three.module.js:6233)
at index.js:66
at GLTFLoader.js:147
at GLTFLoader.js:1639
我的目标是将加载的GLTF对象放在屏幕中央。这是我正在使用的代码:
this.gltfLoader.load("/corolla.gltf", (object) => {
const box = new THREE.Box3().setFromObject(object);
const size = box.getSize(new THREE.Vector3()).length();
const center = box.getCenter(new THREE.Vector3());
// reset OrbitControl
this.controls.reset();
object.position.x += (object.position.x - center.x);
object.position.y += (object.position.y - center.y);
object.position.z += (object.position.z - center.z);
this.controls.maxDistance = size * 10;
this.camera.near = size / 100;
this.camera.far = size * 100;
this.camera.updateProjectionMatrix();
this.camera.position.copy(center);
this.camera.position.x += size / 2.0;
this.camera.position.y += size / 5.0;
this.camera.position.z += size / 2.0;
this.camera.lookAt(center);
this.gltf = object.scene;
this.scene.add(this.gltf);
},
this.manageLoading,
this.gltfLoadErr);
为了记录,我使用的是Three.js的最新版本,它是0.110.0
;
看来这里发生了错误:
const box = new THREE.Box3().setFromObject(object);
object
是从调用返回到GLTFLoader.load
的对象。
根据文档,GLTFLoader.load
不是object
(这是Object3D
期望的值。
相反,Box3.setFromObject
是一个JSON结构,其中包含有关GLTF数据的信息。 three.js示例建议Box3.setFromObject
将是可渲染的实体(如果存在)。
[查看object
示例的代码,object.scene
。将其与您的实现进行比较。您还可以调试代码以查看GLTFLoader
包含的内容。一旦解决了这个问题,如果仍然有问题,请回来并提出更多问题!