morphTargetInfluences
是Mesh
对象的属性,其作用是从0-1
开始的一组权重,指定了应用的变体数量,默认为undefined
。
也就是说影响的范围是0-1
,如果一个状态为1
而另一个状态为0
,则此时物体的形体状态是影响值为1
的那个形态。
1、示例
https://ithanmang.gitee.io/threejs/home/201809/20180904/03-morphTargetInfluenc-eanimation.html
可以通过改变影响值得权重,来改变立方体的形态。
2、步骤
2.1、创建几何体和材质
let cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
let cubeMaterial = new THREE.MeshNormalMaterial({
morphTargets:true});
注意:材质的morphTargets
属性,需要设置为true
2.2、创建两个目标顶点
// 目标顶点
let cubeTarget1 = new THREE.BoxGeometry(5, 20, 2);
let cubeTarget2 = new THREE.BoxGeometry(8, 2, 0);
2.3、将目标顶点加入 几何体的变形目标数组
cubeGeometry.morphTargets[0] = {
name: 't1', vertices: cubeTarget1.vertices};
cubeGeometry.morphTargets[1] = {
name: 't2', vertices: cubeTarget2.vertices};
cubeGeometry.computeMorphNormals();
每个变形目标都是一个对象,加入完成后需要重新计算变形的法线cubeGeometry.computeMorphNormals();
2.4、将携带变形目标数组的对象加入到场景
此时的 cubeGeometry
对象
然后创建网格并加入场景
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);
2.5、通过gui
进行调试
当然也可以使用补间动画来过渡
guiControls = new function () {
this.influence1 = 0.01;
this.influence2 = 0.01;
this.update = function () {
cube.morphTargetInfluences[0] = guiControls.influence1;
cube.morphTargetInfluences[1] = guiControls.influence2;
}
};
let gui = new dat.GUI();
gui.add(guiControls, 'influence1', 0, 1).onChange<