Блог

Главная - Вопросы по программированию - Как обновить цели преобразования threejs из ключей формы GLTF blender

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

#javascript #three.js #gltf

#javascript #three.js #gltf

Вопрос:

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

(скриншот): https://share.getcloudapp.com/bLuw8L0W

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

Если я console.log использую сетку из GLTF, я могу видеть ключи формы из blender в 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();
});

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

Обновить

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

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

Комментарии:

1. Есть ли возможность поделиться живым примером с вашим кодом? Кажется, вы, по сути, делаете то же самое, что и следующая официальная демонстрация цели морфинга ( threejs.org/examples/webgl_morphtargets ).

2. Ваша вторая getcloudapp ссылка выдает мне сообщение об ошибке: «Упс. Здесь ничего нет. »

3. @Marquizzo — обновлено.

4. @Mugen87 — вот codepen: codepen.io/heaversm/pen/xxVNmdb

Ответ №1:

Объект, на который вы хотите нацелиться, — это сетка, которая есть 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
});