how to use hit test to spawn Gaussia splat use three.js ?

[ramaramx]

import { useEffect, useRef } from 'react';
import * as GaussianSplats3D from '@mkkellogg/gaussian-splats-3d';
import * as THREE from 'three';

const GaussianSplatViewer = ({ file, backgroundColor, icon }) => {
const containerRef = useRef(null);

useEffect(() => {
if (!file) {
console.error('No file path provided');
return;
}

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
const { r, g, b } = backgroundColor;
renderer.setClearColor(new THREE.Color().setRGB( r, g, b ));
containerRef.current.appendChild(renderer.domElement);

// Setup camera
const camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 500);
camera.position.copy(new THREE.Vector3().fromArray([-20, -3, -4]));
camera.lookAt(new THREE.Vector3().fromArray([0, 0, 0]));
camera.up = new THREE.Vector3().fromArray([0, -1, 0]).normalize();

// Setup Three.js scene
const threeScene = new THREE.Scene();

// Initialize viewer and load splat scenes
let viewer;
try {
  viewer = new GaussianSplats3D.Viewer({
    webXRMode: GaussianSplats3D.WebXRMode.AR,
    threeScene: threeScene,
    webXRSessionInit: false,
    renderer: renderer,
    camera: camera,
    cameraUp: [0, 0, 0],
    initialCameraPosition: [0, 0, 0],
    initialCameraLookAt: [0, 0, 0],
    sharedMemoryForWorkers: false,
  });
  
  viewer.addSplatScenes([
    {
      path: file,  
      position: [0, -1.8, -5],
      rotation: new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0.01933, -0.75830, -0.65161).normalize(), new THREE.Vector3(0, 1.3, 0)).toArray(),
      scale: [0.5, 0.5, 0.5],
      splatAlphaRemovalThreshold: 20,
      
    }
  ], true)
  .then(() => {
    viewer.start();
});
} catch (error) {
  console.error("Failed to initialize GaussianSplats3D viewer:", error);
}

// Setup controls
const controls = new GaussianSplats3D.OrbitControls(camera, renderer.domElement);
controls.rotateSpeed = 0.5;
controls.maxPolarAngle = Math.PI * 0.75;
controls.minPolarAngle = 0.1;
controls.enableDamping = true;
controls.dampingFactor = 0.05;

// Animation loop
const animate = () => {
  controls.update();
  renderer.render(threeScene, camera);
  requestAnimationFrame(animate);
};
animate();

// Handle window resize
const handleResize = () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
};
window.addEventListener('resize', handleResize);
handleResize(); // call once initially

// Cleanup on component unmount
return () => {
  window.removeEventListener('resize', handleResize);
  controls.dispose();
  renderer.dispose();
  viewer.dispose();
  if (containerRef.current) {
    containerRef.current.removeChild(renderer.domElement);
  }
};

}, [file, backgroundColor]);

return (
<>
<div
ref={containerRef}
style={{
width: '100vw',
height: '100vh',
position: 'absolute',
top: 0,
left: 0,
overflow: 'hidden',
}}
/>
{icon && (
<img src={icon} style={{
position: 'absolute',
top: '5vh',
right: '10%',
width: '50px',
height: '50px',
}} />
)}
{/* <button
onClick={startARSession}
style={{
position: 'absolute',
top: '20px',
left: '20px',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
color: 'white',
padding: '10px',
borderRadius: '5px',
}}
>
Start AR Session
*/}
</>
);
};

export default GaussianSplatViewer;

how i can create reticle to hit test Model and place model use AR ?