В настоящее время я работаю над браузером, похожим на Tamagotchi, в three.js. Но в настоящее время я застрял в реализации руки, которая ласкает аватар при нажатии.
Рука - это смонтированная модель Blender с 2 анимациями, простоя и анимацией тыкания. В gltf Viewer модель отлично работает с обеими анимациями. Но при добавлении в js рука либо полностью искажается, либо отображается правильно, но позиции не распознаются (для движения с курсором).
Большинство примеров, которые я рассмотрел, добавляли только общую сцену, а не только одну анимированную модель. В обеих версиях этих анимаций я получаю ошибку анимации.
Код искаженной версии:
loader.load('resources/models/gltf/Hand.gltf', function(gltf) {
gltf.scene.traverse(function(node) {
if (node.isMesh) hand = node;
});
//hand.material.morphTargets = true;
scene.add(hand);
mixer = new THREE.AnimationMixer(hand);
clips = hand.animations;
hand = gltf;
scene.add(hand.scene);
});
Вторая версия, где рука отображается правильно, но позиции для обработки событий не распознаются.
loader.load('resources/models/gltf/Hand.gltf', function(gltf) {
var hand = gltf.scene;
var animations = gltf.animations;
mixer = new THREE.AnimationMixer(hand);
for (var i = 0; i < animations.length; i++) {
mixer.clipAction(animations[i]).play();
}
scene.add(hand);
});
функция для бездействующей анимации:
function idleAnim() {
var idleClip = THREE.AnimationClip.findByName(clips, "Idle");
var action = mixer.clipAction(idleClip);
action.play();
console.info("idling");
}
Ссылка: https://github.com/JoeJoe49/AnimTest
Заранее спасибо и привет.
В первом примере вы извлекаете объект «рука» из сцены импорта, добавляете его в сцену рендеринга, а затем добавляете остальную часть сцены импорта в сцену рендеринга. Я предполагаю, что вам нужно вытащить «руку» сверху по иерархии. Вероятно, у него есть несколько родительских объектов, которые необходимо предоставить, чтобы сохранить правильную иерархию для анимации.
Стоит сделать scene.traverse ((o) => {console.info (o)}, чтобы получить четкое представление о том, как экспортируется ваша сцена. Я обнаружил, например, с помощью экспортера gltf blender, обычно их 2 отдельные родительские узлы, один для позиционирования и один для масштабирования + вращения, так что ... на него стоит взглянуть, потому что это может быть не совсем то, что вы ожидаете.
fwiw Я взял ваше репо и открыл gltfs в моем предварительном просмотре модели, но, похоже, я не увидел на них никакой анимации. Мой предварительный просмотр настроен на воспроизведение всех найденных им анимаций по порядку ... поэтому я не уверен, что там происходит. Я предполагаю, что это скины, а не морфологические цели?
Если вы откроете консоль JS на gltf-viewer.donmccurdy.com, вы также увидите распечатку дерева сцены - в частности, кости (обычно) не являются дочерними элементами сетки в glTF, поэтому, если вы просто извлечете и добавите сетку к своей сцене, кости будут не в сцене. Проще добавить в сцену весь объект gltf.scene
, а затем (если это работает) обрезать все.
fwiw Я исправил некоторые ошибки в моем средстве предварительного просмотра ресурсов, и теперь я могу нормально отображать все типы анимации. Ручная сетка анимируется ... и некоторые анимации цели морфинга, которые я извлек из репозитория THREE, также анимируются.
Еще несколько дней я пытался немного углубиться в структуру модели, и мне удалось правильно загрузить модель. @manthrax, вы были правы со второй попыткой, которую я опубликовал. Модель руки по-прежнему прикреплена к суставам, поэтому, если я просто загружаю сетку, она искажается. рука теперь работает с точки зрения реакции на слушателя событий. Анимация по-прежнему не будет работать должным образом, просто появляется ошибка с отсутствующими данными геометрии.
Не уверен, что вы просили большего совета ... но ... я думаю, вы не понимаете природу отношений анимация-> сетки-> геометрия. Иерархия сетки, анимация и геометрия должны быть точно согласованы, чтобы все работало. Без глубокого понимания системы вы не можете просто добавить / удалить / переместить любую из этих частей, чтобы все не сломалось. Для анимированных объектов вам нужно иметь дело с верхним корнем объекта в дереве, а не путать внутренние узлы, пока вы не узнаете, что происходит.
Что ж, проблема заключалась не в структуре модели или в чем-то еще. Не было даже проблемы с пониманием этой природы. Это была простая строчка, которую я забыл добавить. if (hand! == undefined) {....} Моя анимация была запущена, до того, как программа загрузила каждую сетку и со всеми деталями, которые я проверил дважды и трижды, я совершенно не думал об этой проблеме.
Да, это была ошибка отсутствующего свойства, в которой упоминалась геометрия. В этом была проблема со всем этим. Программа попыталась оживить объект, который не был загружен полностью.
Мораль истории - смотреть в консоль перед stackoverflow;) Научитесь пользоваться отладчиком. Это сэкономит вам так много времени.
привет спасибо за ответ. Хорошо, тогда я попробую углубиться в структуру моей модели. К сожалению, это мой первый проект с three.js, поэтому я каждый день испытываю что-то новое: D Для репозитория большинство файлов gltf анимируются с помощью ключей формы. Модель Hand является единственной сеткой с риггингом / скином. Не уверен, почему ваш превьюер не показывает анимацию. gltf-viewer.donmccurdy.com