时间戳

首页 > 解决方案 > 如何从搅拌机 GLTF 形状键更新 threejs 变形目标

javascript - 如何从搅拌机 GLTF 形状键更新 threejs 变形目标

问题描述

我有一个带有几个形状键的搅拌机文件。当我将搅拌机中的滑块拖动到 0 和 1 之间时，我可以操纵形状键。

（截图）： https ://share.getcloudapp.com/bLuw8L0W

我正在导出 GLTF 并将其导入到 threejs 中。

如果我console.log是来自 GLTF 的网格，我可以在 中看到来自搅拌机的形状键morphTargetDictionary，并且我已经设置了一个 GUI 来更新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

标签： javascriptthree.jsgltf

解决方案

您要定位的对象是网格，即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
});

推荐阅读