🎯
Image Target
THREE.JS PREVIEW
-- FPS
🎯
Image Target
Détecte et track une image 2D dans le monde réel. Ancre des objets 3D sur la cible.
// TempusXR SDK — Image Target
import { TempusXR } from '@tempusxr/sdk';
const ar = new TempusXR();
ar.imageTarget({
src: './targets/logo.mind',
onFound: (anchor) => anchor.add(model)
});
import { TempusXR } from '@tempusxr/sdk';
const ar = new TempusXR();
ar.imageTarget({
src: './targets/logo.mind',
onFound: (anchor) => anchor.add(model)
});
MindAR.jsThree.jsA-FrameiOS + Android
🥫
Cylinder Image Target
Track des surfaces cylindriques (canettes, bouteilles). Wrapping d'image sur cylindre 3D.
// TempusXR SDK — Cylinder Target
ar.cylinderTarget({
src: './targets/can.mind',
radius: 0.03, height: 0.12,
onFound: (a) => a.playAnimation('spin')
});
ar.cylinderTarget({
src: './targets/can.mind',
radius: 0.03, height: 0.12,
onFound: (a) => a.playAnimation('spin')
});
MindAR.jsWIP
😶
Face Tracking
468 landmarks faciaux en temps réel. Masques, lunettes, filtres AR.
// TempusXR SDK — Face Tracking
ar.faceTracking({
maxFaces: 2,
onFaceDetected: (face) => {
face.attachMask(maskModel);
face.attachToLandmark('nose', glasses);
}
});
ar.faceTracking({
maxFaces: 2,
onFaceDetected: (face) => {
face.attachMask(maskModel);
face.attachToLandmark('nose', glasses);
}
});
MindAR.js468 landmarksiOS + Android
🌍
World Tracking (SLAM)
ARCore (Android) + ARKit (iOS) via WebXR. SLAM natif du device — zéro drift, zéro recodage.
// WebXR — Hit-test + Plane detection
ar.worldTracking({
mode: 'hit-test',
onPlaneFound: (p) => p.placeObject(model),
onHitTest: (pose) => reticle.position.copy(pose)
});
ar.worldTracking({
mode: 'hit-test',
onPlaneFound: (p) => p.placeObject(model),
onHitTest: (pose) => reticle.position.copy(pose)
});
WebXR APIARCoreARKitHit-test
📍
Spatial Anchors
Objets ancrés dans l'espace physique, persistants entre sessions.
// WebXR Anchors API
ar.spatialAnchor({
position: pose.transform,
onCreated: (anchor) => {
anchor.attach(model);
anchor.persist();
}
});
ar.spatialAnchor({
position: pose.transform,
onCreated: (anchor) => {
anchor.attach(model);
anchor.persist();
}
});
WebXR AnchorsAndroid ChromeiOS partial
🧭
Rotation Tracking
Orientation device (alpha, beta, gamma). Fonctionne sur tous les mobiles sans WebXR.
// DeviceOrientation API
ar.rotationTracking({
smooth: 0.1,
onRotation: ({ alpha, beta, gamma }) => camera.setRotation(alpha, beta, gamma)
});
ar.rotationTracking({
smooth: 0.1,
onRotation: ({ alpha, beta, gamma }) => camera.setRotation(alpha, beta, gamma)
});
DeviceOrientationUniversaliOS + Android
🌅
Sky Effects
Remplace le ciel réel par un environnement 3D. Composants open source 8th Wall (MIT).
// 8th Wall OSS — Sky Effects
ar.skyEffects({
skybox: './env/sunset.hdr',
blend: 0.8,
lighting: true,
onReady: () => ar.start()
});
ar.skyEffects({
skybox: './env/sunset.hdr',
blend: 0.8,
lighting: true,
onReady: () => ar.start()
});
8th Wall OSSMIT LicenseHDR Skybox
🚪
AR Portal
Portail vers un monde virtuel ancré dans le sol. Stencil buffer Three.js pour l'effet de découpe.
// Three.js Stencil Portal
ar.arPortal({
shape: 'arch',
world: './scenes/forest.glb',
width: 1.2, height: 2.0,
onEnter: () => audio.play('ambient')
});
ar.arPortal({
shape: 'arch',
world: './scenes/forest.glb',
width: 1.2, height: 2.0,
onEnter: () => audio.play('ambient')
});
Three.js StencilWIP
🖐️
Hand & Finger Tracking
21 landmarks par main, détection de gestes pinch, grab, swipe via MediaPipe.
// MediaPipe Hands
ar.handTracking({
maxHands: 2,
gestures: ['pinch', 'grab'],
onGesture: ({ type, hand }) =>
type === 'pinch' && objects.select(hand.indexTip)
});
ar.handTracking({
maxHands: 2,
gestures: ['pinch', 'grab'],
onGesture: ({ type, hand }) =>
type === 'pinch' && objects.select(hand.indexTip)
});
MediaPipe21 landmarksWIP