Three.js 为什么这段代码要添加虚拟DOM元素来沿路径设置三个对象的动画？

我试图在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元素（我猜，这里称为“代理”）

并按照以下路径设置三个网格对象的动画

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元素？我觉得这很奇怪。 有没有更好的方法来实现这一点

原始代码位于以下链接中。

---

作为这支笔及其来源文章的原始创建者，我相信我使用了代理元素，因为MotionPathPlugin（目前）还不能处理纯WebGL对象。因此，为了利用插件的超级便捷功能，我创建了一个“代理”元素，它不会呈现到页面上，并将其应用到该页面上。然后将值转移到WebGL对象。

我对这个问题很好奇，所以我快速查看了gsap。它基本上是css动画的一种多边形填充，所以我猜将需要一个实际的dom元素来应用转换。@JoshGreifer GSAP远远不止是css动画的多边形填充：）请检查。