如何在 THREEJS 级别添加 GLTF 模型？

Posted 2023-03-16

【中文标题】如何在 THREEJS 级别添加 GLTF 模型？

【英文标题】：How to add GLTF Model in THREEJS level?

【发布时间】：2021-11-24 13:31:17

【问题描述】：

我想创建一个可以在调用方法后加载 gltf 的扩展。我正在根据这个blog 使用最新的threejs 模块。但是遇到了错误。

这是我的代码。

   const gltfLoader = new GLTFLoader();
  let example = new THREE.Object3D();
  gltfLoader.load(
    "https://threejsfundamentals.org/threejs/resources/models/cartoon_lowpoly_small_city_free_pack/scene.gltf",
    (gltf) => 
      example = gltf.scene;
      console.log(example);
      if (!this.viewer.overlays.hasScene("gltf")) 
        this.viewer.overlays.addScene("gltf");
      
      this.viewer.overlays.addMesh(example, "gltf");
    
  );

【参考方案1】：

关于 glTF，您可以查看这篇博文并考虑使用 Autodesk.glTF ext 代替：https://forge.autodesk.com/blog/gltf-20-support-forge-viewer

viewer.loadExtension('Autodesk.glTF').then(() => 
    viewer.loadModel('address/of/your/model.gltf');
);

查看代码示例：https://github.com/petrbroz/forge-basic-app/tree/experiment/gltf2

在 Forge Viewer 中处理 glTF 文件时要记住以下几点：

查看器扩展并不旨在完全符合 glTF 2.0 规范 例如，Forge Viewer 中的材质/着色器系统与 glTF 中使用的 PBR（基于物理的渲染）材质不同，因此查看器将无法完整呈现所有 glTF 材质 不支持动画等文件格式的某些功能 如果 glTF 文件在树形结构中定义了多个对象，则可以在查看器中选择各个对象，并且树形结构将出现在“模型浏览器”对话框中；但请注意，许多 glTF 文件将整个场景存储为单个对象 glTF 规范不使用任何附加到单个元素的元数据概念；因此，查看器中的“属性”对话框不会提供有关所选元素的任何其他信息

【讨论】：

感谢您的回复。当我使用Autodesk.glTF 导入 gltf 模型时，我总是收到错误消息：“抱歉，我们似乎遇到了技术难题，无法完成您的请求......”。其次，我想基于 API 触发器加载它。它可能会在查看器中多次建模，这就是我在threeJS中工作的原因。那么如果我使用 Autodesk.gltf 加载后如何动态移动模型？

您是直接从three.js org 加载glTF 文件吗？如果是，则可能是CORS 问题，因为除非网站接受通配符 CORS 请求，否则常见的 Web 浏览器将阻止此类请求。我建议您将 glTF 文件和上述演示代码示例下载到本地计算机并在本地运行应用程序。

使用github.com/petrbroz/forge-basic-app/tree/experiment/gltf2，您需要将下载的glTF模型放入public/models文件夹，然后更改this line指向您的模型。

谢谢。它在我以单独的格式（gltf、bin 和纹理）在搅拌机中导出我的 gltf 模型后工作。关于我的第二个问题。加载多个模型后如何选择特定的gltf？我read 有一个我可以使用的placementTransform。但是好像只能在初始设置中使用。

加载模型后，我们可以像博文那样调用Model.setPlacementTransform更改PlacementTransform。