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

Question

我用 gltfpack and now they are invisible in A-Frame 1.1.0. In gltfpack, I used -tc to convert the texture files to BasisU and left everything else as is. When I loaded them in A-Frame, the models aren't there. Interestingly, the models work in Don McCurdy's viewer 压缩了我的模型和纹理。更新：有相关的Javascript控制台消息

THREE.GLTFLoader: setKTX2Loader must be called before loading KTX2 textures.

看来我误用了 Three.js。

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

Answer 1

模型正在使用 Don's viewer because he isn't using the standard gltf-model component, but uses a raw threejs loader（有多个附加功能）：

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

Afaik 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。我很确定捆绑包包含已经定义的东西（1Mb，即使只导入 KTX2Loader o.O），所以肯定有改进的余地。这似乎仍然是一个好的开始:)

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

How do I get a gltfpack-processed model to appear in A-Frame?

three.js

aframe

gltf