THREE.js 导入glTF文件,界面中不展示模型

现象

通过GLTFLoader 导入,再用scene.add(gltf.scene) ,界面中没有展示模型。

控制台没有报错。

glTF从blender中导出,不是压缩的,不用 DRACOLoader 处理。

THREE.js 导入glTF文件,界面中不展示模型_第1张图片

导入代码

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

export async function loadGLTF() {
  const loader = new GLTFLoader();
  const gltf = await loader.loadAsync('./1111.gltf');

  return gltf;
}

// loadGLTF
loadGLTF().then(gltf => {
    scene.add(gltf.scene);
    // render 重新渲染
})


原因

glTF导入的模型太小了,放大才能看见。(疯掉,还以为什么原因查半天)THREE.js 导入glTF文件,界面中不展示模型_第2张图片

这和导入fbx导入的模型不一样了。

fbx导入以后模型比较大,一下就看出来。

这个是用.fbx导入的

THREE.js 导入glTF文件,界面中不展示模型_第3张图片

解决

由于gltf导入的是gltf.scene ,它的是Group的实例。我们可以设置缩放,调整到合适大小即可。

gltf.scene.scale.set(20, 20, 20);

THREE.js 导入glTF文件,界面中不展示模型_第4张图片

你可能感兴趣的:(THREE,javascript,前端,开发语言)