From 994646aa93af05bbbb68806dd0442e837ec6c4b9 Mon Sep 17 00:00:00 2001 From: zojgame Date: Tue, 9 Jan 2024 18:29:22 +0500 Subject: [PATCH] refactoring --- src/App.jsx | 193 +++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 138 insertions(+), 55 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 2aa37c2..a8bee7b 100644 --- a/src/App.jsx +++ b/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() {