此博文由一个话题引出,原话题是通过滑条控制页面上显示3D模型的某个部分,于是我就来尝试了一下。
由于Three.js我也已经2年没碰了,而且在项目里只用过一次,所以并不是很清楚它是否能通过本身的功能达到这个效果,甚至一开始我已经在想手搓点坐标来达到目标了。
但手搓点坐标实在太麻烦了一点,我就回到blender想看看通常用于控制形变的形态键是否可以导出来使用,然后发现确实可以,这样就方便了,只要控制形态键的数值就可以对模型的形态进行定量控制,以下是操作过程:
首先创建模型
然后为模型添加一个形态键,取好名字“形态1”,并调整好目标形态
这里我就简单把立方体的一条边拉长了,接着直接把这个模型导出(选中立方体后导出时勾上”选中的物体“),我这里是导出为glTF单文件格式,也就是glb文件,因为three.js的示例上建议使用此格式。
然后开始码代码
在这个项目中,这个立方体的three.js对象变量名为`model`,最主要的部分就是如何修改这个对象的形态键值。我翻了一下文档搜索morph关键词没找到,然后把这个对象log打出来一层层找,让我找到了。
只要先获取形态键索引,再通过形态键索引修改对应的值,合在一起写就是:
model.morphTargetInfluences[model.morphTargetDictionary['形态1']]=controllerValue;//controllerValue是滑条的值
完整的代码在https://cn9ice.coding.net/public/demo/threejs_morph_demo/git/files
在线示例(可能会加载较慢,稍等):
本文发布于 https://luojia.me
本站文章未经文下加注授权不得拷贝发布。