refactoring

src/App.css

@@ -1,4 +1,4 @@
 #root {
-  margin: 0 auto;
+  /* margin: 0 auto; */
   text-align: center;
 }

src/App.jsx

@@ -93,8 +93,8 @@ const nodes = [
   },
 ];
 
-init();
-animate();
+// init();
+// animate();
 
 function createSphere(
   radius,
@@ -146,6 +146,7 @@ function createButton(title, x, y, z) {
   const btn = document.createElement("button");
   btn.textContent = title;
   btn.style.backgroundColor = "#fff";
+  btn.style.color = "#000";
   btn.style.border = "none";
   btn.style.borderRadius = "50%";
   btn.style.height = "60px";
@@ -204,8 +205,8 @@ function removeButtons(buttons) {
   }
 }
 
-function createScene() {
-  const container = document.getElementById("root");
+function createScene(refContainer) {
+  // const container = document.getElementById("root");
   timeline = gsap.timeline();
 
   scene = new THREE.Scene();
@@ -220,23 +221,19 @@ function createScene() {
   renderer = new THREE.WebGLRenderer();
   renderer.setPixelRatio(window.devicePixelRatio);
   renderer.setSize(window.innerWidth, window.innerHeight);
-  container.appendChild(renderer.domElement);
+  // container.appendChild(renderer.domElement);
 
-  // if (refContainer) {
-  //   refContainer.current && refContainer.appendChild(renderer.domElement);
-  // }
+  refContainer.current && refContainer.current.appendChild(renderer.domElement);
 
   labelRenderer = new CSS2DRenderer();
   labelRenderer.setSize(window.innerWidth, window.innerHeight);
   labelRenderer.domElement.style.position = "absolute";
   labelRenderer.domElement.style.top = "0px";
   labelRenderer.domElement.style.pointerEvents = "none";
-  container.appendChild(labelRenderer.domElement);
+  // container.appendChild(labelRenderer.domElement);
 
-  // if (refContainer) {
-  //   refContainer.current && refContainer.appendChild(labelRenderer.domElement);
-  //   // refContainer.current && refContainer.appendChild(renderer.domElement);
-  // }
+  refContainer.current &&
+    refContainer.current.appendChild(labelRenderer.domElement);
 
   const controls = new OrbitControls(camera, renderer.domElement);
   controls.update();
@@ -252,13 +249,11 @@ function selectLocation(texture, material) {
 }
 
 function animateTransition(onCompleteCallback) {
-  console.log("currentTexture", currentTexture);
   timeline
     .to(currentTexture, {
       onStart: () => console.time("test"),
       onComplete: () => {
         onCompleteCallback();
-        console.log("currentTexture1", currentTexture);
         console.timeEnd("test");
       },
       duration: 0.5,
@@ -268,10 +263,10 @@ function animateTransition(onCompleteCallback) {
     });
 }
 
-function init() {
-  createScene();
+function init(refContainer) {
+  createScene(refContainer);
 
-  // Создание первой локации
+  // Инициализация первой локации
   const currentNode = nodes[0];
   const texture = new THREE.TextureLoader().load(currentNode.panorama);
   const material = new THREE.MeshBasicMaterial({ map: texture });
@@ -291,25 +286,23 @@ function update() {
   labelRenderer.render(scene, camera);
 }
 
-// function Three() {
-//   const refContainer = useRef(null);
+function Three() {
+  const refContainer = useRef(null);
 
-//   useEffect(() => {
-//     if (refContainer) {
-//       init(refContainer);
-//       animate();
-//     }
-//   }, []);
+  useEffect(() => {
+    init(refContainer);
+    animate();
+  });
 
-//   return <div ref={refContainer}></div>;
-// }
+  return <div ref={refContainer}></div>;
+}
 
-// function App() {
-//   return (
-//     <>
-//       <Three />
-//     </>
-//   );
-// }
+function App() {
+  return (
+    <>
+      <Three />
+    </>
+  );
+}
 
 export default App;

src/index.css

@@ -4,9 +4,9 @@
   font-weight: 400;
 
   color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
+  /* color: rgba(255, 255, 255, 0.87); */
   /* background-color: #242424; */
-  background-color: #fff;
+  /* background-color: #fff; */
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;

src/main.jsx

@@ -5,8 +5,8 @@ import App from "./App.jsx";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
-    {/* <App1 /> */}
-    {/* <App /> */}
-  </React.StrictMode>
+  <App />
+  // <React.StrictMode>
+
+  // </React.StrictMode>
 );