A visual marker on the ground. Move the detection beam onto the target — on lock, a 3D object materialises and stays anchored. This is the fundamental principle of AR image-target.
// Marqueur AR — ancrage 3D sur cible visuelle (three.js)
const renderer = new THREE.WebGLRenderer({antialias:true,alpha:true});
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, W/H, 0.1, 100);
camera.position.set(0, 3, 5);
// Raycaster vers plan Y=0 (sol AR)
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
const plane = new THREE.Plane(new THREE.Vector3(0,1,0), 0);
raycaster.ray.intersectPlane(plane, hitPoint);
// Si hitPoint proche du centre marqueur => ancré = true
const dist = hitPoint.distanceTo(markerCenter);
if(dist < threshold) anchorObject.visible = true;
Move slowly towards the marker and observe the moment of lock. What happens if two markers overlap in a real AR app? Why do AR algorithms prefer high-contrast markers?
Design AR experiences that truly anchor in the real world
Book a session