From 70daa7b8af8ac9a90cd7e03190e3cdfc878a7e1c Mon Sep 17 00:00:00 2001 From: zojgame Date: Fri, 29 Dec 2023 16:31:55 +0500 Subject: [PATCH] refactoring --- src/App.jsx | 161 +++++++++++++++++++++++++--------------------------- 1 file changed, 77 insertions(+), 84 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index cae3109..2aa37c2 100644 --- a/src/App.jsx +++ b/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); }); }