时间戳

首页 > 解决方案 > 如何让 gltfpack 处理的模型出现在 A-Frame 中？

three.js - 如何让 gltfpack 处理的模型出现在 A-Frame 中？

问题描述

我用gltfpack压缩了我的模型和纹理，现在它们在 A-Frame 1.1.0 中是不可见的。在 gltfpack 中，我使用 -tc 将纹理文件转换为 BasisU 并保留其他所有内容。当我将它们加载到 A-Frame 中时，模型不存在。有趣的是，模型在Don McCurdy 的查看器中工作。更新：有一个相关的 Javascript 控制台消息

THREE.GLTFLoader：必须在加载 KTX2 纹理之前调用 setKTX2Loader。

所以看来我在滥用 Three.js。

这是一个显示问题的裸露故障。场景中应该有两个模型可见，但只有一个未处理的模型在那里。有谁知道我可以修吗？

标签： three.jsaframegltf

解决方案

这些模型正在与Don 的查看器一起使用，因为他没有使用标准gltf-model组件，而是使用原始的 threejs 加载器（带有多个附加组件）：

const loader = new GLTFLoader().setCrossOrigin('anonymous');
loader.setDRACOLoader(new DRACOLoader().setDecoderPath('./wasm/'));
loader.setKTX2Loader(new KTX2Loader().detectSupport(renderer));

Afaik threejs repo 上的 KTX2Loader 仅作为模块提供（此处），因此我设法通过创建自己的导入 KTX2Loader 的模块来使其工作。简而言之：

// probably only need the KTX2Loader since aframe gives access to 
// the GLTFLoader and DRACOLoader.
import { GLTFLoader } from './path_to_three/examples/jsm/loaders/GLTFLoader.js';
import { KTX2Loader } from './path_to_three/examples/jsm/loaders/KTX2Loader.js';
import { DRACOLoader } from './path_to_three/examples/jsm/loaders/DRACOLoader.js';

// this is a 'minimal' version of the gltf-component,
// a more faithful one is linked later on
module.exports.Component = 
AFRAME.registerComponent("full-gltf-model", 
   schema: { type: 'model' },
   init: function() { 
      const loader = new GLTFLoader().setCrossOrigin('anonymous')
               .setDRACOLoader(new DRACOLoader().setDecoderPath('./wasm/'))
               .setKTX2Loader(new KTX2Loader().detectSupport(renderer));
      var src = this.data;
      // load the model:
      loader.load(src, 
         function gltfLoaded(gltfModel) {
            let model = self.model = gltfModel.scene || gltfModel.scenes[0];
            // assuming el is an entity;
            el.setObject3D("mesh", model);
         }, undefined /* in progress */, 
         function error(err) {
            console.log("error:", err);         
      })
   }
})

我已经将它与browserify( browserify index.js -p esmify > dist/full-gltf-model.js) 捆绑在一起，并像这样使用：

<!-- Somewhere in the scripts -->
<script src="dist/full-gltf-model.js>
<!-- Somewhere in the scene -->
<a-entity full-gltf-model="#model"></a-entity>

你可以在这里查看。这些模型直接来自你的故障（归功于你 ofc）。

随意查看包含组件和 package.json的目录。我很确定该捆绑包包含已经定义的内容（即使仅导入了 KTX2Loader oO 也是 1Mb），因此肯定有改进的余地。但这似乎是一个好的开始:)

推荐阅读