update

Signed-off-by: Hannah Bollar <[email protected]>
Volumetrics-io · Jan 26, 2024 · 5a489b2 · 5a489b2
1 parent aa2b3b3
commit 5a489b2
Show file tree

Hide file tree

Showing 18 changed files with 61 additions and 14 deletions.
diff --git a/source/docs/assets/mr-a-example-0.png b/source/docs/assets/mr-a-example-0.png
diff --git a/source/docs/assets/mr-a-example-1.png b/source/docs/assets/mr-a-example-1.png
diff --git a/source/docs/assets/mr-app-example-0.png b/source/docs/assets/mr-app-example-0.png
diff --git a/source/docs/assets/mr-app-example-1.png b/source/docs/assets/mr-app-example-1.png
diff --git a/source/docs/assets/mr-div-example-0.png b/source/docs/assets/mr-div-example-0.png
diff --git a/source/docs/assets/mr-div-example-1.gif b/source/docs/assets/mr-div-example-1.gif
diff --git a/source/docs/assets/mr-light-example-0.png b/source/docs/assets/mr-light-example-0.png
diff --git a/source/docs/assets/mr-light-example-1.png b/source/docs/assets/mr-light-example-1.png
diff --git a/source/docs/assets/mr-panel-example-0.png b/source/docs/assets/mr-panel-example-0.png
diff --git a/source/docs/assets/mr-panel-example-1.png b/source/docs/assets/mr-panel-example-1.png
diff --git a/source/docs/mr-a.md b/source/docs/mr-a.md
@@ -12,7 +12,7 @@ The `<mr-a>`embeds a hyperlink in the UI of an `<mr-panel>`.
 </mr-app>
 ```
 
-\[example img\]
+![mr-a-example-0]("/assets/mr-a-example-0.png")
 
 ## Definition and Usage
 
@@ -30,4 +30,4 @@ Like it's HTML equivalent, `<mr-a>` can be used to wrap other elements, making t
 </mr-a>
 ```
 
-\[example img\]
+![mr-a-example-1]("/assets/mr-a-example-1.png")
diff --git a/source/docs/mr-app.md b/source/docs/mr-app.md
@@ -10,6 +10,31 @@ The `<mr-app>` tag initializes and mr.js app.
 </mr-app>
 ```
 
+## Example with basic content
+
+```html
+<mr-app debug="false">
+    <!-- The 2D UI Panel -->
+    <mr-panel class="layout">
+        <mr-text class="title">
+            This is a quick example a panel with explainer text.
+        </mr-text>
+        <!--wrap non-UI components in mr-div to anchor to UI-->
+        <mr-div id="logo">
+            <mr-model src="./assets/models/logo.glb"></mr-model> 
+        </mr-div>
+    </mr-panel>
+</mr-app>
+````
+
+### main view
+
+![mr-app-example-0](/assets/mr-app-example-0.png)
+
+### `=` pressed and rotating
+
+![mr-app-example-1](/assets/mr-app-example-1.png)
+
 ## Definition and Usage
 
 calling `<mr-app>` tag initializes mr.js and manages the render loop, physics engine, and other core features such as lighting and controllers/hand-tracking.
@@ -35,3 +60,4 @@ The `<mr-app>` tag has three optional attributes:
 * `debug` - enables various debug features such as physics, stats monitoring
   * default: `true`
   * note: hold the `=` key to move using arrows keys while in debug mode
+  * if the debug flag is present and set to `false`, certain stats are still visible
diff --git a/source/docs/mr-button.md b/source/docs/mr-button.md
@@ -1,6 +1,6 @@
 # &lt;mr-button&gt;
 
-The `<mr-button>`embeds a button in the UI of an `<mr-panel>`.
+The `<mr-button>` embeds a button in the UI of an `<mr-panel>`.
 
 ## Example
 

diff --git a/source/docs/mr-div.md b/source/docs/mr-div.md
@@ -1,6 +1,6 @@
 # &lt;mr-div&gt;
 
-The `<mr-div>`defines a division or section in an `<mr-panel>`.
+The `<mr-div>`defines a division or section in an `<mr-panel>`. This is the same concept as `<mr-entity>` but is specific to items that are within an `<mr-panel>`. Think of this as items that are specific to the UI on the panel, 2D and 3D alike.
 
 ## Example
 
@@ -27,7 +27,7 @@ The `<mr-div>`defines a division or section in an `<mr-panel>`.
 </mr-app>
 ```
 
-\[example img\]
+![mr-div-example-0]("/assets/mr-div-example-0.png")
 
 ## Definition and Usage
 
@@ -57,4 +57,4 @@ you can then apply CSS
 </mr-div>
 ```
 
-\[example gif\]
+![mr-div-example-1]("/assets/mr-div-example-1.gif")
diff --git a/source/docs/mr-light.md b/source/docs/mr-light.md
@@ -13,6 +13,28 @@
 </mr-app>
 ```
 
+## Example from homepage
+
+```html
+<mr-app>
+    <mr-panel>...</mr-panel>
+    <mr-entity data-comp-animation="type: rotate; maxspeed: 0.002; acceleration: 0.000008;" 
+             data-position="0 0 2">
+        <mr-light layer="2" color="hsl(30, 100%, 50%)" intensity="1" data-position="0 1 0"></mr-light>
+        <mr-light layer="2" color="hsl(208, 100%, 50%)" intensity="2" data-position="1 -1 0"></mr-light>
+        <mr-light layer="2" color="hsl(340, 100%, 50%)" intensity="3" data-position="-1 -1 0"></mr-light>
+    </mr-entity>
+</mr-app>
+```
+
+### Homepage without Lights added to it
+
+![mr-light-example-0]("/assets/mr-light-example-0.png")
+
+### Homepage with Lights added to it
+
+![mr-light-example-1]("/assets/mr-light-example-1.png")
+
 ## Definition and Usage
 
 `<mr-light>` can be used to create additional light sources that can be positioned throughout the environment.

diff --git a/source/docs/mr-model.md b/source/docs/mr-model.md
@@ -18,8 +18,5 @@
 
 ## Supported file types
 
-* GLB/GLTF
-* STL
-* OBJ
-* USDZ
-* ?
+* Check the [allowed extensions](https://docs.mrjs.io/javascript-api/#model.loadmodelfilepath-extension-promise.three.mesh) from the Model.loadModel function
+* The current supported list is: `fbx`, `glb`, and `stl`
diff --git a/source/docs/mr-panel.md b/source/docs/mr-panel.md
@@ -32,11 +32,11 @@ calling `<mr-panel>` tag initializes and manages 2D UI, such as images, text, an
 
 When viewed on a 2D screen, an `mr-panel` positions itself to fill the viewport, rendering itself and behaving like any 2D web app, responding to keyboard and mouse input or touch events.
 
-\[example gif\]
+![mr-panel-example-0](/assets/mr-panel-example-0.png)
 
-in MR, the panel behaves like a floating touch screen, clipping any content that extends beyond it's boundaries.
+in MR, the panel behaves like a floating touch screen, clipping any content that extends beyond its boundaries.
 
-\[example gif\]
+![mr-panel-example-1](/assets/mr-panel-example-1.png)
 
 ## 2.5D UI
 

diff --git a/source/docs/mr-volume.md b/source/docs/mr-volume.md
@@ -0,0 +1 @@
+mr-volume.md
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		mr-volume.md
Check failure on line 1 in source/docs/mr-volume.md View workflow job for this annotation GitHub Actions / markdownlint `First line in a file should be a top-level heading [Context: "mr-volume.md"]`