在three.js中使用交错动画

Question

我想为网格数组设置动画，但无法识别属性tl.staggerFrom(array,2,{"position.y":-100})当我使用 console.log(array[0].position.y) 它给出 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

我使用代理解决了它我为每个网格创建了一个新的代理实例，并在其设置属性中我只是做我想做的事情并将代理添加到一个数组并交错使用该数组

例如：

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})