refactoring

src/App.jsx

@@ -6,9 +6,89 @@ import {
   CSS2DObject,
 } from "three/addons/renderers/CSS2DRenderer";
 
-let camera, scene, renderer, labelRenderer, currentTexture;
+let camera,
+  scene,
+  renderer,
+  labelRenderer,
+  currentTexture,
+  currentMaterial,
+  timeline;
+let buttons = [];
+let currentButtons = [];
 const SPHERE_NAME = "sphere";
 
+const nodes = [
+  {
+    id: "1",
+    description: "House",
+    caption: "Дом",
+    panorama: "/src/assets/podval.jpg",
+    gps: [9, 2.1, 4.5],
+    directions: [
+      {
+        nodeId: "2",
+        gps: [-9, 2.1, 4.5],
+        description: "Beach",
+        caption: "Пляж",
+        panorama: "/src/assets/sea.jpg",
+      },
+      {
+        nodeId: "3",
+        gps: [-12, 2.1, 11.5],
+        description: "Mountain",
+        caption: "Горы",
+        panorama: "/src/assets/loc3.jpg",
+      },
+    ],
+  },
+  {
+    id: "2",
+    description: "Beach",
+    caption: "Пляж",
+    panorama: "/src/assets/sea.jpg",
+    gps: [-9, 2.1, 4.5],
+    directions: [
+      {
+        nodeId: "1",
+        gps: [9, 2.1, 4.5],
+        description: "House",
+        caption: "Дом",
+        panorama: "/src/assets/podval.jpg",
+      },
+      {
+        nodeId: "3",
+        gps: [-12, 2.1, 11.5],
+        description: "Mountain",
+        caption: "Горы",
+        panorama: "/src/assets/loc3.jpg",
+      },
+    ],
+  },
+  {
+    id: "3",
+    description: "Mountain",
+    caption: "Горы",
+    panorama: "/src/assets/loc3.jpg",
+    gps: [-12, 2.1, 11.5],
+    directions: [
+      {
+        nodeId: "1",
+        gps: [9, 2.1, 4.5],
+        description: "House",
+        caption: "Дом",
+        panorama: "/src/assets/podval.jpg",
+      },
+      {
+        nodeId: "2",
+        gps: [-9, 2.1, 4.5],
+        description: "Beach",
+        caption: "Пляж",
+        panorama: "/src/assets/sea.jpg",
+      },
+    ],
+  },
+];
+
 init();
 animate();
 
@@ -32,6 +112,8 @@ function createSphere(
   mesh.position.set(4.5, 2, 4.5);
   mesh.name = SPHERE_NAME;
 
+  currentMaterial = material;
+
   scene.add(mesh);
 }
 
@@ -43,7 +125,7 @@ function removeEntity(entityName) {
   }
 }
 
