Update example, reduce logging

webprofusion · Nov 1, 2020 · 27e7dd2 · 27e7dd2
1 parent 3e9fa0e
commit 27e7dd2
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 123 deletions.
diff --git a/lib/dojo3d/src/examples/01-world.ts b/lib/dojo3d/src/examples/01-world.ts
@@ -1,19 +1,14 @@
-//import { World } from "../lib/world";
-
 import { World } from "../lib/World";
 
-
 var world = new World();
 
-world.create();
-
-world.setupLights();
+world.addLights();
 
 world.addGround();
 
-//var cube1 = world.AddCube();
 world.addCube(0.1, 0.1, 0.1, 3, 3, 3);
 
+
 // world.LoadModel("assets/models / characters / phoenix_bird / scene.gltf", 0.005);
 //https://5h3o2.csb.app/
 
diff --git a/lib/dojo3d/src/examples/dojo3d.css b/lib/dojo3d/src/examples/dojo3d.css
@@ -0,0 +1,34 @@
+body {
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+canvas {
+  display: block;
+}
+
+#stats {
+  z-index: 100;
+  border: 1px solid whitesmoke;
+  color: whitesmoke;
+  background-color: black;
+  display: none;
+}
+
+#msgbox {
+  position: absolute;
+  z-index: 100;
+  border: 1px solid rgba(0, 0, 0, 0.534);
+  max-width: 30%;
+  min-width: 10%;
+  min-height: 10%;
+  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
+    'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+  background-color: #f3f3f366;
+  padding: 1em;
+  border-radius: 16px;
+  color: white;
+  box-shadow: 2px 2px 9px 3px #54545487;
+  margin-top: 50px;
+  display: none;
+}
diff --git a/lib/dojo3d/src/examples/index.html b/lib/dojo3d/src/examples/index.html
@@ -3,69 +3,19 @@
 
 <head>
     <meta charset="utf-8">
-    <title>Dojo 3D</title>
-    <style>
-        body {
-            margin: 0;
-            font-family: Arial, Helvetica, sans-serif;
-        }
-
-        canvas {
-            display: block;
-        }
-
-        #stats {
-
-            z-index: 100;
-            border: 1px solid whitesmoke;
-            color: whitesmoke;
-            background-color: black;
-            display: none;
-        }
-
-        #msgbox {
-            position: absolute;
-            z-index: 100;
-            border: 1px solid rgba(0, 0, 0, 0.534);
-            width: 30%;
-            min-height: 10%;
-            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-            background-color: #f3f3f366;
-            padding: 1em;
-            border-radius: 16px;
-            color: white;
-            box-shadow: 2px 2px 9px 3px #54545487;
-            margin-top: 50px;
-            display: none;
-        }
-    </style>
-
+    <title>Dojo 3D - Story Book</title>
     <script src="../../build/index.js"></script>
+    <link rel="stylesheet" href="dojo3d.css">
 </head>
 
 <body>
-    <div id="msgbox"></div>
-    <div id="stats">camera stats</div>
 
     <script>
         var world = new dojo3d.World();
         var ui = dojo3d.UI;
 
         world.fetchPrefabModels().then(async () => {
 
-            world.setupLights();
-
-
-
-            // prefab models:
-            // "Box Man", "Phoenix Bird", "Hover Bike (The Rocket)","Wipeout 4K"
-
-            //var boxMan = world.getPrefabModelByName("Box Man");
-            //await world.addSceneObject(boxMan, 0.1);
-
-            //var bookScene = world.getPrefabModelByName("Medieval Fantasy Book");
-            //await world.addSceneObject(bookScene, 0.1);
-
             var scene = world.getPrefabModelByName("Happy Halloween");
             obj = await world.addSceneObject(scene, 0.1);
 
@@ -77,50 +27,44 @@
                 { title: "Back Upstairs", position: { x: -0.066, y: 0.567, z: -0.438 } },
                 { title: "The Ghost", position: { x: -0.139, y: 0.142, z: -0.466 } },
                 { title: "RIP", position: { x: -0.216, y: 0.005, z: 0.570 } },
-
-
-
-
+                { title: "Cat", position: { x: -0.028, y: -0.071, z: 0.826 } }
             ];
 
             world.setViewpoints(viewpoints);
 
-            world.setCameraViewpoint("One");
+            world.setCameraViewpoint("Cat");
+
+            world.addLights();
 
             // show intro message
             ui.showMessage("Hello..", 10, 10);
-            await world.animateToViewpoint("One");
-
-            //world.fx.fadeOut(1);
-            //world.fx.fadeIn(1)
 
+            await world.animateToViewpoint("One");
 
             //wait a few seconds
             await ui.wait(3);
 
             // welcome
-            ui.showMessage("Welcome this is a story about a creepy house..", 30, 10);
-            await world.animateToViewpoint("House", 5);
+            ui.showMessage("Welcome to this story about a creepy house..", 30, 10);
 
+            await world.animateToViewpoint("House", 5);
             await ui.wait(3);
 
             // spider
-            //await world.animateToViewpoint("Spider");
-
             await world.animateToViewpoint("Spider");
             ui.showMessage("What will this story be about, you decide...", 30, 10);
             await ui.wait(3);
 
             // finished
-            //await world.animateToViewpoint("One");
             await world.animateToViewpoint("One");
             ui.showMessage("Goodbye.", 80, 100);
 
+            // take a look around..
 
-            await world.animateToViewpoint("Back Of House");
-            await world.animateToViewpoint("Back Upstairs");
-            await world.animateToViewpoint("The Ghost");
-            await world.animateToViewpoint("RIP", 10);
+            // await world.animateToViewpoint("Back Of House");
+            // await world.animateToViewpoint("Back Upstairs");
+            // await world.animateToViewpoint("The Ghost");
+            // await world.animateToViewpoint("RIP", 10);
 
         });
 

