Merge pull request #22 from poeticAndroid/glitch

v0.20
poeticAndroid · Oct 8, 2020 · d093925 · d093925
2 parents 792ac1b + 629b123
commit d093925
Show file tree

Hide file tree

Showing 12 changed files with 81 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -2,14 +2,15 @@
 
 ```html
 <script type="text/javascript" src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
+<script type="text/javascript" src="https://mixedreality.mozilla.org/ammo.js/builds/ammo.wasm.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-physics-system.min.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.19/components/utils.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.19/components/a-locomotion.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.19/components/a-items.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.19/components/a-include.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.19/components/a-editor.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.19/components/a-tiledwalls.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.19/components/a-door.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.20/components/utils.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.20/components/a-locomotion.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.20/components/a-items.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.20/components/a-include.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.20/components/a-editor.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.20/components/a-tiledwalls.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.20/components/a-door.js"></script>
 ```
 
 [Click for demo!](https://poetic-aframe.glitch.me/)

diff --git a/components/a-door.js b/components/a-door.js
@@ -13,7 +13,7 @@
 
     init: function () {
       this._closedAng = this.el.components.rotation.data.y
-      this._knob = this.el.ensure(".door-knob", "a-box", { class: "door-knob", depth: 0.25, grabbable: { dynamicBody: false }, visible: false })
+      this._knob = this.el.ensure(".door-knob", "a-box", { class: "door-knob", depth: 0.25, grabbable: { physics: false }, visible: false })
       this._grabber = document.querySelector("[grabber]")
 
       this.toggleOpen = this.toggleOpen.bind(this)

diff --git a/components/a-editor.js b/components/a-editor.js
@@ -44,7 +44,7 @@
     update: function () {
       this._angularSize.set(360, 360, 360).divide(this.data.rotationSteps)
       if (!this.el.getAttribute("grabbable")) this.el.setAttribute("grabbable", {
-        dynamicBody: false,
+        physics: false,
         freeOrientation: false
       })
       if (!this.el.getAttribute("raycaster")) this.el.setAttribute("raycaster", {
@@ -97,11 +97,11 @@
           let anch = this._anchors[i]
           if (grab && grab.copyWorldPosRot) {
             grab.copyWorldPosRot(anch)
-            if (grab.body) {
-              grab.body.sleep()
-              grab.body.velocity.set(0, 0, 0)
-              grab.body.angularVelocity.set(0, 0, 0)
-            }
+            // if (grab.body) {
+            //   grab.body.sleep()
+            //   grab.body.velocity.set(0, 0, 0)
+            //   grab.body.angularVelocity.set(0, 0, 0)
+            // }
           }
         }
 

diff --git a/components/a-items.js b/components/a-items.js
@@ -164,9 +164,9 @@
             .multiplyScalar(512 / timeDelta)
 
           if (this[hand].grabbed.body) {
-            this[hand].grabbed.body.sleep()
-            this[hand].grabbed.body.velocity.set(delta.x, delta.y, delta.z)
-            // this[hand].grabbed.body.angularVelocity.set(0, 0, 0)
+            //   this[hand].grabbed.body.sleep()
+            //   this[hand].grabbed.body.velocity.set(delta.x, delta.y, delta.z)
+            //   // this[hand].grabbed.body.angularVelocity.set(0, 0, 0)
           }
           delta.copy(pos2).sub(pos1)
           if (delta.length() > 1) {
@@ -213,10 +213,15 @@
       ray.refreshObjects()
       let int = ray.intersections[0]
       if (int) {
-        for (let h of this._hands) {
-          if (this["_" + h].grabbed == int.object.el) this.drop(h)
-        }
+        this.dropObject(int.object.el)
         this[hand].grabbed = int.object.el
+        if (this[hand].grabbed.getAttribute("ammo-body")) {
+          this[hand].grabbedAttrs = this[hand].grabbedAttrs || {}
+          this[hand].grabbedAttrs["ammo-body"] = this[hand].grabbed.getAttribute("ammo-body")
+          this[hand].grabbedAttrs["ammo-shape"] = this[hand].grabbed.getAttribute("ammo-shape")
+          this[hand].grabbed.removeAttribute("ammo-body")
+          this[hand].grabbed.removeAttribute("ammo-shape")
+        }
         if (this[hand].grabbed.components.grabbable.data.freeOrientation) {
           this[hand].anchor.copyWorldPosRot(this[hand].grabbed)
           if (hand == "_head") {
@@ -257,8 +262,14 @@
     drop: function (hand = "head") {
       hand = "_" + hand
       if (this[hand].grabbed) {
+        if (this[hand].grabbedAttrs) {
+          for (let attr in this[hand].grabbedAttrs) {
+            this[hand].grabbed.setAttribute(attr, this[hand].grabbedAttrs[attr])
+          }
+          this[hand].grabbedAttrs = null
+        }
         if (this[hand].grabbed.body) {
-          this[hand].grabbed.body.wakeUp()
+          //   this[hand].grabbed.body.wakeUp()
         }
       }
       this.emit("drop", this[hand].hand, this[hand].grabbed)
@@ -300,15 +311,34 @@
       this.useUp(hand, btn)
     }
   })
+  AFRAME.registerComponent("ammo-wait", {
+    init: function () {
+      setTimeout(() => {
+        let body = this.el.getAttribute("ammo-body")
+        let shape = this.el.getAttribute("ammo-shape")
+        this.el.removeAttribute("ammo-body")
+        this.el.removeAttribute("ammo-shape")
+        if (body && this.el.isPlaying) {
+          setTimeout(() => {
+            this.el.setAttribute("ammo-body", body)
+            this.el.setAttribute("ammo-shape", shape)
+          })
+        }
+      })
+      this.el.addEventListener("model-loaded", this.init.bind(this))
+    }
+  })
   AFRAME.registerComponent("grabbable", {
     schema: {
       freeOrientation: { type: "boolean", default: true },
-      dynamicBody: { type: "boolean", default: true }
+      physics: { type: "boolean", default: true }
     },
 
     update: function () {
       // Do something when component's data is updated.
-      if (this.data.dynamicBody && !this.el.getAttribute("dynamic-body")) this.el.setAttribute("dynamic-body", "")
+      if (this.data.physics && !this.el.getAttribute("ammo-body")) this.el.setAttribute("ammo-body", "")
+      if (this.data.physics && !this.el.getAttribute("ammo-shape")) this.el.setAttribute("ammo-shape", "")
+      if (this.data.physics && !this.el.getAttribute("ammo-wait")) this.el.setAttribute("ammo-wait", "")
     }
   })
 }.call(this))
diff --git a/components/a-items.md b/components/a-items.md
@@ -32,7 +32,7 @@ Add the `grabbable` component to any object you want the player to be able to pi
 | Property        | Description                                                                                          | Default |
 | --------------- | ---------------------------------------------------------------------------------------------------- | ------- |
 | freeOrientation | When enabled grabbed object keep their orientation, otherwise it resets to same orientation as hand. | true    |
-| dynamicBody     | Whether or not to add `dynamic-body` component automatically.                                        | true    |
+| physics         | Whether or not to add physics components automatically.                                              | true    |
 
 ### Events
 

diff --git a/components/a-locomotion.js b/components/a-locomotion.js
@@ -246,7 +246,7 @@
       this.moveBy(dir.x, 0, dir.y)
       if (this._godMode)
         this.moveBy(this.cameraDir.x * fwd, this.cameraDir.y * fwd, this.cameraDir.z * fwd)
-      
+
       dir.recycle()
       camdir.recycle()
       pivot.recycle()
@@ -377,24 +377,26 @@
 
   AFRAME.registerComponent("floor", {
     schema: {
-      staticBody: { type: "boolean", default: true }
+      physics: { type: "boolean", default: true }
     },
 
     update: function () {
       // Do something when component's data is updated.
-      if (this.data.staticBody && !this.el.getAttribute("static-body"))
-        this.el.setAttribute("static-body", "")
+      if (this.data.physics && !this.el.getAttribute("ammo-body")) this.el.setAttribute("ammo-body", "type: static")
+      if (this.data.physics && !this.el.getAttribute("ammo-shape")) this.el.setAttribute("ammo-shape", "")
+      if (this.data.physics && !this.el.getAttribute("ammo-wait")) this.el.setAttribute("ammo-wait", "")
     }
   })
   AFRAME.registerComponent("wall", {
     schema: {
-      staticBody: { type: "boolean", default: true }
+      physics: { type: "boolean", default: true }
     },
 
     update: function () {
       // Do something when component's data is updated.
-      if (this.data.staticBody && !this.el.getAttribute("static-body"))
-        this.el.setAttribute("static-body", "")
+      if (this.data.physics && !this.el.getAttribute("ammo-body")) this.el.setAttribute("ammo-body", "type: static")
+      if (this.data.physics && !this.el.getAttribute("ammo-shape")) this.el.setAttribute("ammo-shape", "")
+      if (this.data.physics && !this.el.getAttribute("ammo-wait")) this.el.setAttribute("ammo-wait", "")
     }
   })
   AFRAME.registerComponent("start", {

diff --git a/components/a-locomotion.md b/components/a-locomotion.md
@@ -53,7 +53,7 @@ Add the `floor` component to any object you want the player to be able to walk o
 
 | Property   | Description                                                  | Default |
 | ---------- | ------------------------------------------------------------ | ------- |
-| staticBody | Whether or not to add `static-body` component automatically. | true    |
+| physics    | Whether or not to add physics components automatically.      | true    |
 
 ## wall
 
@@ -67,7 +67,7 @@ Add the `wall` component to any object you want the player not to be able to wal
 
 | Property   | Description                                                  | Default |
 | ---------- | ------------------------------------------------------------ | ------- |
-| staticBody | Whether or not to add `static-body` component automatically. | true    |
+| physics    | Whether or not to add physics components automatically.      | true    |
 
 ## start
 

diff --git a/components/utils.js b/components/utils.js
@@ -47,17 +47,17 @@ AFRAME.AEntity.prototype.copyWorldPosRot = function (srcEl) {
   if (!dest) return
   if (!dest.parent) return
   src.getWorldPosition(dest.position)
-  if (body) {
-    body.position.copy(dest.position)
-  }
+  // if (body) {
+  //   body.position.copy(dest.position)
+  // }
   dest.parent.worldToLocal(dest.position)
 
   dest.getWorldQuaternion(quat)
   dest.quaternion.multiply(quat.conjugate().normalize())
   src.getWorldQuaternion(quat)
-  if (body) {
-    body.quaternion.copy(quat)
-  }
+  // if (body) {
+  //   body.quaternion.copy(quat)
+  // }
   dest.quaternion.multiply(quat.normalize())
 
   quat.recycle()

diff --git a/editor.html b/editor.html
@@ -7,8 +7,8 @@
   <title>#world</title>
   <link rel="stylesheet" href="editor.css" />
   <script type="text/javascript" src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
-  <script type="text/javascript"
-    src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-physics-system.min.js"></script>
+  <script type="text/javascript" src="https://mixedreality.mozilla.org/ammo.js/builds/ammo.wasm.js"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-physics-system.min.js"></script>
   <script type="text/javascript" src="components/utils.js"></script>
   <script type="text/javascript" src="components/a-locomotion.js"></script>
   <script type="text/javascript" src="components/a-items.js"></script>

diff --git a/editor.js b/editor.js
@@ -35,7 +35,7 @@ editBtn.addEventListener("click", () => {
   let rotXZ = Math.pow(2, parseFloat(document.querySelector("#rotxzTxt").value))
   let rotY = Math.pow(2, parseFloat(document.querySelector("#rotyTxt").value))
   document.body.innerHTML = `
-    <a-scene>
+    <a-scene physics="driver: ammo; debug: true; debugDrawMode: 1;">
       <a-entity include="scenes/_assets.html"></a-entity>
       <a-entity locomotion="godMode:true" grabber>
         <a-gltf-model src="https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fguncil.glb?v=1602022842372" position="0 1 -.25" editor="gridSize: ${gridXZ} ${gridY} ${gridXZ};rotationSteps: ${rotXZ} ${rotY} ${rotXZ};"></a-gltf-model>
@@ -47,7 +47,7 @@ editBtn.addEventListener("click", () => {
 let runBtn = document.querySelector("#runBtn")
 runBtn.addEventListener("click", () => {
   document.body.innerHTML = `
-    <a-scene>
+    <a-scene physics="driver: ammo; debug: true; debugDrawMode: 1;">
       <a-entity include="scenes/_assets.html"></a-entity>
       <a-entity locomotion grabber></a-entity>
       <a-entity id="world"></a-entity>

diff --git a/index.html b/index.html
@@ -20,8 +20,8 @@
   <link rel="icon" type="image/png"
     href="https://cdn.glitch.com/project-avatar/e956e2ed-f877-4602-a395-a2e234731117.png" />
   <script type="text/javascript" src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
-  <script type="text/javascript"
-    src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-physics-system.min.js"></script>
+  <script type="text/javascript" src="https://mixedreality.mozilla.org/ammo.js/builds/ammo.wasm.js"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-physics-system.min.js"></script>
   <script type="text/javascript" src="components/utils.js"></script>
   <script type="text/javascript" src="components/a-locomotion.js"></script>
   <script type="text/javascript" src="components/a-items.js"></script>
@@ -32,7 +32,7 @@
 </head>
 
 <body>
-  <a-scene loading-screen>
+  <a-scene loading-screen physics="driver: ammo;">
     <a-entity include="scenes/_assets.html"></a-entity>
     <a-entity locomotion grabber></a-entity>
     <a-entity include="scenes/demo.html"></a-entity>

diff --git a/scenes/demo.html b/scenes/demo.html
@@ -1,11 +1,11 @@
 <a-entity id="world">
   <a-sky src="#skyImg"></a-sky>
-  <a-entity start position="5 5 5"></a-entity>
+  <a-entity start position="0 2 0"></a-entity>
   <a-box rotation="-90 0 0" src="#floorImg" width="16" height="16" depth="0.01" floor></a-box>
   <a-box color="#fc9" position="0 1.55 -4" rotation="10 11 12" height="0.4" grabbable></a-box>
   <a-box color="#c9f" position="-0.55 .55 -4" rotation="10 11 12" grabbable></a-box>
   <a-box color="#9fc" position="1.55 .55 -3" scale=".5 .5 .5" grabbable></a-box>
-  <a-gltf-model grabbable src="#cat" position="0 1 -3" rotation="1 2 4"></a-gltf-model>
+  <a-gltf-model grabbable src="#cat" position="0 30 -3" rotation="1 2 4"></a-gltf-model>
   <a-gltf-model src="#bunny" position="0 2 -3" scale=".03125 .03125 .03125"></a-gltf-model>
   <a-gltf-model grabbable="freeOrientation:false" src="#gunMdl" sound="on:usedown; src:#shot; poolSize:8;"
     position="0 .1 -1" rotation="1 2 4" scale=".05 .05 .05"></a-gltf-model>