-function disableButton(button, buttons) {
+function disableButton(button) {
   for (let i = buttons.length - 1; i >= 0; i--) {
     const currentButton = buttons[i];
     const isButtonDisabled = currentButton.innerHTML === button.innerHTML;
@@ -52,10 +134,14 @@ function disableButton(button, buttons) {
     currentButton.style.visibility = isButtonDisabled ? "hidden" : "visible";
     currentButton.style.cursor = isButtonDisabled ? "default" : "pointer";
   }
+
+  if (button.innerHTML) {
+    removeEntity(button.innerHTML);
+    button.remove();
+  }
 }
 
-// JSON POINTS(markers, directions, )
-function createPoint(title, x, y, z) {
+function createButton(title, x, y, z) {
   const btn = document.createElement("button");
   btn.textContent = title;
   btn.style.backgroundColor = "#fff";
@@ -75,8 +161,48 @@ function createPoint(title, x, y, z) {
   return btn;
 }
 
+function createButtons(directions, nodes) {
+  const buttons = [];
+  directions.forEach((dir) => {
+    const cords = dir.gps;
+    const button = createButton(dir.caption, cords[0], cords[1], cords[2]);
+
+    button.addEventListener("click", () => {
+      const texture = new THREE.TextureLoader().load(dir.panorama);
+      const material = new THREE.MeshBasicMaterial({ map: texture });
+
+      const onCompleteCallback = () => {
+        selectLocation(material);
+        disableButtons(currentButtons);
+        const currentNode = nodes.find((node) => node.id === dir.nodeId);
+
+        if (currentNode) {
+          createButtons(currentNode.directions, nodes);
+        }
+      };
+
+      createSphere(5, 60, 40, texture, material);
+      animateTransition(timeline, onCompleteCallback);
+    });
+
+    buttons.push(button);
+  });
+
+  currentButtons = buttons;
+}
+
+function disableButtons(buttons) {
+  if (buttons.length !== 0) {
+    for (let i = 0; i < buttons.length; i++) {
+      const button = buttons[i];
+      disableButton(button);
+    }
+  }
+}
+
 function createScene() {
   const container = document.getElementById("root");
+  timeline = gsap.timeline();
 
   scene = new THREE.Scene();
   camera = new THREE.PerspectiveCamera(
@@ -111,68 +237,25 @@ function selectLocation(texture) {
   removeEntity(SPHERE_NAME);
 }
 
-function animateTransition(timeline, onCompleteCallback, material) {
+function animateTransition(timeline, onCompleteCallback) {
   timeline
     .to(currentTexture, {
       opacity: 0,
       onComplete: onCompleteCallback,
     })
-    .to(material, { opacity: 1 });
+    .to(currentMaterial, { opacity: 1 });
 }
 
 function init() {
   createScene();
 
-  const firstTexture = new THREE.TextureLoader().load("/src/assets/sea.jpg");
-  const secondTexture = new THREE.TextureLoader().load(
-    "/src/assets/podval.jpg"
-  );
-  const thirdTexture = new THREE.TextureLoader().load("/src/assets/loc3.jpg");
+  const currentNode = nodes[0];
+  const texture = new THREE.TextureLoader().load(currentNode.panorama);
+  const material = new THREE.MeshBasicMaterial({ map: texture });
 
-  const firstMaterial = new THREE.MeshBasicMaterial({ map: firstTexture });
-  const secondMaterial = new THREE.MeshBasicMaterial({ map: secondTexture });
-  const thirdMaterial = new THREE.MeshBasicMaterial({ map: thirdTexture });
-
-  const firstButton = createPoint("Loc 1", 9, 2.1, 4.5);
-  const secondButton = createPoint("Loc 2", -9, 2.1, 4.5);
-  const thirdButton = createPoint("Loc 3", -12, 2.1, 11.5);
-  const buttons = [firstButton, secondButton, thirdButton];
-
-  const timeline = gsap.timeline();
-
-  selectLocation(firstTexture);
-  createSphere(5, 60, 40, firstTexture, firstMaterial, true);
-  disableButton(secondButton, buttons);
-
-  firstButton.addEventListener("click", () => {
-    const onCompleteCallback = () => {
-      disableButton(firstButton, buttons);
-      selectLocation(firstTexture);
-    };
-
-    createSphere(5, 60, 40, secondTexture, secondMaterial);
-    animateTransition(timeline, onCompleteCallback, secondMaterial);
-  });
-
-  secondButton.addEventListener("click", () => {
-    const onCompleteCallback = () => {
-      disableButton(secondButton, buttons);
-      selectLocation(secondTexture);
-    };
-
-    createSphere(5, 60, 40, firstTexture, firstMaterial);
-    animateTransition(timeline, onCompleteCallback, firstMaterial);
-  });
-
-  thirdButton.addEventListener("click", () => {
-    const onCompleteCallback = () => {
-      disableButton(thirdButton, buttons);
-      selectLocation(thirdTexture);
-    };
-
-    createSphere(5, 60, 40, thirdTexture, thirdMaterial);
-    animateTransition(timeline, onCompleteCallback, thirdMaterial);
-  });
+  selectLocation(texture);
+  createSphere(5, 60, 40, texture, material, true);
+  createButtons(currentNode.directions, nodes);
 }
 
 function animate() {