Как обновить цели морфинга threejs из ключей формы GLTF блендера

У меня есть файл блендера с несколькими ключами формы. Когда я перетаскиваю ползунок в блендере между 0 и 1, я могу управлять ключом формы.

(снимок экрана): https://share.getcloudapp.com/bLuw8L0W

Я экспортирую GLTF и импортирую его в threejs.

Если я console.log сетку из GLTF, я вижу ключи формы из блендера в morphTargetDictionary, и я настроил графический интерфейс для обновления morphTargetInfluences для каждого ключа формы:

https://share.getcloudapp.com/6quP71l7

folder
.add(params, "influence2", 0, 1)
.step(0.01)
.onChange(function (value) {
  console.log(dodec.morphTargetInfluences[1]);
  dodec.morphTargetInfluences[1] = value;
  //dodec.updateMorphTargets();
});

но обновление этих morphTargetInfluences, похоже, не влияет. Как мне настроить это так, чтобы я мог добиться того же эффекта в Three.js, который я могу получить в блендере, перемещая ползунки для каждого ключа формы?

обновить

Вот код того, что у меня есть сейчас:

https://codepen.io/heaversm/pen/xxVNmdb


javascript gltf three.js
person mheavers    schedule 29.09.2020    source источник
comment
Есть ли шанс поделиться живым примером со своим кодом? Похоже, вы, по сути, делаете то же самое, что и следующая официальная демонстрация цели морфинга (threejs.org/examples/webgl_morphtargets).   -  person Mugen87    schedule 29.09.2020
comment
Ваша вторая getcloudapp ссылка выдает ошибку: Ой. Здесь ничего нет.   -  person Marquizzo    schedule 30.09.2020
comment
@Marquizzo - обновлено.   -  person mheavers    schedule 30.09.2020
comment
@ Mugen87 - вот код: codepen.io/heaversm/pen/xxVNmdb   -  person mheavers    schedule 30.09.2020

Ответы (1)


arrow_upward
0
arrow_downward

Объект, на который вы хотите нацелиться, - это сетка dodec = scene.getObjectByName("Solid_0");. Исследуя, что такое dodec, пока не найдете сетку, вы попадете сюда.

GLTF экспортирует вложенные группы, поэтому ваша сетка может быть вообще в группе.

Вам также необходимо установить morphTargets: true для вашего материала:

const material = new THREE.MeshStandardMaterial({
  color: 0xffa400,
  emissive: 0xbb5a5a,
  side: THREE.DoubleSide,
  flatShading: true,
  morphTargets: true, // you need this
});
person Andy Ray    schedule 30.09.2020