change index completely

hughred22 · Feb 24, 2024 · 402c4b7 · 402c4b7
1 parent 7b32959
commit 402c4b7
Show file tree

Hide file tree

Showing 2 changed files with 127 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -1,15 +1,138 @@
-<!DOCTYPE html>
+<!-- <!DOCTYPE html>
 <html>
   <head>
     <title>Babylon Hugh Hou</title>
     <meta charset="UTF-8" />
     <link rel="stylesheet" href="styles.css" />
-    <!-- <script src="src/styles.css"></script> -->
     
   </head>
 
   <body>
     <canvas id="renderCanvas"></canvas>
     <script type="module" src="/index.js"></script>
   </body>
+</html> -->
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+        <title>Babylon.js sample code</title>
+
+        <!-- Babylon.js -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
+        <script src="https://assets.babylonjs.com/generated/Assets.js"></script>
+        <script src="https://cdn.babylonjs.com/recast.js"></script>
+        <script src="https://cdn.babylonjs.com/ammo.js"></script>
+        <script src="https://cdn.babylonjs.com/havok/HavokPhysics_umd.js"></script>
+        <script src="https://cdn.babylonjs.com/cannon.js"></script>
+        <script src="https://cdn.babylonjs.com/Oimo.js"></script>
+        <script src="https://cdn.babylonjs.com/earcut.min.js"></script>
+        <script src="https://cdn.babylonjs.com/babylon.js"></script>
+        <script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
+        <script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
+        <script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
+        <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>
+        <script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
+        <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
+        <script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
+
+        <style>
+            html, body {
+                overflow: hidden;
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+
+            #renderCanvas {
+                width: 100%;
+                height: 100%;
+                touch-action: none;
+            }
+
+            #canvasZone {
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+    </head>
+<body>
+    <div id="canvasZone"><canvas id="renderCanvas"></canvas></div>
+    <script>
+        var canvas = document.getElementById("renderCanvas");
+
+        var startRenderLoop = function (engine, canvas) {
+            engine.runRenderLoop(function () {
+                if (sceneToRender && sceneToRender.activeCamera) {
+                    sceneToRender.render();
+                }
+            });
+        }
+
+//         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";
+
+        var athen3d = "./360Viewer3/assets/Athen-3D.jpg";
+        var losAngeles = "./360Viewer3/assets/forFacebook-8K-LA.jpg";
+
+        var engine = null;
+        var scene = null;
+        var sceneToRender = null;
+        var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false}); };
+        var createScene = function () {
+            var scene = new BABYLON.Scene(engine);
+            var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2,  Math.PI / 2, 5, BABYLON.Vector3.Zero(), scene);
+            camera.attachControl(canvas, true);
+            camera.inputs.attached.mousewheel.detachControl(canvas);
+            var vrHelper = scene.createDefaultVRExperience();
+
+            var dome = new BABYLON.PhotoDome(
+                "testdome",
+                athen3d,
+                {
+                    resolution: 32,
+                    size: 1000
+                },
+                scene
+            );
+
+            dome.imageMode = BABYLON.PhotoDome.MODE_TOPBOTTOM;
+
+            return scene;
+        };
+                window.initFunction = async function() {
+
+
+
+                    var asyncEngineCreation = async function() {
+                        try {
+                        return createDefaultEngine();
+                        } catch(e) {
+                        console.log("the available createEngine function failed. Creating the default engine instead");
+                        return createDefaultEngine();
+                        }
+                    }
+
+                    window.engine = await asyncEngineCreation();
+        if (!engine) throw 'engine should not be null.';
+        startRenderLoop(engine, canvas);
+        window.scene = createScene();};
+        initFunction().then(() => {sceneToRender = scene                    
+        });
+
+        // Resize
+        window.addEventListener("resize", function () {
+            engine.resize();
+        });
+    </script>
+</body>
 </html>
+
diff --git a/index.js b/index.js
@@ -18,7 +18,6 @@ import {
   Button,
   Control
 } from "@babylonjs/gui";
-import * as BABYLON from "@babylonjs/core";
 
 import { WebXRDefaultExperience } from '@babylonjs/core/XR/webXRDefaultExperience.js'
 
@@ -66,7 +65,7 @@ window.addEventListener("resize", () => {
 // Create the PhotoDome
 var dome = new PhotoDome(
   "sphere",
-  athen3d,
+  "https://i.imgur.com/nI1VPdJ.jpg",
   {
     resolution: 64,
     size: 1000,
@@ -75,7 +74,7 @@ var dome = new PhotoDome(
   },
   scene
 );
-dome.imageMode = BABYLON.PhotoDome.MODE_TOPBOTTOM;
+dome.imageMode = PhotoDome.MODE_TOPBOTTOM;
 
 //dome.imageMode = PhotoDome.MODE_TOPBOTTOM = 1;