I am currently utilizing threex.webar (https://github.com/jeromeetienne/threex.webar) in a project involving Three.js with ArucoJS. My goal is to create a projection (markerObject3D) based on an AR marker, but positioned next to the marker rather than directly on it.
To achieve this, I have implemented the following using Three.js translateX() :
function render() {
translateMarker3D(markerObject3D);
movieMaterial.update();
backgroundTexture.update();
effect.render(scene, camera)
}
function translateMarker3D(marker3D) {
marker3D.translateX( 80 );
}
Although this method somewhat works, there is flickering happening when the projection is placed next to the marker, while it looks fine when it's directly on the marker.
I also attempted adjusting the returning values from aruco (in threex.jsarucomarker.js):
object3d.position.x = translation[0] + 80;
However, this change resulted in the same flickering issue.
Therefore, my question is: what is the most effective approach to creating a projection next to an AR marker using Three.js?
EDIT :
Setting up a live demo might be challenging, so I have uploaded a video on Youtube to demonstrate the problem : https://www.youtube.com/watch?v=SM1dZ29SZRk&feature=youtu.be
Nevertheless, you can access the complete code here : https://github.com/cned-di-dev/three-ar-proto/blob/master/tests/stereoscopic/index.html
Challenges I am facing :
- Flickering object during translation (it occasionally "bumps" when moved)
- Projection inaccuracies at times (when near the screen edge, the object shifts due to perspective camera, and I'm unable to resolve it)
Please note: I do not possess extensive knowledge in 3D concepts such as geometry and matrices.