Currently, I am utilizing a cutting-edge augmented reality library that specializes in advanced image tracking capabilities. Despite extensively studying this project, I have reached a point where I require assistance. Essentially, the library generates an anchor point at the center of a real-world image target through the camera, and then manipulates the virtual world based on the physical camera.
My objective is to consistently orient plane.rotation towards the camera while maintaining plane.position fixed to the anchor point. Moreover, the values of plane.rotation will play a crucial role in future development stages.
const THREE = window.MINDAR.IMAGE.THREE;
document.addEventListener('DOMContentLoaded', () => {
const start = async() => {
// initialize MindAR
const mindarThree = new window.MINDAR.IMAGE.MindARThree({
container: document.body,
imageTargetSrc: '../../assets/targets/testQR.mind',
});
const {renderer, scene, camera} = mindarThree;
// create AR object
const geometry = new THREE.PlaneGeometry(1, 1.25);
const material = new THREE.MeshBasicMaterial({color: 0x00ffff, transparent: true, opacity: 0.5});
const plane = new THREE.Mesh(geometry, material);
// create anchor
const anchor = mindarThree.addAnchor(0);
anchor.group.add(plane);
// start AR
await mindarThree.start();
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
});
}
start();
});
I have attempted various strategies so far, all of which are encompassed within the current refined draft code structure. While I have explored potential solutions, my limited expertise has led me to seek external guidance for resolving this issue.
Identify the plane object by its group index number;
Drive (override lib?) object rotation (x, y, z) to face the camera;Potential solutions from developers:
- "You can retrieve those values via the anchor object, such as
anchor.group.position. This implies that you can access these values using the existing three.js API without integrating it into rendering i.e. refraining from appending therenderer.domElementto the document." - "You could delve into the source code of mindar (as it's open source)."
- "Another potentially simpler approach for you might be to create a new camera yourself. It is possible to utilize multiple cameras and render an additional layer atop the existing one with your new camera."
- "You can retrieve those values via the anchor object, such as