please check this video…
here is my basic code
import * as THREE from 'three';
import { ARButton } from 'three/examples/jsm/webxr/ARButton';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';
document.getElementById("shot").addEventListener('click', clickPhoto);
let container;
let camera, scene, renderer;
let controller;
let reticle;
let model=null;
let objectLoaded=false;
let hitTestSource = null;
let hitTestSourceRequested = false;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 20 );
//camera.position.set(50,50,50);
const light = new THREE.HemisphereLight( 0xffffff, 0xbbbbff, 5 );
light.position.set( 0.5, 1, 0.25 );
scene.add( light );
//
renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.xr.enabled = true;
//renderer.xr.getCamera().cameras[0]
container.appendChild( renderer.domElement );
//
const loader = new GLTFLoader()
//
document.body.appendChild( ARButton.createButton( renderer, { requiredFeatures: [ 'hit-test' ] } ) );
//
//const geometry = new THREE.CylinderGeometry( 0.1, 0.1, 0.2, 32 ).translate( 0, 0.1, 0 );
function onSelect() {
if ( reticle.visible ) {
loader.load('models/Building_Model.glb', function(gltf){
gltf.scene.scale.set(1.2, 1.2, 1.2);
model=gltf.scene;
if(scene.add(model))
{
console.log("model added");
//reticle.matrix.decompose(gltf.scene.position, gltf.scene.quaternion,gltf.scene.scale);
model.position.setFromMatrixPosition(reticle.matrix);
objectLoaded=true;
reticle.visible=false;
//doing this becasue object moves with camera
reticle.position.copy(new THREE.Vector3().setFromMatrixPosition(reticle.matrix));
//console.log("reticle posi after model",reticle.position);
};
},
undefined, function(error){
console.error(error);
});
}
}
controller = renderer.xr.getController( 0 );
controller.addEventListener( 'select', onSelect );
scene.add( controller );
reticle = new THREE.Mesh(
new THREE.RingGeometry( 0.15, 0.2, 32 ).rotateX( - Math.PI / 2 ),
new THREE.MeshBasicMaterial()
);
reticle.matrixAutoUpdate = false;
reticle.visible = false;
scene.add( reticle );
//
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
renderer.setAnimationLoop( render );
}
function render( timestamp, frame ) {
//doing this becasue object moves with camera
if (objectLoaded && model) {
// Ensure the model's position is maintained
model.position.copy(reticle.position);
}//
if(objectLoaded==false)
{
if ( frame ) {
const referenceSpace = renderer.xr.getReferenceSpace();
const session = renderer.xr.getSession();
if ( hitTestSourceRequested === false ) {
session.requestReferenceSpace( 'viewer' ).then( function ( referenceSpace ) {
session.requestHitTestSource( { space: referenceSpace } ).then( function ( source ) {
hitTestSource = source;
} );
} );
session.addEventListener( 'end', function () {
hitTestSourceRequested = false;
hitTestSource = null;
} );
hitTestSourceRequested = true;
}
if ( hitTestSource ) {
const hitTestResults = frame.getHitTestResults( hitTestSource );
if ( hitTestResults.length ) {
const hit = hitTestResults[ 0 ];
//console.log("hit posi",hitTestResults[0]);
console.log("Reticle is visible");
reticle.visible = true;
//console.log("reticle posi before model",reticle.position);
reticle.matrix.fromArray( hit.getPose( referenceSpace ).transform.matrix );
//console.log("Hit Posiii",reticle.matrix.fromArray( hit.getPose( referenceSpace ).transform.matrix ));
}
else {
console.log("reticle not visible");
reticle.visible = false;
}
}
}
}
renderer.render( scene, camera );
}
function clickPhoto()
{
renderer.render(scene, camera);
renderer.domElement.toBlob(function(blob){
var a = document.createElement('a');
var url = URL.createObjectURL(blob);
a.href = url;
a.download = 'canvas.png';
a.click();
}, 'image/png', 1.0);
}