你的描述听起来像线性插值。在这里使用它应该很简单:
一旦标记可见,获取之前的视频位置/旋转,并使用实际标记位置/旋转进行近似。然后用近似值更新视频。
近似值应该可以缓解“抖动”。在这种情况下,我将使用三个lerp
函数。如果您不熟悉线性插值,则可以将其视为使用线性函数进行逼近的方法(这可能非常不精确,但我是这么认为的)。
代码(附加到标记)如下所示:
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;
}
}
})
您会注意到我设置了object3D
而不是官方API ( setAttribute()
/ getAttribute()
) 的值。它应该更快,这在tick()
函数内进行更改时是可取的。
这是一个小故障(一个盒子被插值,它的移动非常顺利)。