在three.js中使用交错动画

时间:2019-11-11 09:23:52

标签: javascript three.js tween

我想设置网格物体的动画,但是属性无法识别

tl.staggerFrom(array,2,{"position.y":-100})

position.y不变 当我使用console.log(array [0] .position.y)时,它会给出position.y的初始值。

如何在Threejs网格中使用交错动画

2 个答案:

答案 0 :(得分:0)

看起来您正在使用GSAP(TweenMax),并且该库要求您使用浅对象作为其动画参数。这意味着您不能为2级以上深度的变量设置动画。您不能要求它为array[0].position.y设置动画,但是您可以可以要求它为position.y设置动画。考虑到这一点,请考虑以下几点:

// Save reference to all positions into a new array
var allPositions = [];
for (var i = 0; i < array.length; i++) {
    allPositions.push(array[i].position);
}

// Now use the shallower objects to animate the y attribute
tl.staggerFrom(allPositions,2,{y: -100});

答案 1 :(得分:0)

我使用代理解决了 我为每个网格创建一个新的代理实例,并在其set属性中做我想做的事情,然后将代理添加到数组中,并交错使用该数组

例如:

for(let i=0;i<5;i++){
    let mesh = new THREE.Mesh(geometry,material);
    let proxy = new Proxy({positionY:null},{
           set(target,key,value){
                    target[key] = value;
                    if(target[key] !== null){
                         mesh.position.y = target.positionY
                    }
                     return true;
                },
                get(target,key){
                    return target[key];
                }
            })
proxy.positionY = 0
aarray.push(proxy)
}
tl.staggerFrom(aarray,5,{positionY:-100})