javascript - 三.js : Best way to translate the projection?

Question

我目前正在一个项目(Three.js 和 ArucoJS)上使用 threex.webar ( https://github.com/jeromeetienne/threex.webar )。现在，我正在尝试基于 AR 标记进行投影 (markerObject3D)，但我希望它位于标记旁边，而不是标记上。

这是我使用 Three.js translatex() 实现的方法:

function render() {

    translateMarker3D(markerObject3D);
        movieMaterial.update();
        backgroundTexture.update();
        effect.render(scene, camera)
}
function translateMarker3D(marker3D) {
       marker3D.translateX( 80 );
}  

事情是:它有点工作。它闪烁很多，当它没有翻译时很好(所以:当它在标记旁边时会闪烁，但当它在标记上时会闪烁)。

我还尝试更改 aruco 的返回值(在 threex.jsarucommarker.js 中):

object3d.position.x = translation[0] + 80;

但它渲染完全一样，闪烁。

所以我的问题是:使用 Three.js 在 AR 标记旁边进行投影的最佳方法是什么？

编辑:

由于现场演示很难设置，我刚刚在 Youtube 上上传了一段视频来说明我的观点:https://www.youtube.com/watch?v=SM1dZ29SZRk&feature=youtu.be

但是，您可以在此处查看完整代码:https://github.com/cned-di-dev/three-ar-proto/blob/master/tests/stereoscopic/index.html

我错过了什么:

• 翻译时闪烁的对象(有时它只是“颠簸”已翻译)
• 投影有时会出错(在屏幕边缘，对象因透视相机而被平移，但我无法修复它)

需要知道的事情:我不太擅长 3D 东西(几何、矩阵等)。

Answer 1

有点难以理解“闪烁”的意思。但是经过一些测试，我想我明白你的意思了。我认为问题在于 detectMarkers() 函数无法在每一帧中找到精确相同的标记位置，并且首先旋转 markerObject，然后然后 翻译。

由于标记在每一帧的旋转中都会有一个小的变化，并且会沿其新 x 轴平移，因此标记对象会上下跳动，并且幅度会大于你进一步翻译它。

现在，解决方案取决于您对此翻译行为的要求。一种方法是只沿全局 x 轴平移 markerObject。这可以通过给 markerObject 一个父对象并翻译它来实现:

var markerParent = new THREE.Object3D();
var markerObject3D = new THREE.Object3D();
markerParent.add(markerObject3D);
markerParent.translateX(80); // you can do this just one time
scene.add(markerParent)

另一种方法是更改​​ markerToObject3D(marker, object3d) 源代码中的转换顺序，以便在旋转之前完成转换(并将转换添加到 object3d.position.x ).

如果您不想沿全局 x 轴平移 markerObject，而是沿其局部平移，则消除闪烁会有点困难。一种方法是为 markerObject 提供最后几帧的平均翻译，而不是让 JsArucoMarker 为每一帧计算一个新的翻译。或者，也许更好，给它最后几帧的平均旋转。

另一种使运动更平滑的方法是在每一帧内插其位置，这将减少“跳跃”

编辑

我观看了您的视频，确认了翻译存在的问题之一，如图所示:

这仅说明了绕局部 z 轴旋转的杠杆作用，但绕 x 和 y 轴旋转也是如此。翻译会让markerdetection的error看起来更大。正如我之前所说，您可以通过为 markerObject 提供最后几帧的平均翻译来稍微隐藏这种效果。

我还注意到标记有时会“嗖”的一声移到一边。这也是因为 markerDetection 并不完美，在某些帧中，它根本找不到标记。当它没有找到标记时，您仍然将 markerObject 平移 40，加上上一帧完成的平移。你应该做的是:

删除第 359 行:

translateMarker3D(markerObject3D);

并将其添加到第 323 行:

markerObject3D.translateX(40);

通过这样做，您可以翻译 markerObject 只有当它可以检测到标记时。