Three.js : 翻译投影的最佳方式？

Question

我目前正在一个项目中使用 threex.webar (https://github.com/jeromeetienne/threex.webar)（Three.js with ArucoJS）。现在，我正在尝试基于 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.jsarucomarker.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

我错过了什么：

翻译时对象闪烁（只是 "bumps" 有时已翻译）
投影有时会出错（在屏幕边缘，由于透视相机，对象被平移，但我无法修复它）

要知道的事情：我不太擅长 3D 东西（几何、矩阵等）。

Answer 1

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

由于标记在每一帧的旋转中都会有一个小的变化，并且会沿其 new 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 为每一帧计算一个新的翻译。或者，也许更好，给它最后几帧的平均旋转。

另一种使运动更平滑的方法是在每一帧内插其位置，这将减少很多"jumpy"

编辑

我看了你的视频，确认了翻译中的一个问题，如图所示：

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

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

删除第 359 行：

~~translateMarker3D(markerObject3D);~~

并将其添加到第 323 行：

markerObject3D.translateX(40);

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

Three.js : 翻译投影的最佳方式？

Three.js : Best way to translate the projection?

javascript

three.js

augmented-reality