Question

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

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

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

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

Answer 1

看起来您正在使用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});

Answer 2

我使用代理解决了我为每个网格创建一个新的代理实例，并在其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})

在three.js中使用交错动画

2 个答案: