Add docs

webprofusion · Nov 3, 2020 · a9984a0 · a9984a0
1 parent 733a287
commit a9984a0
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 0 deletions.
diff --git a/docs/index.md b/docs/index.md
@@ -0,0 +1,93 @@
+# Dojo3D
+
+An all-in-one library for 3D story telling, aimed at all ages of coder. No software installation required, useful for CoderDojo, Hour of Code activities etc.
+
+![Example](screens/halloween.png)
+
+# Example Library Usage
+
+See the Happy Halloween example https://repl.it/@webprofusionchr/dojo3d-halloween
+
+Jump straight to `Our main code for a simple story` to see the main story code.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Dojo 3D - Example Story Book</title>
+    <script src="https://dojo3d.webprofusion.com/v1/dojo3d.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://dojo3d.webprofusion.com/v1/dojo3d.css"
+    />
+  </head>
+
+  <body>
+    <script>
+      // create world
+      var world = new dojo3d.World();
+      var ui = dojo3d.UI;
+
+      //fetch 3d models we can use, then do our main code
+      world.fetchPrefabModels().then(async () => {
+        // get the Happy Halloween scene model, add it to the scene at scale 0.1
+        // https://sketchfab.com/JessSwynn; License: Creative Commons Attribution
+        var scene = world.getPrefabModelByName("Happy Halloween");
+        obj = await world.addSceneObject(scene, 0.1);
+
+        //turn some lights on
+        world.addLights();
+
+        // define camera viewpoints so we can use them later
+        var viewpoints = [
+          { title: "ZoomedOut", position: { x: 0.0, y: 0.0, z: 5.0 } },
+          { title: "House", position: { x: 0.059, y: 0.255, z: 1.099 } },
+          { title: "Spider", position: { x: 0.05, y: 0.58, z: 0.424 } },
+          { title: "BackHouse", position: { x: 0.041, y: 0.463, z: -1.731 } },
+          {
+            title: "BackUpstairs",
+            position: { x: -0.066, y: 0.567, z: -0.438 },
+          },
+          { title: "Ghost", position: { x: -0.139, y: 0.142, z: -0.466 } },
+          { title: "RIP", position: { x: -0.216, y: 0.005, z: 0.57 } },
+          { title: "Cat", position: { x: -0.028, y: -0.071, z: 0.826 } },
+        ];
+
+        world.setViewpoints(viewpoints);
+
+        /////////////////////////////////////////
+        // Our main code for a simple story
+        // animate to viewpoint named "ZoomedOut"
+        await world.animateToViewpoint("ZoomedOut");
+
+        // show intro message box at x:10,y:10
+        ui.showMessage("Hello..", 10, 10);
+
+        //wait a few seconds
+        await ui.wait(3);
+
+        // ask a question, answer will be "The option value", and answer.optionNumber is the option number selected starting at 1 (1,2,3 etc).
+        let answer = await ui.ask("Why are your here?", [
+          "I don't know.",
+          "You sent for me.",
+        ]);
+
+        if (answer.optionNumber == 1) {
+          ui.showMessage("Hmm, lost are we..");
+        } else {
+          ui.showMessage("Hmm, I don't remember doing that..");
+        }
+
+        // animate to viewpoint named "ZoomedOut"
+        await world.animateToViewpoint("Cat");
+      });
+    </script>
+  </body>
+</html>
+```
+
+# Other Examples
+
+[Low Poly Terrain Scene](https://repl.it/@webprofusionchr/amongyou)
+![Among You](screens/amongyou.png)
diff --git a/docs/screens/amongyou.png b/docs/screens/amongyou.png
diff --git a/screens/halloween.png → docs/screens/halloween.png b/screens/halloween.png → docs/screens/halloween.png
diff --git a/docs/v1/dojo3d.css b/docs/v1/dojo3d.css
@@ -0,0 +1,50 @@
+html, body {
+  margin: 0;
+  height: 100%;
+}
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+#stats {
+  z-index: 100;
+  border: 1px solid whitesmoke;
+  color: whitesmoke;
+  background-color: black;
+  display: none;
+}
+
+#msgbox {
+  position: absolute;
+  left:10%;
+  top:10%;
+  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;
+}
+
+#msgbox li a {
+  text-decoration: none;
+}
+#msgbox li a, #msgbox li a:hover, #msgbox li a:visited {
+    color:white;
+    font-weight: bold;
+}
diff --git a/docs/v1/dojo3d.js b/docs/v1/dojo3d.js