Merge branch 'main' into hb-style-system-separation

Volumetrics-io · Feb 9, 2024 · d50fba7 · d50fba7
2 parents 6acc3cc + c24f891
commit d50fba7
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 13 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>mr.js</title>
+    <meta name="description" content="mr.js">
+    <script src="./mr.js"></script>
+    <link rel="stylesheet" type="text/css" href="./index-style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body >
+   <mr-app>
+      <mr-panel class="layout">
+        <mr-div id="navbar">
+          <mr-a href="https://volumetrics.io" target="_blank" class="company">
+            volumetrics
+          </mr-a>
+            <mr-model
+              class="logo"
+              id="logo-model"  
+              src="/assets/models/logo.stl" 
+              data-comp-instancing="type: animate;"
+              data-comp-spin="maxspeed: -0.002; acceleration: -0.000008;"  
+              data-rotation="-22.91 17.1887 45.8366">
+            </mr-model>
+          <mr-button onclick="spin()" class="spin-button">
+            spin
+          </mr-button>
+        </mr-div>
+
+        <mr-text class="title">
+          mr.js
+        </mr-text>
+
+
+        <mr-div class="headset">
+          <mr-img src="/assets/textures/headset-keyboard.jpeg"></mr-img>
+          <mr-text class="sub-title">
+            Building for Mixed Reality, in Mixed Reality.
+          </mr-text>
+        </mr-div>
+        <mr-text class="col-2 example-header">
+            Examples
+          </mr-text>
+        <mr-div class="links col-2">
+          <mr-a class="example-link" href="https://mrjs.io/examples/anchors.html">
+            Anchoring
+          </mr-a>
+          <mr-a class="example-link" href="https://mrjs.io/examples/audio.html">
+            Audio
+          </mr-a>
+          <mr-a class="example-link" href="https://mrjs.io/examples/embed.html">
+            Embed
+          </mr-a>
+          <mr-a class="example-link" href="https://mrjs.io/examples/models.html">
+            Models
+          </mr-a>
+          <mr-a class="example-link" href="https://mrjs.io/examples/skybox.html">
+            Skybox
+          </mr-a>
+        </mr-div>
+
+      <mr-text class="paragraph">
+        Ex veniam sunt laboris magna commodo minim eiusmod consequat dolore velit ipsum dolore. Sit nisi id tempor occaecat aute commodo nulla fugiat eu ex sit anim duis. Non eiusmod dolore exercitation adipisicing laboris elit commodo enim proident et.
+
+        Eiusmod tempor veniam et nulla eiusmod ex aute excepteur enim. Velit voluptate proident fugiat aute ea. Qui proident ad consequat enim anim nulla. Est aliquip sint nostrud elit pariatur ipsum dolor magna est eiusmod Lorem pariatur labore. Adipisicing commodo occaecat ea ut nulla magna irure officia nostrud aliqua officia culpa ex pariatur. Aliquip consequat ad proident elit laboris et aliqua nisi est amet tempor. Dolor esse labore laboris reprehenderit id sit.
+
+        Anim ipsum sit dolore id excepteur ex aliqua aute culpa duis adipisicing. Anim magna minim do nisi anim amet pariatur. Nulla ad ullamco labore culpa quis. Incididunt pariatur laboris do duis irure.
+
+        Pariatur excepteur et proident nisi. Id exercitation qui pariatur aliquip eiusmod. Nulla pariatur ad excepteur aliqua dolore sint laboris sit laborum adipisicing voluptate.
+
+        Sit aliqua eu ullamco culpa labore nostrud sit. Ullamco sit cillum excepteur officia irure laboris occaecat. Esse anim ut voluptate excepteur excepteur nostrud laboris.
+
+        Voluptate amet exercitation in consequat adipisicing eu in ea nulla eu occaecat excepteur ea irure. Nisi enim mollit do proident ex. In exercitation nostrud anim ad nulla dolor aute Lorem ipsum nostrud adipisicing pariatur. Deserunt deserunt amet anim cillum. Ex nostrud eu aute eu amet dolor. Ex aute in quis qui irure ut pariatur nisi in. Proident id fugiat anim excepteur cupidatat duis cupidatat adipisicing reprehenderit.
+
+                        Sint eiusmod laboris eu voluptate ullamco ea fugiat exercitation id ad magna commodo. Irure proident et qui ullamco aliquip aute dolor nostrud laborum excepteur sint aute ea. Sit consectetur qui Lorem esse magna voluptate irure aliqua nostrud adipisicing eu irure cupidatat sunt. Officia dolore sint laboris Lorem enim labore mollit reprehenderit laboris amet. Aute eiusmod fugiat labore veniam cupidatat dolor ipsum.
+
+        Sit aliquip excepteur laboris ullamco minim sint sit dolor cupidatat culpa consequat quis sit tempor. Culpa voluptate eiusmod et eiusmod. Lorem deserunt ullamco laborum ut. Cillum aute dolore mollit sint amet. Qui ea deserunt consectetur eiusmod. Ullamco qui irure nostrud ea est do. Pariatur laboris labore in irure ea voluptate quis.
+
+        Nostrud deserunt ad officia ut irure cupidatat pariatur ea fugiat. Cillum nisi ullamco tempor consequat laborum quis pariatur cillum enim in elit veniam. Cupidatat laborum do cupidatat irure occaecat sunt nostrud. Adipisicing cillum non adipisicing enim officia excepteur ullamco fugiat.
+        </mr-text>
+
+      </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>
+  </body>
+
+  <footer>
+    <script src="./assets/js/SpinSystem.js"></script>
+    <script>
+
+      let model = document.querySelector('#logo-model')
+
+      console.log(mrjsUtils.xr.isPresenting);
+
+
+      // increases the maxspeed and acceleration of the animation component on the logo
+      function spin() {
+        console.log('spin');
+        // let animationComp = model.components.get('animation')
+        // if (animationComp !== undefined && animationComp !== null) {
+        //   model.components.set('animation', {maxspeed: animationComp.maxspeed * 10000, acceleration: animationComp.acceleration * 10000})
+        // }
+      }
+
+
+    </script>
+  </footer>
+</html>
diff --git a/dist/mr.js b/dist/mr.js
diff --git a/samples/index-style.css b/samples/index-style.css
@@ -206,13 +206,15 @@
     text-align: center;
     margin: 0 auto;
     color: rgba(24, 24, 24, 0.75);
