如何让经过 gltfpack 处理的模型出现在 A-Frame 中？

Question

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

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

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

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

Answer 1

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

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

据我所知，twojs 存储库上的 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，也为 1Mb），因此肯定还有改进的空间。不过这似乎是一个好的开始:)