refactoring

src/App.jsx

@@ -5,10 +5,9 @@ import {
   CSS2DRenderer,
   CSS2DObject,
 } from "three/addons/renderers/CSS2DRenderer";
-import { useEffect } from "react";
 
-let camera, scene, renderer, labelRenderer, currentTexture, currentMaterial;
-const ENTITY_NAME = "sphere";
+let camera, scene, renderer, labelRenderer, currentTexture;
+const SPHERE_NAME = "sphere";
 
 init();
 animate();
@@ -31,36 +30,49 @@ function createSphere(
 
   const mesh = new THREE.Mesh(sphere, material);
   mesh.position.set(4.5, 2, 4.5);
-  mesh.name = ENTITY_NAME;
+  mesh.name = SPHERE_NAME;
 
   scene.add(mesh);
 }
 
 function removeEntity(entityName) {
-  var selectedEntity = scene.getObjectByName(entityName);
+  const selectedEntity = scene.getObjectByName(entityName);
+
   if (selectedEntity) {
     scene.remove(selectedEntity);
   }
 }
+
+function disableButton(button, buttons) {
+  for (let i = buttons.length - 1; i >= 0; i--) {
+    const currentButton = buttons[i];
+    const isButtonDisabled = currentButton.innerHTML === button.innerHTML;
+
+    currentButton.disabled = isButtonDisabled;
+    currentButton.style.visibility = isButtonDisabled ? "hidden" : "visible";
+    currentButton.style.cursor = isButtonDisabled ? "default" : "pointer";
+  }
+}
+
 // JSON POINTS(markers, directions, )
 function createPoint(title, x, y, z) {
-  const label = document.createElement("p");
-  label.textContent = title;
-  label.style.backgroundColor = "#fff";
-  label.style.borderRadius = "50%";
-  label.style.height = "60px";
-  label.style.width = "60px";
-  label.style.textAlign = "center";
-  label.style.pointerEvents = "auto";
-  label.style.cursor = "pointer";
+  const btn = document.createElement("button");
+  btn.textContent = title;
+  btn.style.backgroundColor = "#fff";
+  btn.style.border = "none";
+  btn.style.borderRadius = "50%";
+  btn.style.height = "60px";
+  btn.style.width = "60px";
+  btn.style.pointerEvents = "auto";
+  btn.style.cursor = "pointer";
 
-  const cPointLabel = new CSS2DObject(label);
-  cPointLabel.name = title;
-  scene.add(cPointLabel);
+  const cPointBtn = new CSS2DObject(btn);
+  cPointBtn.name = title;
+  scene.add(cPointBtn);
 
-  cPointLabel.position.set(x, y, z);
+  cPointBtn.position.set(x, y, z);
 
-  return label;
+  return btn;
 }
 
 function createScene() {
@@ -94,91 +106,72 @@ function createScene() {
   controls.rotateSpeed = 0.95;
 }
 
+function selectLocation(texture) {
+  currentTexture = texture;
+  removeEntity(SPHERE_NAME);
+}
+
+function animateTransition(timeline, onCompleteCallback, material) {
+  timeline
+    .to(currentTexture, {
+      opacity: 0,
+      onComplete: onCompleteCallback,
+    })
+    .to(material, { opacity: 1 });
+}
+
 function init() {
   createScene();
 
   const firstTexture = new THREE.TextureLoader().load("/src/assets/sea.jpg");
-  const firstMaterial = new THREE.MeshBasicMaterial({ map: firstTexture });
-
   const secondTexture = new THREE.TextureLoader().load(
     "/src/assets/podval.jpg"
   );
-  const secondMaterial = new THREE.MeshBasicMaterial({ map: secondTexture });
-
   const thirdTexture = new THREE.TextureLoader().load("/src/assets/loc3.jpg");
+
+  const firstMaterial = new THREE.MeshBasicMaterial({ map: firstTexture });
+  const secondMaterial = new THREE.MeshBasicMaterial({ map: secondTexture });
   const thirdMaterial = new THREE.MeshBasicMaterial({ map: thirdTexture });
 
-  currentTexture = firstTexture;
-  currentMaterial = firstMaterial;
-
-  createSphere(5, 60, 40, firstTexture, firstMaterial, true);
-
-  const firstPoint = createPoint("Loc 1", 9, 2.1, 4.5);
-  const secondPoint = createPoint("Loc 2", -9, 2.1, 4.5);
-  const thirdPoint = createPoint("Loc 3", -12, 2.1, 11.5);
-
-  secondPoint.style.opacity = 0;
+  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();
 
-  firstPoint.addEventListener("click", () => {
+  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);
-
-    timeline
-      .to(currentTexture, {
-        opacity: 0,
-        onComplete: () => {
-          firstPoint.style.opacity = 0;
-          secondPoint.style.opacity = 1;
-          thirdPoint.style.opacity = 1;
-
-          currentTexture = secondTexture;
-          currentMaterial = secondMaterial;
-
-          removeEntity(ENTITY_NAME);
-        },
-      })
-      .to(secondMaterial, { opacity: 1 });
+    animateTransition(timeline, onCompleteCallback, secondMaterial);
   });
 
-  secondPoint.addEventListener("click", () => {
+  secondButton.addEventListener("click", () => {
+    const onCompleteCallback = () => {
+      disableButton(secondButton, buttons);
+      selectLocation(secondTexture);
+    };
+
     createSphere(5, 60, 40, firstTexture, firstMaterial);
-
-    timeline
-      .to(currentTexture, {
-        opacity: 0,
-        onComplete: () => {
-          firstPoint.style.opacity = 1;
-          secondPoint.style.opacity = 0;
-          thirdPoint.style.opacity = 1;
-
-          currentTexture = firstTexture;
-          currentMaterial = firstMaterial;
-
-          removeEntity(ENTITY_NAME);
-        },
-      })
-      .to(firstMaterial, { opacity: 1 });
+    animateTransition(timeline, onCompleteCallback, firstMaterial);
   });
 
-  thirdPoint.addEventListener("click", () => {
+  thirdButton.addEventListener("click", () => {
+    const onCompleteCallback = () => {
+      disableButton(thirdButton, buttons);
+      selectLocation(thirdTexture);
+    };
+
     createSphere(5, 60, 40, thirdTexture, thirdMaterial);
-
-    timeline
-      .to(currentTexture, {
-        opacity: 0,
-        onComplete: () => {
-          firstPoint.style.opacity = 1;
-          secondPoint.style.opacity = 1;
-          thirdPoint.style.opacity = 0;
-
-          currentTexture = thirdTexture;
-          currentMaterial = thirdMaterial;
-
-          removeEntity(ENTITY_NAME);
-        },
-      })
-      .to(thirdMaterial, { opacity: 1 });
+    animateTransition(timeline, onCompleteCallback, thirdMaterial);
   });
 }