diff --git a/lib/dojo3d/src/lib/UI.ts b/lib/dojo3d/src/lib/UI.ts
@@ -1,6 +1,14 @@
 export class UI {
     public static showMessage(msg: string, x: number, y: number) {
-        const msgbox = document.getElementById("msgbox");
+        let msgbox = document.getElementById("msgbox");
+
+        if (!msgbox) {
+            const msgDiv = document.createElement("div");
+            msgDiv.id = "msgbox";
+            document.children[0].appendChild(msgDiv);
+            msgbox = document.getElementById("msgbox");
+        }
+
         msgbox.style.top = y + "px";
         msgbox.style.left = x + "px";
         msgbox.style.display = "block";
@@ -11,4 +19,20 @@ export class UI {
     public static async wait(seconds: number) {
         await new Promise(r => setTimeout(r, seconds * 1000));
     }
+
+
+    public static log(msg: string) {
+        console.log(msg);
+    }
+
+    public static speak(message: string, voice: number = 0) {
+
+        this.log("Saying:" + message);
+
+        const msg = new SpeechSynthesisUtterance(message);
+        var voices = window.speechSynthesis.getVoices()
+        msg.voice = voices[voice]
+
+        window.speechSynthesis.speak(msg)
+    }
 }
diff --git a/lib/dojo3d/src/lib/world.ts b/lib/dojo3d/src/lib/world.ts
@@ -32,6 +32,8 @@ class World {
   viewpoints: Viewpoint[] = [];
   sceneCenter: Vector3 = new Vector3(0, 0, 0);
 
+  lastLoggedCameraPos: Vector3 = null;
+
   log(msg: string) {
     console.log(msg);
   }
@@ -68,7 +70,7 @@ class World {
     return mesh;
   }
 
-  public setupLights() {
+  public addLights() {
     var dirLight = new DirectionalLight(0xffffff, 1);
     dirLight.position.set(5, 2, 8);
     this.scene.add(dirLight);
@@ -94,13 +96,20 @@ class World {
 
       // report camera pos
 
+      // log camera pos
       setInterval(() => {
         const camerapos = this.camera.getWorldPosition(this.sceneCenter);
-
-        const positionString = `{x:${camerapos.x.toFixed(3)},y:${camerapos.y.toFixed(3)},z:${camerapos.z.toFixed(3)}}`;
-        this.log(positionString);
-        document.getElementById("stats").innerHTML = positionString;
+        if (this.lastLoggedCameraPos != camerapos) {
+          const positionString = `{x:${camerapos.x.toFixed(3)},y:${camerapos.y.toFixed(3)},z:${camerapos.z.toFixed(3)}}`;
+          this.log(positionString);
+
+          const statsDiv = document.getElementById("stats");
+          if (statsDiv) {
+            statsDiv.innerHTML = positionString;
+          }
+        }
       }, 3000);
+
     }
   }
 
@@ -263,31 +272,21 @@ class World {
     const view = this.viewpoints.find(v => v.title == title).position;
     const viewpoint = new Vector3(view.x, view.y, view.z);
 
-    //await new Promise(r => setTimeout(r, timeSeconds * 1000));
-
-    //this.setCameraViewpoint(title);
-    //this.sceneRenderer.setCameraTarget(this.productModelGroup.position.clone());
-
     var cameraPos = this.camera.position.clone();
 
     if (viewpoint.equals(cameraPos)) {
       this.log("nothing to tween, skipping.");
       return;
     }
 
-    this.log("About to animate..." + JSON.stringify(viewpoint));
-    //new Promise<any>(resolve => {
-
-    this.log("tween from " + JSON.stringify(cameraPos));
-    this.log("tween to " + JSON.stringify(viewpoint));
 
     return new Promise<any>((resolve, reject) => {
       new TWEEN.Tween(cameraPos)
         .to(viewpoint, timeSeconds * 1000)
         .easing(TWEEN.Easing.Cubic.InOut)
         .onUpdate((o, e) => {
-          this.log("animating " + cameraPos);
-          // required for smooth camera update
+
+          // update camera position
           this.camera.position.x = cameraPos.x;
           this.camera.position.y = cameraPos.y;
           this.camera.position.z = cameraPos.z;
@@ -299,39 +298,11 @@ class World {
         });
     });
 
-
-    this.log("got here");
-    // resolve(true);
-    // });
-
-
-    /* var cameraPos = new Vector3().copy(this.camera.position);
- 
-     new Promise<any>(resolve => {
- 
-       new TWEEN.Tween(cameraPos)
-         .to(viewpoint, timeSeconds)
-         .easing(TWEEN.Easing.Cubic.InOut)
-         .onUpdate(() => {
-           // required for smooth camera update
-           this.camera.position.x = cameraPos.x;
-           this.camera.position.y = cameraPos.y;
-           this.camera.position.z = cameraPos.z;
-         }
-         )
-         .start()
-         .onComplete(() => {
-           resolve(true);
-         });
-     }
- 
-     );*/
   }
 
   setViewpoints(viewpoints: Viewpoint[]) {
     this.viewpoints = viewpoints;
   }
-
 }
 
 export { World }