diff --git a/index.html b/index.html
index 2f890f9..9ab45a9 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
- Babylon Hugh Hou
+ 360 Photo and Video Viewer by Hugh Hou (WebXR for Vision Pro)
diff --git a/index.js b/index.js
index aa1bd96..e861d21 100644
--- a/index.js
+++ b/index.js
@@ -2,7 +2,6 @@ import {
Engine,
Scene,
Vector3,
- HemisphericLight,
Texture,
PhotoDome,
VideoDome,
@@ -44,7 +43,6 @@ const scene = new Scene(engine);
//var xrHelper = scene.createDefaultXRExperienceAsync();
//var vrHelper = scene.createDefaultVRExperience();
var vrHelper = scene.createDefaultVRExperience({createDeviceOrientationCamera:false});
-//new HemisphericLight("hemiLight", new Vector3(0, 1, 0));
const camera = new UniversalCamera(
"camera",
@@ -75,19 +73,6 @@ var dome = new PhotoDome(
);
dome.imageMode = PhotoDome.MODE_MONOSCOPIC;
-// Create the VideoDome
-// var videoDome = new VideoDome(
-// "videoSphere",
-// lakeTahao8k360video,
-// {
-// resolution: 64,
-// size: 1000,
-// clickToPlay: true,
-// useDirectMapping: false
-// },
-// scene
-// );
-//videoDome.imageMode = VideoDome.MODE_TOPBOTTOM;
vrHelper.enableInteractions();
// Create a GUI texture
@@ -261,17 +246,6 @@ const loadNewVideoTexture = (video) => {
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
- // );
// Create the VideoDome
dome = new VideoDome(
"videoSphere",
@@ -322,62 +296,7 @@ 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);
-
-// 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);
-
-// Create a rotation animation
-// 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);
-// Update camera rotation in the render loop based on isRotationPlaying
// scene.onBeforeRenderObservable.add(() => {
-// //dome.imageMode = PhotoDome.MODE_SIDEBYSIDE;
-// // if (isRotationPlaying) {
-// // camera.rotation.y += rotationSpeed;
-// // }
+//
// });
diff --git a/style.css b/style.css
deleted file mode 100644
index 30aa814..0000000
--- a/style.css
+++ /dev/null
@@ -1,96 +0,0 @@
-: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;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-#app {
- max-width: 1280px;
- margin: 0 auto;
- padding: 2rem;
- text-align: center;
-}
-
-.logo {
- height: 6em;
- padding: 1.5em;
- will-change: filter;
- transition: filter 300ms;
-}
-.logo:hover {
- filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vanilla:hover {
- filter: drop-shadow(0 0 2em #f7df1eaa);
-}
-
-.card {
- padding: 2em;
-}
-
-.read-the-docs {
- color: #888;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}