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：翻譯投影的最佳方法？

回答

相關問題