init

hughred22 · Feb 24, 2024 · 908ac42 · 908ac42
commit 908ac42
Show file tree

Hide file tree

Showing 23 changed files with 2,206 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/assets/animated_robot_sdc.glb b/assets/animated_robot_sdc.glb
diff --git a/assets/borghese.jpg b/assets/borghese.jpg
diff --git a/assets/canyon.env b/assets/canyon.env
diff --git a/assets/flare.png b/assets/flare.png
diff --git a/assets/flare_transparent.png b/assets/flare_transparent.png
diff --git a/assets/forFacebook-8K-LA.jpg b/assets/forFacebook-8K-LA.jpg
diff --git a/assets/gradient_line.png b/assets/gradient_line.png
diff --git a/assets/italy.jpg b/assets/italy.jpg
diff --git a/assets/mars.jpg b/assets/mars.jpg
diff --git a/assets/night.env b/assets/night.env
diff --git a/assets/park.jpg b/assets/park.jpg
diff --git a/assets/room.env b/assets/room.env
diff --git a/assets/splash.png b/assets/splash.png
diff --git a/assets/star.png b/assets/star.png
diff --git a/assets/star_glow.png b/assets/star_glow.png
diff --git a/index.html b/index.html
@@ -0,0 +1,15 @@
+<!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>
diff --git a/index.js b/index.js
@@ -0,0 +1,222 @@
+import {
+  Engine,
+  Scene,
+  Vector3,
+  HemisphericLight,
+  Texture,
+  PhotoDome,
+  Animation,
+  UniversalCamera
+} from "@babylonjs/core";
+import "@babylonjs/loaders";
+import "@babylonjs/core/Particles/particleSystemComponent";
+import "@babylonjs/core/Particles/webgl2ParticleSystem";
+import {
+  AdvancedDynamicTexture,
+  StackPanel,
+  Button,
+  Control
+} from "@babylonjs/gui";
+
+import borghese from "./assets/forFacebook-8K-LA.jpg";
+import alps from "./assets/italy.jpg";
+
+const canvas = document.getElementById("renderCanvas");
+const engine = new Engine(canvas, true);
+const scene = new Scene(engine);
+new HemisphericLight("hemiLight", new Vector3(0, 1, 0));
+
+const camera = new UniversalCamera(
+  "camera",
+  Vector3.Zero(),
+  scene
+);
+camera.attachControl(canvas, true);
+
+engine.runRenderLoop(() => {
+  scene.render();
+});
+window.addEventListener("resize", () => {
+  engine.resize();
+});
+
+// Create the PhotoDome
+let dome = new PhotoDome(
+  "sphere",
+  alps,
+  {
+    resolution: 64,
+    size: 1000,
+    useDirectMapping: false
+  },
+  scene
+);
+
+// Create a GUI texture
+const advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI(
+  "UI"
+);
+
+// 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);
+
+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
+);
+
+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);
+
+// 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(() => {
+  if (isRotationPlaying) {
+    camera.rotation.y += rotationSpeed;
+  }
+});