为什么此代码添加虚拟 DOM 元素以沿路径为三个对象设置动画？

Question

我正在尝试沿着 three.js 中的路径移动对象。

我可以从 gsap 网站上找到一个例子，代码正在做一些我不明白的事情。

查看下面的代码。

var path = [{x: 0, y: 0, z: -100}, {x: 100, y: 200, z: -200}, {x: 200, y: 200, z: -50}, {x: 240, y: 100, z: -250}];

var proxy = document.createElement("p");
console.log(proxy)
gsap.to(proxy, {
  duration: 10, 
  repeat: -1, 
  motionPath: { 
    path, // equivalent to path: path
    autoRotate: true,
    useRadians: true
  },
  onUpdate: updateMesh
});

它创建了一个虚拟的 DOM 元素（我猜，这里叫做 'proxy'）。

并按照如下路径对三个网格对象进行动画处理。

var setX = gsap.quickSetter(cube.position, "x");
var setY = gsap.quickSetter(cube.position, "y");
var setZ = gsap.quickSetter(cube.position, "z");
var setRot = gsap.quickSetter(cube.rotation, "z");

function updateMesh() {
  setX(gsap.getProperty(proxy, "x"));
  setY(gsap.getProperty(proxy, "y"));
  setZ(gsap.getProperty(proxy, "z"));
  setRot(gsap.getProperty(proxy, "rotation"));
}

为什么这会创建一个虚拟 DOM 元素？这对我来说似乎很奇怪。有没有更好的方法来实现这个？

原代码在下面link。 https://codepen.io/GreenSock/pen/ZEGxzvJ?editors=1111

Answer 1

作为那支笔的原创者和它的来源 post，我相信我使用了一个代理元素，因为 MotionPathPlugin 不适用于直接的 WebGL 对象（目前）。因此，为了利用插件的超级便捷功能，我创建了一个不呈现到页面的“代理”元素并将其应用于该页面。然后将值传输到 WebGL 对象。

为什么此代码添加虚拟 DOM 元素以沿路径为三个对象设置动画？

why does this code add dummy DOM element for animating an three object along a path?

three.js

gsap