+    z-index: 2;
   }
 
   .links {
     display:grid;
     grid-template-columns: 1fr 1fr;
     gap: 1vw;
     margin-bottom: 10px;
+    z-index: 2;
   }
 
   .col-1{
@@ -231,6 +233,7 @@
     grid-row: 2 / 5;
     grid-column: 1 / -1;
     object-fit: cover;
+    z-index: 1;
   }
 
   /* .headset > mr-img {
@@ -244,4 +247,5 @@
     font-size: 16px;
 
     grid-column: 2;
+    z-index: 2;
   }
diff --git a/samples/index.html b/samples/index.html
@@ -15,15 +15,14 @@
           <mr-a href="https://volumetrics.io" target="_blank" class="company">
             volumetrics
           </mr-a>
-          <mr-div class="logo">
             <mr-model
+              class="logo"
               id="logo-model"  
               src="/assets/models/logo.stl" 
               data-comp-instancing="type: animate;"
               data-comp-spin="maxspeed: -0.002; acceleration: -0.000008;"  
               data-rotation="-22.91 17.1887 45.8366">
             </mr-model>
-          </mr-div>
           <mr-button onclick="spin()" class="spin-button">
             spin
           </mr-button>
@@ -104,10 +103,11 @@
 
       // increases the maxspeed and acceleration of the animation component on the logo
       function spin() {
-        let animationComp = model.components.get('animation')
-        if (animationComp !== undefined && animationComp !== null) {
-          model.components.set('animation', {maxspeed: animationComp.maxspeed * 10000, acceleration: animationComp.acceleration * 10000})
-        }
+        console.log('spin');
+        // let animationComp = model.components.get('animation')
+        // if (animationComp !== undefined && animationComp !== null) {
+        //   model.components.set('animation', {maxspeed: animationComp.maxspeed * 10000, acceleration: animationComp.acceleration * 10000})
+        // }
       }
 
 

diff --git a/src/core/MRElement.js b/src/core/MRElement.js
@@ -1,6 +1,6 @@
 /**
  * @class MRElement
- * @classdesc The first step in MR.js extending an HTMLElement. Used as a base for both `mr-app` and `mr-entity`.
+ * @classdesc The first step in MRjs extending an HTMLElement. Used as a base for both `mr-app` and `mr-entity`.
  * @augments HTMLElement
  */
 export class MRElement extends HTMLElement {

diff --git a/src/dataManagers/MRPlaneManager.js b/src/dataManagers/MRPlaneManager.js
@@ -3,7 +3,7 @@ import { MRPlane } from 'mrjs/dataTypes/MRPlane';
 
 /**
  * @class MRPlaneManager
- * @classdesc creates and manages the mr.js representation of XR planes.
+ * @classdesc creates and manages the MRjs representation of XR planes.
  * The resulting planes have RAPIER rigid bodies and THREE.js meshes that occlude virtual content by default
  */
 export class MRPlaneManager {

diff --git a/src/utils/Physics.js b/src/utils/Physics.js
@@ -6,7 +6,7 @@ let physics = {};
 
 /**
  * @memberof physics
- * @description the Rapier collision groups used throughout mr.js
+ * @description the Rapier collision groups used throughout MRjs
  */
 physics.CollisionGroups = {
     USER: 0x00020001,