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

Question

我用 gltfpack 压缩了我的模型和纹理现在它们在 A-Frame 1.1.0 中是不可见的。在 gltfpack 中，我使用 -tc 将纹理文件转换为 BasisU，并保留其他所有内容。当我将它们加载到 A-Frame 中时，模型不存在。有趣的是，这些模型适用于 Don McCurdy's viewer . 更新:有相关的 Javascript 控制台消息

THREE.GLTFLoader: setKTX2Loader must be called before loading KTX2textures.

看来我在滥用 Three.js。

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

Answer 1

模型正在使用 Don's viewer因为他没有使用标准的 gltf-model 组件，而是使用了 raw threejs loader (有多个附加功能):

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

据我所知，threejs 存储库中的 KTX2Loader 仅作为一个模块(here)提供，因此我设法通过创建我自己的导入 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>

---

可以看看here .这些模型直接来自您的故障(归功于您 ofc)。

随时查看 directory使用组件和 package.json。我很确定 bundle 含已经定义的东西(即使只有 KTX2Loader 导入 o​​.O 也是 1Mb)，所以肯定有改进的余地。这似乎仍然是一个好的开始:)