Я сжал свои модели и текстуры с помощью gltfpack и теперь они невидимы в A-Frame 1.1.0. В gltfpack я использовал -tc для преобразования файлов текстур в BasisU, а все остальное оставил как есть. Когда я загрузил их в A-Frame, моделей там не было. Интересно, что модели работают в вьювере Дона Маккарди. Обновление: есть соответствующее консольное сообщение Javascript
THREE.GLTFLoader: перед загрузкой KTX2 необходимо вызвать setKTX2Loader. текстуры.
Итак, похоже, я неправильно использую Three.js.
Вот голый глюк, показывающий проблему. В сцене должны быть видны две модели, но присутствует только необработанная. Кто-нибудь знает, что я могу это исправить?
Модели работают с просмотрщиком Дона , потому что он не использует стандартный gltf-model
компонент, а использует необработанный загрузчик (с несколькими дополнениями):
const loader = new GLTFLoader().setCrossOrigin('anonymous');
loader.setDRACOLoader(new DRACOLoader().setDecoderPath('./wasm/'));
loader.setKTX2Loader(new KTX2Loader().detectSupport(renderer));
На самом деле KTX2Loader в репозитории threejs доступен только в виде модуля (здесь), поэтому мне удалось заставить его работать, создав собственный модуль, который импортирует 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.info("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>
Посмотреть можно здесь. Модели прям с Вашего глюка (зачислено Вам оф.с).
Не стесняйтесь проверить каталог с компонентом и package.json. Я почти уверен, что пакет содержит уже определенный материал (1 МБ, даже с импортированным KTX2Loader o.O), так что определенно есть место для улучшения. Тем не менее, это кажется хорошим началом :)
Большое вам спасибо за вашу помощь. Да, не стесняйтесь использовать мои модели. Ваш ответ понятен, но смогу ли я его применить - это другой вопрос! Я вернусь к вам по этому поводу.
Да, я могу заставить ваше решение работать на моем сайте, и я узнаю много полезной информации, выясняя, как оно работает. Еще раз спасибо.
@chekeichan рад, что смог помочь :)
@PiotrAdamMilewski святой бог, это просто идеальный ответ, вы даже создаете новый компонент для A-Frame и демонстрируете все это на github, спасибо за это решение!
Просто хочу дать обновленный ответ на этот вопрос - теперь он изначально поддерживается в A-Frame. Просто сделайте следующее:
<a-scene gltf-model = "dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;
basisTranscoderPath:https://cdn.jsdelivr.net/npm/[email protected]/examples/js/libs/basis/;;
meshoptDecoderPath: https://unpkg.com/meshoptimizer@~0.18.1/meshopt_decoder.js;">
Примечание: этот baseTranscoderPath сейчас находится только на мастере, поэтому он еще не включен в A-Frame 1.3.0, поэтому вам придется вытащить мастер и запустить сборку в данный момент. Однако в следующем релизе он будет. (см. PR)
См. документацию по этому вопросу: https://github.com/jameskane05/aframe/blob/9df1d2cb50ab12aa341cc250c703624510d25deb/docs/components/gltf-model.md
Официальные ссылки на основную сборку в настоящее время отстают, и использование cdn на github не будет работать, потому что файлы dist не фиксируются в течение последних нескольких месяцев, но я сделал сборку и поместил ее в свой проект с ошибками - вы можете используйте этот файл по этой ссылке, если вам это нужно, если для вас все еще остается самая последняя версия aframe 1.3.0:
https://gltf-packed.glitch.me/aframe-diego.js
(это сборка для разработчиков конкретной ветки форка Диего по состоянию на 15 октября 2022 г.)
@chekeichan, пожалуйста, дайте мне знать 1) Если это вообще понятно, 2) Если это нормально, что я использовал ваши модели 3) Если да, могу ли я загрузить их на свой gh (с кредитом), чтобы избавиться от ссылок на глюк который мог сломаться.