Three.js：翻译投影的最佳方法？

我目前在项目中使用threex.webar（https://github.com/jeromeetienne/threex.webar）（带有ArucoJS的Three.js）。现在，我正在尝试基于AR标记进行投影（markerObject3D），但我希望它位于标记旁边，而不是它。Three.js：翻译投影的最佳方法？

以下是我实现了，使用three.js所平移X（）：

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

我所缺少的：

闪烁对象翻译（它只是“颠簸”有时，当时它的翻译）
投影是错误的，有时（在屏幕的边缘时，对象被翻译由于透视相机，但我不能修复它）

事情知道：我在三维的东西（几何，矩阵等）方面不太好。

来源

2016-03-15 enguerranws

你可以添加一个runnable/jsfiddle的例子吗？ – approxiblue

当我运行网络摄像头流时，我想我不能放置一个实例（因为网络摄像头流需要localhost/https服务器）。 – enguerranws

如果不是现场演示，演示问题的最小可行示例（[mcve]）也不错。 – approxiblue

通过“闪烁”来理解你的意思有点困难。但经过一些测试后，我想我知道你的意思。我认为问题在于detectMarkers()函数不能在每一帧中找到相同的标记位置，并且首先旋转markerObject，然后翻译然后。由于标记将在每帧的旋转方向上发生小的变化，并且沿着它的x轴进行平移，因此markerObject将会上下跳动，并且在进一步转换它时幅度会更大。

现在，解决方案取决于您对此翻译行为的要求。一种方法是将标记对象沿全局x轴进行转换。这可以通过给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的错误看起来更大。正如我之前所说的，您可以通过给markerObject最后几帧的平均翻译来隐藏这个效果。

我还注意到，标记有时会“歪歪扭扭”到一边。这也是因为markerDetection不完美，并且在某些帧中，它根本找不到标记。当它找不到标记时，仍然将markerObject翻译为40，并添加上一帧完成的翻译。你应该做的是：

删除线359：

~~translateMarker3D(markerObject3D);~~

，并添加这行323：

markerObject3D.translateX(40);

通过这样做，你翻译markerObject 只有它可以检测标记。

来源

2016-03-22 02:41:30 micnil

我不确定我了解你如何声明'markerParent'？ – enguerranws

@enguerranws我更新了我的答案。还添加了如何声明markerParent，它只是一个'THREE.Object3D' – micnil

谢谢，这样更好，我觉得不去想那件事。我只是等待测试更多（我现在不能这样做），并且肯定会检查这个答案。 – enguerranws

Three.js：翻译投影的最佳方法？

回答

相关问题