refactoring

src/App.jsx

@@ -1,6 +1,7 @@
 import * as THREE from "three";
 import { OrbitControls } from "three-orbitcontrols-ts";
 import { gsap } from "gsap";
+import { useEffect, useRef } from "react";
 import {
   CSS2DRenderer,
   CSS2DObject,
@@ -13,7 +14,6 @@ let camera,
   currentTexture,
   currentMaterial,
   timeline;
-let buttons = [];
 let currentButtons = [];
 const SPHERE_NAME = "sphere";
 
@@ -31,14 +31,16 @@ const nodes = [
         description: "Beach",
         caption: "Пляж",
         panorama: "/src/assets/sea.jpg",
+        // panorama: "/src/assets/loc3.jpg",
       },
-      {
-        nodeId: "3",
-        gps: [-12, 2.1, 11.5],
-        description: "Mountain",
-        caption: "Горы",
-        panorama: "/src/assets/loc3.jpg",
-      },
+      // {
+      //   nodeId: "3",
+      //   gps: [-12, 2.1, 11.5],
+      //   description: "Mountain",
+      //   caption: "Горы",
+      //   // panorama: "/src/assets/sea.jpg",
+      //   panorama: "/src/assets/loc3.jpg",
+      // },
     ],
   },
   {
@@ -46,6 +48,7 @@ const nodes = [
     description: "Beach",
     caption: "Пляж",
     panorama: "/src/assets/sea.jpg",
+    // panorama: "/src/assets/loc3.jpg",
     gps: [-9, 2.1, 4.5],
     directions: [
       {
@@ -71,19 +74,20 @@ const nodes = [
     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: "1",
+      //   gps: [9, 2.1, 4.5],
+      //   description: "House",
+      //   caption: "Дом",
+      //   panorama: "/src/assets/podval.jpg",
+      // },
       {
         nodeId: "2",
-        gps: [-9, 2.1, 4.5],
+        gps: [9, 2.1, 4.5],
         description: "Beach",
         caption: "Пляж",
         panorama: "/src/assets/sea.jpg",
+        // panorama: "/src/assets/loc3.jpg",
       },
     ],
   },
@@ -125,19 +129,16 @@ function removeEntity(entityName) {
   }
 }
 
-function disableButton(button) {
-  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";
+function removeButton(button) {
+  if (button) {
+    button.disabled = true;
+    button.style.visibility = "hidden";
+    button.style.cursor = "default";
+    button.remove();
   }
 
   if (button.innerHTML) {
     removeEntity(button.innerHTML);
-    button.remove();
   }
 }
 
@@ -172,8 +173,12 @@ function createButtons(directions, nodes) {
       const material = new THREE.MeshBasicMaterial({ map: texture });
 
       const onCompleteCallback = () => {
-        selectLocation(material);
-        disableButtons(currentButtons);
+        selectLocation(texture, material);
+
+        //Удаление текущих кнопок
+        removeButtons(currentButtons);
+
+        // поиск ноды, на которую будет переход после клика
         const currentNode = nodes.find((node) => node.id === dir.nodeId);
 
         if (currentNode) {
@@ -182,20 +187,19 @@ function createButtons(directions, nodes) {
       };
 
       createSphere(5, 60, 40, texture, material);
-      animateTransition(timeline, onCompleteCallback);
+      animateTransition(onCompleteCallback);
+      currentButtons = buttons;
     });
 
     buttons.push(button);
   });
-
-  currentButtons = buttons;
 }
 
-function disableButtons(buttons) {
+function removeButtons(buttons) {
   if (buttons.length !== 0) {
     for (let i = 0; i < buttons.length; i++) {
       const button = buttons[i];
-      disableButton(button);
+      removeButton(button);
     }
   }
 }
@@ -218,6 +222,10 @@ function createScene() {
   renderer.setSize(window.innerWidth, window.innerHeight);
   container.appendChild(renderer.domElement);
 
+  // if (refContainer) {
+  //   refContainer.current && refContainer.appendChild(renderer.domElement);
+  // }
+
   labelRenderer = new CSS2DRenderer();
   labelRenderer.setSize(window.innerWidth, window.innerHeight);
   labelRenderer.domElement.style.position = "absolute";
@@ -225,6 +233,11 @@ function createScene() {
   labelRenderer.domElement.style.pointerEvents = "none";
   container.appendChild(labelRenderer.domElement);
 
+  // if (refContainer) {
+  //   refContainer.current && refContainer.appendChild(labelRenderer.domElement);
+  //   // refContainer.current && refContainer.appendChild(renderer.domElement);
+  // }
+
   const controls = new OrbitControls(camera, renderer.domElement);
   controls.update();
   controls.target.set(4.5, 2, 4.5);
@@ -232,28 +245,38 @@ function createScene() {
   controls.rotateSpeed = 0.95;
 }
 
-function selectLocation(texture) {
+function selectLocation(texture, material) {
   currentTexture = texture;
+  currentMaterial = material;
   removeEntity(SPHERE_NAME);
 }
 
-function animateTransition(timeline, onCompleteCallback) {
+function animateTransition(onCompleteCallback) {
+  console.log("currentTexture", currentTexture);
   timeline
     .to(currentTexture, {
-      opacity: 0,
-      onComplete: onCompleteCallback,
+      onStart: () => console.time("test"),
+      onComplete: () => {
+        onCompleteCallback();
+        console.log("currentTexture1", currentTexture);
+        console.timeEnd("test");
+      },
+      duration: 0.5,
     })
-    .to(currentMaterial, { opacity: 1 });
+    .to(currentMaterial, {
+      opacity: 1,
+    });
 }
 
 function init() {
   createScene();
 
+  // Создание первой локации
   const currentNode = nodes[0];
   const texture = new THREE.TextureLoader().load(currentNode.panorama);
   const material = new THREE.MeshBasicMaterial({ map: texture });
 
-  selectLocation(texture);
+  selectLocation(texture, material);
   createSphere(5, 60, 40, texture, material, true);
   createButtons(currentNode.directions, nodes);
 }
@@ -268,15 +291,25 @@ function update() {
   labelRenderer.render(scene, camera);
 }
 
-// function App() {
-// 	useEffect(() => {
-// 		init()
-// 		animate()
-// 	}, [])
+// function Three() {
+//   const refContainer = useRef(null);
 
-// 	return (
-// 		<></>
-// 	)
+//   useEffect(() => {
+//     if (refContainer) {
+//       init(refContainer);
+//       animate();
+//     }
+//   }, []);
+
+//   return <div ref={refContainer}></div>;
+// }
+
+// function App() {
+//   return (
+//     <>
+//       <Three />
+//     </>
+//   );
 // }
 
 export default App;

src/main.jsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
 // import App1 from './App1.jsx'
-import './index.css'
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     {/* <App1 /> */}
     {/* <App /> */}
-  </React.StrictMode>,
-)
+  </React.StrictMode>
+);