[WebGL]使用javascript控制模型形变

此博文由一个话题引出，原话题是通过滑条控制页面上显示3D模型的某个部分，于是我就来尝试了一下。

由于Three.js我也已经2年没碰了，而且在项目里只用过一次，所以并不是很清楚它是否能通过本身的功能达到这个效果，甚至一开始我已经在想手搓点坐标来达到目标了。

但手搓点坐标实在太麻烦了一点，我就回到blender想看看通常用于控制形变的形态键是否可以导出来使用，然后发现确实可以，这样就方便了，只要控制形态键的数值就可以对模型的形态进行定量控制，以下是操作过程：

然后为模型添加一个形态键，取好名字“形态1”，并调整好目标形态

这里我就简单把立方体的一条边拉长了，接着直接把这个模型导出（选中立方体后导出时勾上”选中的物体“），我这里是导出为glTF单文件格式，也就是glb文件，因为three.js的示例上建议使用此格式。

在这个项目中，这个立方体的three.js对象变量名为`model`，最主要的部分就是如何修改这个对象的形态键值。我翻了一下文档搜索morph关键词没找到，然后把这个对象log打出来一层层找，让我找到了。

只要先获取形态键索引，再通过形态键索引修改对应的值，合在一起写就是：

model.morphTargetInfluences[model.morphTargetDictionary['形态1']]=controllerValue;//controllerValue是滑条的值

在线示例（可能会加载较慢，稍等）：

本文发布于 https://luojia.me

本站文章未经文下加注授权不得拷贝发布。