在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 arrayvar allPositions = [];for (var i = 0; i < array.length; i++) {&nbsp; &nbsp; allPositions.push(array[i].position);}// Now use the shallower objects to animate the y attributetl.staggerFrom(allPositions,2,{y: -100});

Answer 2

我使用代理解决了它我为每个网格创建了一个新的代理实例，并在其设置属性中我只是做我想做的事情并将代理添加到一个数组并交错使用该数组例如：for(let i=0;i<5;i++){&nbsp; &nbsp; let mesh = new THREE.Mesh(geometry,material);&nbsp; &nbsp; let proxy = new Proxy({positionY:null},{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;set(target,key,value){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target[key] = value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(target[key] !== null){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;mesh.position.y = target.positionY&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; get(target,key){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return target[key];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })proxy.positionY = 0aarray.push(proxy)}tl.staggerFrom(aarray,5,{positionY:-100})