Fix: Removed double instantion

webxr-cube/src/components/XRRenderer.tsx

@@ -7,7 +7,8 @@ import { Cube } from "../model/Cube";          // custom class for a simple cube
 import { GLTFModel } from "../model/GLTFModel"; // custom loader for .glb 3D models
 import { ARBottomBar } from "./ARBottomBar";
 import {RoomEnvironment} from "three/examples/jsm/environments/RoomEnvironment";
-import {addLightToScene, createCamera, createPlacementRing, createRenderer, setSceneBackground} from "./Setup.ts";    // bottom UI for selecting objects
+import {addLightToScene, createCamera, createPlacementRing, createRenderer, setSceneBackground} from "./Setup.ts";
+import type {WebGLRenderer} from "three";    // bottom UI for selecting objects
 
 
 function createARButton(renderer: WebGLRenderer, overlayRef: React.RefObject<HTMLDivElement>) {
@@ -57,15 +58,6 @@ function toLocalMeters(ll: LLA, origin: LLA) {
   return { x: dLon * kLon, z: dLat * kLat }; // x=east, z=north
 }
 
-// Objects for Navigation to the building once user tap the labels
-const arrowsRef = useRef<THREE.Object3D[]>([]);
-const navigatingRef = useRef<{ active: boolean; pathLLA: LLA[]; targetIndex: number } | null>(null);
-const raycaster = useRef(new THREE.Raycaster());
-const tapNDC = useRef(new THREE.Vector2());
-
-
-
-
 export const XRRenderer: React.FC = () => {
 
   // References to DOM elements (we connect three.js canvas + overlay here)
@@ -73,6 +65,12 @@ export const XRRenderer: React.FC = () => {
   const overlayRef = useRef<HTMLDivElement>(null);   // the overlay UI inside AR (buttons etc.)
   const reticleRef = useRef<THREE.Mesh | null>(null);// reference to the green reticle ring
 
+  // Objects for Navigation to the building once user tap the labels
+  const arrowsRef = useRef<THREE.Object3D[]>([]);
+  const navigatingRef = useRef<{ active: boolean; pathLLA: LLA[]; targetIndex: number } | null>(null);
+  const raycaster = useRef(new THREE.Raycaster());
+  const tapNDC = useRef(new THREE.Vector2());
+
   // 🟡 ADD holds loaded POIs and their label meshes
   const poiRuntimeRef = useRef<POIRuntime[]>([]);
 
@@ -255,7 +253,6 @@ export const XRRenderer: React.FC = () => {
 
       // Labels within 500 m (always-on visibility rule)
       const MAX_LABEL_DIST_M = 500;
-      const camPos = new THREE.Vector3();
       camera.getWorldPosition(camPos);
 
       for (const item of poiRuntimeRef.current) {

webxr-cube/vite.config.ts

@@ -5,6 +5,6 @@ export default defineConfig({
   plugins: [react()],
   server: {
     host: 'localhost',  // bind to all interfaces
-    port: 8080,
+    port: 8081,
   },
 });