Javascript A帧：平滑位置和旋转？

我一直在尝试使用Aframe和AR.js。对于增强现实应用程序，一个常见的问题是放置在标记上的对象变得相当“抖动”或“急动”。我已经对这个问题做了一些研究，似乎解决这个问题的一个可能方法是在几个帧上平滑旋转和位置。不幸的是，关于这样做的教程几乎不存在，我刚刚开始接触Html/Javascript

因此，我的问题是：你知道在一个框架实体中是否可能有一个函数，提取位置和旋转，平滑它们，然后将它们传递给（我想象）一个使用这些平滑值进行放置的子实体

<a-entity position="0 0 0" rotation="0 0 0" >
   <a-video Mysmoothingfunction src="#video" width="3.5" height="2"></a-video>
</a-entity>

我可以想象一开始可能是这样的：

<script type="text/javascript"> 
   AFRAME.registerComponent("listener", {
    schema : 
    {
        stepFactor : {
            type : "number",
            default : 0.05
        }
    },
   tick: function() {
       this.getProperty("position"); // something like this?
      }
</script>

AFRAME.registerComponent("listener", {
  init: function() {
    this.target = document.querySelector('#target'); // your video
    this.prevPosition = null; // initially there is no position or rotation
    this.prevRotation = null;
  },

  tick: function() {
    if (this.el.object3D.visible) {
      this.target.setAttribute('visible', 'true')

      if(!this.prevPosition && !this.prevRotation) { 
        // there are no values to lerp from - set the initial values
        this.target.setAttribute('position', this.el.getAttribute('position'))
        this.target.setAttribute('rotation', this.el.getAttribute('rotation'))
      } else {
        // use the previous values to get an approximation 
        this.target.object3D.position.lerp(this.prevPosition, 0.1)

        // this (below) may seem ugly, but the rotation is a euler, not a THREE.Vector3, 
        // so to use the lerp function i'm doing some probably unnecessary conversions
        let rot = this.target.object3D.rotation.toVector3().lerp(this.prevRotation, 0.1)
        this.target.object3D.rotation.setFromVector3(rot)
      }
      // update the values
      this.prevPosition = this.el.object3D.position
      this.prevRotation = this.el.object3D.rotation
    } else {
     // the marker dissapeared - reset the values
     this.target.setAttribute('visible', 'false')
     this.prevPosition = null;
     this.prevRotation = null;
   }
  }
})

注册表组件（“侦听器”{
模式：
{
阶跃因子：{
键入：“数字”，
默认值：0.05
}
},
勾选：函数（）{
this.getProperty（“position”）；//类似这样的内容？
}

---

你知道如何解决这个问题吗？

你的描述听起来很像。在这里使用它应该很简单：

一旦标记可见，获取上一个视频位置/旋转，并使用实际的标记位置/旋转进行近似。然后使用近似值更新视频

近似值应该会减轻“抖动”。在这种情况下，我将使用函数。 如果您不熟悉，那么可以将其视为使用线性函数的近似方法（这可能非常不精确，但我就是这么认为的）

代码（附加到标记）如下所示：

<script type="text/javascript"> 
   AFRAME.registerComponent("listener", {
    schema : 
    {
        stepFactor : {
            type : "number",
            default : 0.05
        }
    },
   tick: function() {
       this.getProperty("position"); // something like this?
      }
</script>

AFRAME.registerComponent("listener", {
  init: function() {
    this.target = document.querySelector('#target'); // your video
    this.prevPosition = null; // initially there is no position or rotation
    this.prevRotation = null;
  },

  tick: function() {
    if (this.el.object3D.visible) {
      this.target.setAttribute('visible', 'true')

      if(!this.prevPosition && !this.prevRotation) { 
        // there are no values to lerp from - set the initial values
        this.target.setAttribute('position', this.el.getAttribute('position'))
        this.target.setAttribute('rotation', this.el.getAttribute('rotation'))
      } else {
        // use the previous values to get an approximation 
        this.target.object3D.position.lerp(this.prevPosition, 0.1)

        // this (below) may seem ugly, but the rotation is a euler, not a THREE.Vector3, 
        // so to use the lerp function i'm doing some probably unnecessary conversions
        let rot = this.target.object3D.rotation.toVector3().lerp(this.prevRotation, 0.1)
        this.target.object3D.rotation.setFromVector3(rot)
      }
      // update the values
      this.prevPosition = this.el.object3D.position
      this.prevRotation = this.el.object3D.rotation
    } else {
     // the marker dissapeared - reset the values
     this.target.setAttribute('visible', 'false')
     this.prevPosition = null;
     this.prevRotation = null;
   }
  }
})

您可以注意到，im设置的是

object3D

的值，而不是官方（

setAttribute（）

/

getAttribute（）

）的值。在

tick（）

函数中进行更改时，这应该更快

---

是一个小故障（插入一个框，其移动非常平稳）.

很快，当标记被找到或丢失时，会有一个事件。嘿@Piotr Adam Milewski，我真的很喜欢你上面发布的代码。在试图理解并可能使用它时，我发现了两个问题。我在AR.js repo上创建了一个问题来讨论这个问题：也许你想加入进来。