diff --git a/src/App.jsx b/src/App.jsx index c94af63..a0b23a8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,191 +1,200 @@ -import * as THREE from 'three'; -import { OrbitControls } from 'three-orbitcontrols-ts'; +import * as THREE from "three"; +import { OrbitControls } from "three-orbitcontrols-ts"; import { gsap } from "gsap"; -import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer'; -import { useEffect } from 'react'; +import { + CSS2DRenderer, + CSS2DObject, +} from "three/addons/renderers/CSS2DRenderer"; +import { useEffect } from "react"; let camera, scene, renderer, labelRenderer, currentTexture, currentMaterial; -const ENTITY_NAME = 'sphere' +const ENTITY_NAME = "sphere"; init(); animate(); -function createSphere(radius, widthS, heightS, texture, material, isVisible = false){ - const sphere = new THREE.SphereGeometry(radius, widthS, heightS) - sphere.scale( - 1, 1, 1 ); +function createSphere( + radius, + widthS, + heightS, + texture, + material, + isVisible = false +) { + const sphere = new THREE.SphereGeometry(radius, widthS, heightS); + sphere.scale(-1, 1, 1); - texture.colorSpace = THREE.SRGBColorSpace; + texture.colorSpace = THREE.SRGBColorSpace; - material.transparent = true - material.opacity = isVisible ? 1 : 0 + material.transparent = true; + material.opacity = isVisible ? 1 : 0; - const mesh = new THREE.Mesh(sphere, material) - mesh.position.set(4.5, 2, 4.5) - mesh.name = ENTITY_NAME + const mesh = new THREE.Mesh(sphere, material); + mesh.position.set(4.5, 2, 4.5); + mesh.name = ENTITY_NAME; - scene.add(mesh) + scene.add(mesh); } function removeEntity(entityName) { - var selectedEntity = scene.getObjectByName(entityName); - if(selectedEntity){ - scene.remove( selectedEntity ); - } + var selectedEntity = scene.getObjectByName(entityName); + if (selectedEntity) { + scene.remove(selectedEntity); + } } -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 cPointLabel = new CSS2DObject(label) - cPointLabel.name = title - scene.add(cPointLabel) - - cPointLabel.position.set(x, y, z) +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"; - return label + const cPointLabel = new CSS2DObject(label); + cPointLabel.name = title; + scene.add(cPointLabel); + + cPointLabel.position.set(x, y, z); + + return label; } -function createScene(){ - const container = document.getElementById('root'); - - scene = new THREE.Scene(); - camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 2, 1100 ); - camera.position.set(5, 2, 4.5) +function createScene() { + const container = document.getElementById("root"); - renderer = new THREE.WebGLRenderer(); - renderer.setPixelRatio( window.devicePixelRatio ); - renderer.setSize( window.innerWidth, window.innerHeight ); - container.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); + scene = new THREE.Scene(); + camera = new THREE.PerspectiveCamera( + 75, + window.innerWidth / window.innerHeight, + 2, + 1100 + ); + camera.position.set(5, 2, 4.5); - const controls = new OrbitControls(camera, renderer.domElement) - controls.update() - controls.target.set(4.5, 2, 4.5) - controls.maxPolarAngle = Math.PI / 2.1 - controls.rotateSpeed = 0.95 + renderer = new THREE.WebGLRenderer(); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(window.innerWidth, window.innerHeight); + container.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); + + const controls = new OrbitControls(camera, renderer.domElement); + controls.update(); + controls.target.set(4.5, 2, 4.5); + controls.maxPolarAngle = Math.PI / 2.1; + controls.rotateSpeed = 0.95; } function init() { - createScene() + createScene(); - const firstTexture = new THREE.TextureLoader().load( '/src/assets/sea.jpg' ); - const firstMaterial = new THREE.MeshBasicMaterial( { map: firstTexture } ); + 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 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 thirdMaterial = new THREE.MeshBasicMaterial( { map: thirdTexture } ); + const thirdTexture = new THREE.TextureLoader().load("/src/assets/loc3.jpg"); + const thirdMaterial = new THREE.MeshBasicMaterial({ map: thirdTexture }); - currentTexture = firstTexture - currentMaterial = firstMaterial + currentTexture = firstTexture; + currentMaterial = firstMaterial; - createSphere(5, 60, 40, firstTexture, firstMaterial, true); + 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) + 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 + secondPoint.style.opacity = 0; - firstPoint.addEventListener('click', () => { - const timeline = gsap.timeline() - - createSphere(5, 60, 40, secondTexture, secondMaterial) - - timeline - .to(currentTexture, {opacity: 0, - onComplete: () => { - firstPoint.style.opacity = 0 - secondPoint.style.opacity = 1 - thirdPoint.style.opacity = 1 + const timeline = gsap.timeline(); - currentTexture = secondTexture - currentMaterial = secondMaterial + firstPoint.addEventListener("click", () => { + createSphere(5, 60, 40, secondTexture, secondMaterial); - removeEntity(ENTITY_NAME) - }}) - .to(secondMaterial, {opacity: 1}) - - - }) + timeline + .to(currentTexture, { + opacity: 0, + onComplete: () => { + firstPoint.style.opacity = 0; + secondPoint.style.opacity = 1; + thirdPoint.style.opacity = 1; - secondPoint.addEventListener('click', () => { - const timeline = gsap.timeline() - - 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 = secondTexture; + currentMaterial = secondMaterial; - currentTexture = firstTexture - currentMaterial = firstMaterial + removeEntity(ENTITY_NAME); + }, + }) + .to(secondMaterial, { opacity: 1 }); + }); - removeEntity(ENTITY_NAME) - }}) - .to(firstMaterial, {opacity: 1}) - - - }) + secondPoint.addEventListener("click", () => { + createSphere(5, 60, 40, firstTexture, firstMaterial); - thirdPoint.addEventListener('click', () => { - const timeline = gsap.timeline() - - createSphere(5, 60, 40, thirdTexture, thirdMaterial) - - timeline - .to(currentTexture, {opacity: 0, - onComplete: () => { - firstPoint.style.opacity = 1 - secondPoint.style.opacity = 1 - thirdPoint.style.opacity = 0 + timeline + .to(currentTexture, { + opacity: 0, + onComplete: () => { + firstPoint.style.opacity = 1; + secondPoint.style.opacity = 0; + thirdPoint.style.opacity = 1; - currentTexture = thirdTexture - currentMaterial = thirdMaterial + currentTexture = firstTexture; + currentMaterial = firstMaterial; - removeEntity(ENTITY_NAME) - }}) - .to(thirdMaterial, {opacity: 1}) - - - - - }) + removeEntity(ENTITY_NAME); + }, + }) + .to(firstMaterial, { opacity: 1 }); + }); -} + thirdPoint.addEventListener("click", () => { + 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 }); + }); +} function animate() { - requestAnimationFrame( animate ); - update(); + requestAnimationFrame(animate); + update(); } function update() { - renderer.render( scene, camera ); - labelRenderer.render(scene, camera); + renderer.render(scene, camera); + labelRenderer.render(scene, camera); } // function App() { // useEffect(() => { -// init() +// init() // animate() // }, []) @@ -194,6 +203,4 @@ function update() { // ) // } - - -export default App \ No newline at end of file +export default App;