diff --git a/assets/Athen-3D.jpg b/assets/Athen-3D.jpg new file mode 100644 index 0000000..5fb1df5 Binary files /dev/null and b/assets/Athen-3D.jpg differ diff --git a/assets/Athen-3D_half.jpg b/assets/Athen-3D_half.jpg new file mode 100644 index 0000000..b27e831 Binary files /dev/null and b/assets/Athen-3D_half.jpg differ diff --git a/assets/Athens-8K.jpg b/assets/Athens-8K.jpg new file mode 100644 index 0000000..ed50551 Binary files /dev/null and b/assets/Athens-8K.jpg differ diff --git a/assets/Dubai.jpg b/assets/Dubai.jpg new file mode 100644 index 0000000..d7afc15 Binary files /dev/null and b/assets/Dubai.jpg differ diff --git a/assets/LakeTahao-10K.jpg b/assets/LakeTahao-10K.jpg new file mode 100644 index 0000000..7a0e13a Binary files /dev/null and b/assets/LakeTahao-10K.jpg differ diff --git a/assets/RomeChurch-180-8K.jpg b/assets/RomeChurch-180-8K.jpg new file mode 100644 index 0000000..a89bdd4 Binary files /dev/null and b/assets/RomeChurch-180-8K.jpg differ diff --git a/assets/animated_robot_sdc.glb b/assets/animated_robot_sdc.glb deleted file mode 100644 index 66d567c..0000000 Binary files a/assets/animated_robot_sdc.glb and /dev/null differ diff --git a/assets/bigchurch.jpg b/assets/bigchurch.jpg new file mode 100755 index 0000000..ba41f5d Binary files /dev/null and b/assets/bigchurch.jpg differ diff --git a/assets/borghese.jpg b/assets/borghese.jpg deleted file mode 100644 index 6e8d155..0000000 Binary files a/assets/borghese.jpg and /dev/null differ diff --git a/assets/canyon.env b/assets/canyon.env deleted file mode 100644 index 8887252..0000000 Binary files a/assets/canyon.env and /dev/null differ diff --git a/assets/in_tandem_3d360.mp4 b/assets/in_tandem_3d360.mp4 new file mode 100644 index 0000000..fc543ad Binary files /dev/null and b/assets/in_tandem_3d360.mp4 differ diff --git a/assets/italy.jpg b/assets/italy.jpg deleted file mode 100644 index 3f84887..0000000 Binary files a/assets/italy.jpg and /dev/null differ diff --git a/assets/mars.jpg b/assets/mars.jpg deleted file mode 100644 index 949802c..0000000 Binary files a/assets/mars.jpg and /dev/null differ diff --git a/assets/night.env b/assets/night.env deleted file mode 100644 index 4fef3ba..0000000 Binary files a/assets/night.env and /dev/null differ diff --git a/assets/park.jpg b/assets/park.jpg deleted file mode 100644 index 741f354..0000000 Binary files a/assets/park.jpg and /dev/null differ diff --git a/assets/room.env b/assets/room.env deleted file mode 100644 index 9a5f1a2..0000000 Binary files a/assets/room.env and /dev/null differ diff --git a/index.js b/index.js index 48bf3bb..2467cd1 100644 --- a/index.js +++ b/index.js @@ -6,8 +6,9 @@ import { Texture, PhotoDome, Animation, - UniversalCamera + UniversalCamera, } from "@babylonjs/core"; + import "@babylonjs/loaders"; import "@babylonjs/core/Particles/particleSystemComponent"; import "@babylonjs/core/Particles/webgl2ParticleSystem"; @@ -17,6 +18,7 @@ import { Button, Control } from "@babylonjs/gui"; +import * as BABYLON from "@babylonjs/core"; import { WebXRDefaultExperience } from '@babylonjs/core/XR/webXRDefaultExperience.js' @@ -29,8 +31,14 @@ import '@babylonjs/loaders/glTF' // FragmentOutput[FragmentOutputBlock] is not connected and is not optional. import '@babylonjs/core/Materials/Node/Blocks' -import borghese from "./assets/forFacebook-8K-LA.jpg"; -import alps from "./assets/italy.jpg"; +import losAngeles from "./assets/forFacebook-8K-LA.jpg"; +import athens from "./assets/Athens-8K.jpg"; +import lakeTahao from "./assets/LakeTahao-10K.jpg"; +import romeChruch from "./assets/bigchurch.jpg"; +import athen3d from "./assets/Athen-3D.jpg"; +import dubai from "./assets/Dubai.jpg"; +import inTandem from "./assets/in_tandem_3d360.mp4"; + const canvas = document.getElementById("renderCanvas"); const engine = new Engine(canvas, true); @@ -38,7 +46,7 @@ const engine = new Engine(canvas, true); const scene = new Scene(engine); //var xrHelper = scene.createDefaultXRExperienceAsync(); var vrHelper = scene.createDefaultVRExperience(); -new HemisphericLight("hemiLight", new Vector3(0, 1, 0)); +//new HemisphericLight("hemiLight", new Vector3(0, 1, 0)); const camera = new UniversalCamera( "camera", @@ -56,182 +64,227 @@ window.addEventListener("resize", () => { // Create the PhotoDome -let dome = new PhotoDome( +var dome = new PhotoDome( "sphere", - alps, + athen3d, { resolution: 64, size: 1000, + //halfDomeMode: true, useDirectMapping: false }, scene ); +dome.imageMode = BABYLON.PhotoDome.MODE_TOPBOTTOM; -// Create a GUI texture -const advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI( - "UI" -); +//dome.imageMode = PhotoDome.MODE_TOPBOTTOM = 1; -// Create a stack panel to hold the buttons -const stackPanel = new StackPanel(); -stackPanel.width = "220px"; -stackPanel.horizontalAlignment = - Control.HORIZONTAL_ALIGNMENT_RIGHT; -stackPanel.verticalAlignment = - Control.VERTICAL_ALIGNMENT_CENTER; -advancedTexture.addControl(stackPanel); - -// Create the buttons -const button1 = Button.CreateSimpleButton( - "button1", - "Alps" -); -button1.width = "100px"; -button1.height = "40px"; -button1.color = "white"; -button1.thickness = 2; -button1.background = "green"; -button1.onPointerUpObservable.add(() => { - button1.thickness = 2; - button2.thickness = 0; - transition(alps); -}); -stackPanel.addControl(button1); +// // Create a GUI texture +// const advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI( +// "UI" +// ); -const button2 = Button.CreateSimpleButton( - "button2", - "Gardens" -); -button2.width = "100px"; -button2.height = "40px"; -button2.thickness = 0; -button2.color = "white"; -button2.background = "red"; -button2.onPointerUpObservable.add(() => { - button1.thickness = 0; - button2.thickness = 2; - transition(borghese); -}); -stackPanel.addControl(button2); - -const transition = (image) => { - let anim = scene.beginDirectAnimation( - dome.mesh, - [fadeOutAnimation], - 0, - 120, - false - ); - anim.onAnimationEnd = () => loadNewTexture(image); -}; - -const loadNewTexture = (image) => { - const newTexture = new Texture(image, scene); - newTexture.onLoadObservable.add(() => { - dome.dispose(); - - // Create a new dome with the new texture - dome = new PhotoDome( - "sphere", - image, - { - resolution: 64, - size: 1000, - useDirectMapping: false - }, - scene - ); - dome.mesh.material.alpha = 0; - scene.beginDirectAnimation( - dome.mesh, - [fadeInAnimation], - 0, - 120, - false - ); - }); -}; - -const fadeOutAnimation = new Animation( - "fadeOut", - "material.alpha", - 40, - Animation.ANIMATIONTYPE_FLOAT, - Animation.ANIMATIONLOOPMODE_CONSTANT -); +// // Create a stack panel to hold the buttons +// const stackPanel = new StackPanel(); +// stackPanel.width = "300px"; +// stackPanel.horizontalAlignment = +// Control.HORIZONTAL_ALIGNMENT_RIGHT; +// stackPanel.verticalAlignment = +// Control.VERTICAL_ALIGNMENT_CENTER; +// advancedTexture.addControl(stackPanel); -fadeOutAnimation.setKeys([ - { frame: 0, value: 1 }, - { frame: 120, value: 0 } -]); - -const fadeInAnimation = new Animation( - "fadeIn", - "material.alpha", - 40, - Animation.ANIMATIONTYPE_FLOAT, - Animation.ANIMATIONLOOPMODE_CONSTANT -); +// // Create the buttons +// const button1 = Button.CreateSimpleButton( +// "button1", +// "Los Angeles" +// ); +// button1.width = "200px"; +// button1.height = "100px"; +// button1.paddingBottom ="30px"; +// button1.cornerRadius="10"; +// button1.shadowColor="black"; +// button1.shadowOffsetX="2"; +// button1.shadowOffsetY="2"; +// button1.shadowBlur="30"; +// button1.color = "white"; +// button1.thickness = 2; +// button1.background = "gray"; +// button1.alpha = "0.5"; +// button1.onPointerUpObservable.add(() => { +// button1.thickness = 2; +// button2.thickness = 0; +// transition(losAngeles); +// }); +// stackPanel.addControl(button1); + +// const button2 = Button.CreateSimpleButton( +// "button2", +// "Athens, Greece" +// ); +// button2.width = "200px"; +// button2.height = "100px"; +// button2.paddingBottom ="30px"; +// button2.cornerRadius="10"; +// button2.shadowColor="black"; +// button2.shadowOffsetX="2"; +// button2.shadowOffsetY="2"; +// button2.shadowBlur="30"; +// button2.color = "white"; +// button2.thickness = 0; +// button2.background = "gray"; +// button2.alpha = "0.5"; +// button2.onPointerUpObservable.add(() => { +// button1.thickness = 0; +// button2.thickness = 2; +// transition(athens); +// }); +// stackPanel.addControl(button2); + +// const button3 = Button.CreateSimpleButton( +// "button3", +// "3D 360 Photo" +// ); +// button3.width = "200px"; +// button3.height = "100px"; +// button3.paddingBottom ="30px"; +// button3.cornerRadius="10"; +// button3.shadowColor="black"; +// button3.shadowOffsetX="2"; +// button3.shadowOffsetY="2"; +// button3.shadowBlur="30"; +// button3.color = "white"; +// button3.thickness = 0; +// button3.background = "gray"; +// button3.alpha = "0.5"; +// button3.onPointerUpObservable.add(() => { +// button1.thickness = 0; +// button2.thickness = 0; +// button3.thickness = 2; +// transition(athen3d); +// }); +// stackPanel.addControl(button3); + +// const transition = (image) => { +// let anim = scene.beginDirectAnimation( +// dome.mesh, +// [fadeOutAnimation], +// 0, +// 120, +// false +// ); +// anim.onAnimationEnd = () => loadNewTexture(image); +// }; -fadeInAnimation.setKeys([ - { frame: 0, value: 0 }, - { frame: 120, value: 1 } -]); +// const loadNewTexture = (image) => { +// const newTexture = new Texture(image, scene); +// newTexture.onLoadObservable.add(() => { +// dome.dispose(); + +// // Create a new dome with the new texture +// dome = new PhotoDome( +// "sphere", +// image, +// { +// resolution: 128, +// size: 1000, +// useDirectMapping: false +// }, +// scene +// ); + +// dome.mesh.material.alpha = 0; +// dome.imageMode = PhotoDome.MODE_TOPBOTTOM; +// scene.beginDirectAnimation( +// dome.mesh, +// [fadeInAnimation], +// 0, +// 120, +// false +// ); +// }); +// }; + +// const fadeOutAnimation = new Animation( +// "fadeOut", +// "material.alpha", +// 40, +// Animation.ANIMATIONTYPE_FLOAT, +// Animation.ANIMATIONLOOPMODE_CONSTANT +// ); + +// fadeOutAnimation.setKeys([ +// { frame: 0, value: 1 }, +// { frame: 120, value: 0 } +// ]); + +// const fadeInAnimation = new Animation( +// "fadeIn", +// "material.alpha", +// 40, +// Animation.ANIMATIONTYPE_FLOAT, +// Animation.ANIMATIONLOOPMODE_CONSTANT +// ); + +// fadeInAnimation.setKeys([ +// { frame: 0, value: 0 }, +// { frame: 120, value: 1 } +// ]); // Assume `scene` is your Babylon.js scene // Create the zoom in button -var zoomInButton = Button.CreateSimpleButton( - "zoomInButton", - "Zoom In" -); -zoomInButton.paddingTopInPixels = 50; -zoomInButton.width = "100px"; -zoomInButton.height = "90px"; -zoomInButton.color = "white"; -zoomInButton.background = "blue"; -zoomInButton.onPointerUpObservable.add(() => { - camera.fov = Math.max(0.1, camera.fov - 0.1); -}); -stackPanel.addControl(zoomInButton); +// var zoomInButton = Button.CreateSimpleButton( +// "zoomInButton", +// "Zoom In" +// ); +// zoomInButton.paddingTopInPixels = 50; +// zoomInButton.width = "100px"; +// zoomInButton.height = "90px"; +// zoomInButton.color = "white"; +// zoomInButton.background = "blue"; +// zoomInButton.onPointerUpObservable.add(() => { +// camera.fov = Math.max(0.1, camera.fov - 0.1); +// }); +// stackPanel.addControl(zoomInButton); // Create the zoom out button -var zoomOutButton = Button.CreateSimpleButton( - "zoomOutButton", - "Zoom Out" -); -zoomOutButton.width = "100px"; -zoomOutButton.height = "40px"; -zoomOutButton.color = "white"; -zoomOutButton.background = "blue"; -zoomOutButton.onPointerUpObservable.add(() => { - camera.fov = Math.min(Math.PI / 2, camera.fov + 0.1); -}); -stackPanel.addControl(zoomOutButton); +// var zoomOutButton = Button.CreateSimpleButton( +// "zoomOutButton", +// "Zoom Out" +// ); +// zoomOutButton.width = "100px"; +// zoomOutButton.height = "40px"; +// zoomOutButton.color = "white"; +// zoomOutButton.background = "blue"; +// zoomOutButton.onPointerUpObservable.add(() => { +// camera.fov = Math.min(Math.PI / 2, camera.fov + 0.1); +// }); +// stackPanel.addControl(zoomOutButton); // Create a rotation animation -let isRotationPlaying = true; -let rotationSpeed = 0.00001; // Adjust as needed for faster/slower rotation +// let isRotationPlaying = true; +// let rotationSpeed = 0.00001; // Adjust as needed for faster/slower rotation // Create the rotation button -const rotationButton = Button.CreateSimpleButton( - "rotationButton", - "Pause" -); -rotationButton.width = "100px"; -rotationButton.height = "40px"; -rotationButton.color = "white"; -rotationButton.background = "purple"; -rotationButton.onPointerUpObservable.add(() => { - isRotationPlaying = !isRotationPlaying; - rotationButton.textBlock.text = isRotationPlaying - ? "Pause" - : "Play"; -}); -stackPanel.addControl(rotationButton); +// const rotationButton = Button.CreateSimpleButton( +// "rotationButton", +// "Pause" +// ); +// rotationButton.width = "100px"; +// rotationButton.height = "40px"; +// rotationButton.color = "white"; +// rotationButton.background = "purple"; +// rotationButton.onPointerUpObservable.add(() => { +// isRotationPlaying = !isRotationPlaying; +// rotationButton.textBlock.text = isRotationPlaying +// ? "Pause" +// : "Play"; +// }); +// stackPanel.addControl(rotationButton); // Update camera rotation in the render loop based on isRotationPlaying -scene.onBeforeRenderObservable.add(() => { - if (isRotationPlaying) { - camera.rotation.y += rotationSpeed; - } -}); +// scene.onBeforeRenderObservable.add(() => { +// //dome.imageMode = PhotoDome.MODE_SIDEBYSIDE; +// // if (isRotationPlaying) { +// // camera.rotation.y += rotationSpeed; +// // } +// }); diff --git a/styles.css b/styles.css index ed4ecdc..fd806d1 100644 --- a/styles.css +++ b/styles.css @@ -12,3 +12,18 @@ body { height: 100vh; display: block; } + +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} \ No newline at end of file