Merge pull request #21 from poeticAndroid/glitch

v0.19
poeticAndroid · Oct 7, 2020 · 792ac1b · 792ac1b
2 parents a3df2be + 2da557a
commit 792ac1b
Show file tree

Hide file tree

Showing 16 changed files with 527 additions and 169 deletions.
diff --git a/.glitch-assets b/.glitch-assets
@@ -25,3 +25,22 @@
 {"name":"floral_paper.png","date":"2020-09-24T20:17:31.599Z","url":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Ffloral_paper.png","type":"image/png","size":2354399,"imageWidth":1024,"imageHeight":1024,"thumbnail":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fthumbnails%2Ffloral_paper.png","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"7FUZjgiLJNO1UxdJ"}
 {"uuid":"V1dWfF9m2zy1WVjU","deleted":true}
 {"name":"damask_paper.png","date":"2020-09-24T20:39:12.219Z","url":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fdamask_paper.png","type":"image/png","size":1253951,"imageWidth":1024,"imageHeight":1024,"thumbnail":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fthumbnails%2Fdamask_paper.png","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"Mw3qTCXbRre3NzOs"}
+{"name":"pencil.glb","date":"2020-10-04T03:48:41.390Z","url":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fpencil.glb","type":"","size":17996,"thumbnail":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fthumbnails%2Fpencil.glb","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"cIgThKhkmmD8S0PA"}
+{"uuid":"cIgThKhkmmD8S0PA","deleted":true}
+{"name":"pencil.glb","date":"2020-10-04T04:22:34.581Z","url":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fpencil.glb","type":"","size":20344,"thumbnail":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fthumbnails%2Fpencil.glb","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"dFSjHm1IrMisfuRM"}
+{"uuid":"dFSjHm1IrMisfuRM","deleted":true}
+{"name":"pencil.glb","date":"2020-10-04T19:48:30.189Z","url":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fpencil.glb","type":"","size":25712,"thumbnail":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fthumbnails%2Fpencil.glb","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"3WrriJchsFfPP3gL"}
+{"uuid":"3WrriJchsFfPP3gL","deleted":true}
+{"name":"pencil.glb","date":"2020-10-04T20:30:34.075Z","url":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fpencil.glb","type":"","size":25712,"thumbnail":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fthumbnails%2Fpencil.glb","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"l8KwaOzhmbRWbejU"}
+{"uuid":"l8KwaOzhmbRWbejU","deleted":true}
+{"name":"pencil.glb","date":"2020-10-04T20:32:20.554Z","url":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fpencil.glb","type":"","size":25712,"thumbnail":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fthumbnails%2Fpencil.glb","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"woOFONPXy4InfaOb"}
+{"uuid":"woOFONPXy4InfaOb","deleted":true}
+{"name":"guncil.glb","date":"2020-10-06T21:41:23.975Z","url":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fguncil.glb","type":"","size":37180,"thumbnail":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fthumbnails%2Fguncil.glb","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"S9RDE97suyAiUhrz"}
+{"uuid":"S9RDE97suyAiUhrz","deleted":true}
+{"name":"guncil.glb","date":"2020-10-06T21:54:42.154Z","url":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fguncil.glb","type":"","size":37180,"thumbnail":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fthumbnails%2Fguncil.glb","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"hOD3aYXXdJsISRHI"}
+{"uuid":"hOD3aYXXdJsISRHI","deleted":true}
+{"name":"guncil.glb","date":"2020-10-06T21:58:27.475Z","url":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fguncil.glb","type":"","size":37180,"thumbnail":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fthumbnails%2Fguncil.glb","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"aulQNHSWbcwGADbI"}
+{"uuid":"aulQNHSWbcwGADbI","deleted":true}
+{"name":"guncil.glb","date":"2020-10-06T22:09:55.884Z","url":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fguncil.glb","type":"","size":37180,"thumbnail":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fthumbnails%2Fguncil.glb","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"CdibocbwkAMWM3jt"}
+{"uuid":"CdibocbwkAMWM3jt","deleted":true}
+{"name":"guncil.glb","date":"2020-10-06T22:20:42.372Z","url":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fguncil.glb","type":"","size":37180,"thumbnail":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fthumbnails%2Fguncil.glb","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"74s6jEy8ZCjLiwqT"}
diff --git a/README.md b/README.md
@@ -3,13 +3,13 @@
 ```html
 <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://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.18/components/utils.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.18/components/a-locomotion.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.18/components/a-items.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.18/components/a-include.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.18/components/a-editor.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.18/components/a-tiledwalls.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.18/components/a-door.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>
 ```
 
 [Click for demo!](https://poetic-aframe.glitch.me/)

diff --git a/components/a-editor.js b/components/a-editor.js
@@ -49,6 +49,7 @@
       })
       if (!this.el.getAttribute("raycaster")) this.el.setAttribute("raycaster", {
         objects: ".editable, .editable *",
+        far: 1,
         autoRefresh: false,
         showLine: true
       })
@@ -74,8 +75,8 @@
             grab.pause()
             let oldScale = JSON.parse(JSON.stringify(grab.getAttribute("scale")))
             let newScale = JSON.parse(JSON.stringify(oldScale))
-            newScale.x*=1.1
-            newScale.y*=1.1
+            newScale.x *= 1.1
+            newScale.y *= 1.1
             newScale.z *= 1.1
             grab.setAttribute("scale", newScale)
             setTimeout(() => {
@@ -324,10 +325,12 @@
     },
 
     _snap: function (el) {
-      let rot = THREE.Vector3.temp()
+      let rot = THREE.Vector3.reuse()
       el.object3D.position.divide(this.data.gridSize).round().multiply(this.data.gridSize)
       rot.copy(el.getAttribute("rotation")).divide(this._angularSize).round().multiply(this._angularSize)
       el.setAttribute("rotation", AFRAME.utils.coordinates.stringify(rot))
+
+      rot.recycle()
     },
 
     _parseHTML: function (html) {

diff --git a/components/a-editor.md b/components/a-editor.md
@@ -7,7 +7,7 @@ Component for making a scene editor.
 Add the `editor` component to an entity that represents your tool.
 
 ```html
-<a-torus-knot editor scale=".0625 .0625 .0625" position="0 1 0"></a-torus-knot>
+<a-gltf-model src="tool.glb" position="0 1 -.25" editor></a-gltf-model>
 ```
 
 ### Properties

diff --git a/components/a-items.js b/components/a-items.js
@@ -149,9 +149,9 @@
           this._gamepadDelta[7] = gamepad.buttons[7].value > 0.75
         }
       }
-      let pos1 = THREE.Vector3.temp()
-      let pos2 = THREE.Vector3.temp()
-      let delta = THREE.Vector3.temp()
+      let pos1 = THREE.Vector3.reuse()
+      let pos2 = THREE.Vector3.reuse()
+      let delta = THREE.Vector3.reuse()
       for (let hand of this._hands) {
         hand = "_" + hand
         if (this[hand].grabbed) {
@@ -176,6 +176,10 @@
         }
       }
       if (this._wildItem > 0) this._wildItem -= 0.5
+
+      pos1.recycle()
+      pos2.recycle()
+      delta.recycle()
     },
 
     enableHands: function () {

diff --git a/components/a-items.md b/components/a-items.md
@@ -10,8 +10,14 @@ Add the `grabber` component to your player rig like so:
 <a-entity id="player" grabber></a-entity>
 ```
 
-This makes it possible to grab grabbable objects using the grab-button on a VR-controller, shoulder-button on gamepad, E-key on keyboard or long-tap on touchscreen.
-To use an item press the trigger on controller or gamepad, left mousebutton or tap on touchscreen.
+This makes it possible to grab and use grabbable objects using the following controls.
+
+| Action      | Controller           | Desktop      | Touch    |
+| ----------- | -------------------- | ------------ | -------- |
+| Grab/drop   | Grip/shoulder Button | E            | Long tap |
+| Primary use | Trigger              | Left click   | Tap      |
+| Secondary   | A                    | Right click  |
+| Tertiary    | B                    | Middle click |
 
 ## grabbable
 
@@ -41,14 +47,15 @@ These event are emitted on the grabbable as well as the hand that initiated the
 
 ### Methods
 
-`hand` parameter is on of `"head"`(default), `"left"` or `"right"`.
-
-| Method           | Description                                           |
-| ---------------- | ----------------------------------------------------- |
-| toggleGrab(hand) | Drop if holding somethind, attempt to grab otherwise. |
-| grab(hand)       | Attempt to grab something.                            |
-| use(hand)        | Shortly use grabbable.                                |
-| useDown(hand)    | Start using grabbable.                                |
-| useUp(hand)      | Stop using grabbable.                                 |
-| drop(hand)       | Drop grabbable.                                       |
-| dropObject(el)   | Drop specified grabbable if held.                     |
+`hand` parameter is either `"head"`(default), `"left"` or `"right"`.
+`button` parameter is 0 - 2, where 0 is the primary use button.
+
+| Method                | Description                                           |
+| --------------------- | ----------------------------------------------------- |
+| toggleGrab(hand)      | Drop if holding something, attempt to grab otherwise. |
+| grab(hand)            | Attempt to grab something.                            |
+| use(hand, button)     | Shortly use grabbable.                                |
+| useDown(hand, button) | Start using grabbable.                                |
+| useUp(hand, button)   | Stop using grabbable.                                 |
+| drop(hand)            | Drop grabbable.                                       |
+| dropObject(el)        | Drop specified grabbable if held.                     |
diff --git a/components/a-locomotion.js b/components/a-locomotion.js
@@ -91,11 +91,11 @@
     },
 
     tick: function (time, timeDelta) {
-      let dir = THREE.Vector2.temp()
-      let camdir = THREE.Vector2.temp()
-      let pivot = THREE.Vector2.temp()
-      let delta = THREE.Vector3.temp()
-      let matrix = THREE.Matrix3.temp()
+      let dir = THREE.Vector2.reuse()
+      let camdir = THREE.Vector2.reuse()
+      let pivot = THREE.Vector2.reuse()
+      let delta = THREE.Vector3.reuse()
+      let matrix = THREE.Matrix3.reuse()
       let gamepad, i, l, len, mk, ref, rk
       this._cameraObj.object3D.updateMatrix()
       // Do something on every scene tick or frame.
@@ -246,26 +246,34 @@
       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()
+      delta.recycle()
+      matrix.recycle()
     },
 
     moveBy: function (x, y, z, safe) {
-      let delta = THREE.Vector3.temp()
+      let delta = THREE.Vector3.reuse()
       delta.set(x, y, z)
 
       this.playCenter.add(delta)
       this.playerPos.add(delta)
       this.cameraPos.add(delta)
       this.el.object3D.position.add(delta)
       if (safe || this._godMode) this.safePos.copy(this.playerPos)
+
+      delta.recycle()
     },
     moveTo: function (x, y, z, safe) {
       this.moveBy(x - this.playerPos.x, y - this.playerPos.y, z - this.playerPos.z, safe)
     },
 
     rotateBy: function (angle) {
-      let pos = THREE.Vector2.temp()
-      let pivot = THREE.Vector2.temp()
-      let delta = THREE.Vector3.temp()
+      let pos = THREE.Vector2.reuse()
+      let pivot = THREE.Vector2.reuse()
+      let delta = THREE.Vector3.reuse()
       pos.set(this.playerPos.x, this.playerPos.z)
       pivot.set(this.playCenter.x, this.playCenter.z)
       pos.rotateAround(pivot, -angle)
@@ -275,6 +283,10 @@
       this._vehicle.object3D.rotateY(-angle)
       this.el.object3D.position.add(delta)
       this.playCenter.add(delta)
+
+      pos.recycle()
+      pivot.recycle()
+      delta.recycle()
     },
 
     enableHands: function () {
@@ -298,12 +310,12 @@
     toggleCrouch: function () {
       if (this.floorOffset) {
         this.floorOffset = 0
-        this._vehicle.object3D.position.y = 0.5 - this.floorOffset
         this.moveTo(this.playerPos.x, this.playerPos.y + 1, this.playerPos.z)
       } else {
         this.floorOffset = -1
-        this._vehicle.object3D.position.y = 0.5 - this.floorOffset
+        this.moveTo(this.playerPos.x, this.playerPos.y - 1, this.playerPos.z)
       }
+      this._vehicle.object3D.position.y = 0.5 - this.floorOffset
     },
 
     _axisMove: function (e) {
@@ -396,9 +408,13 @@
       // loco.moveTo(pos.x, pos.y, pos.z, true)
 
       setTimeout(() => {
-        loco.moveTo(pos.x, pos.y, pos.z, true)
+        loco.moveTo(pos.x, pos.y + 1, pos.z, true)
         setTimeout(() => {
-          if (loco.floorOffset) loco.toggleCrouch()
+          if (loco.floorOffset) {
+            loco.toggleCrouch()
+            // document.querySelector("[locomotion]").object3D.position.y++
+            // loco.moveTo(pos.x, pos.y + 1, pos.z, true)
+          }
         }, 256)
       }, 256)
     }

diff --git a/components/a-locomotion.md b/components/a-locomotion.md
@@ -30,7 +30,7 @@ This makes it possible to move around the using the following controls.
 | quantizeMovement | Quantize movement                                                | false   |
 | quantizeRotation | Quantize rotation                                                | true    |
 | teleportDistance | Maximum teleportation distance                                   | 3       |
-| godMode          | Enable ability to move through walls and floors in any direction | false   |
+| godMode          | Enable ability to fly through walls and floors in any direction  | false   |
 
 ### Methods
 

diff --git a/components/utils.js b/components/utils.js
@@ -1,48 +1,45 @@
 /* global AFRAME, THREE */
 
 THREE.Vector2._pool = []
-THREE.Vector2.temp = function () {
-  let vec = THREE.Vector2._pool.pop() || new THREE.Vector2()
-  setTimeout(() => {
-    THREE.Vector2._pool.push(vec)
-  })
-  return vec
+THREE.Vector2.reuse = function () {
+  return THREE.Vector2._pool.pop() || new THREE.Vector2()
+}
+THREE.Vector2.prototype.recycle = function () {
+  THREE.Vector2._pool.push(this)
 }
 THREE.Vector3._pool = []
-THREE.Vector3.temp = function () {
-  let vec = THREE.Vector3._pool.pop() || new THREE.Vector3()
-  setTimeout(() => {
-    THREE.Vector3._pool.push(vec)
-  })
-  return vec
+THREE.Vector3.reuse = function () {
+  return THREE.Vector3._pool.pop() || new THREE.Vector3()
+}
+THREE.Vector3.prototype.recycle = function () {
+  THREE.Vector3._pool.push(this)
 }
+
 THREE.Quaternion._pool = []
-THREE.Quaternion.temp = function () {
-  let quat = THREE.Quaternion._pool.pop() || new THREE.Quaternion()
-  setTimeout(() => {
-    THREE.Quaternion._pool.push(quat)
-  })
-  return quat
+THREE.Quaternion.reuse = function () {
+  return THREE.Quaternion._pool.pop() || new THREE.Quaternion()
+}
+THREE.Quaternion.prototype.recycle = function () {
+  THREE.Quaternion._pool.push(this)
 }
+
 THREE.Matrix3._pool = []
-THREE.Matrix3.temp = function () {
-  let mat = THREE.Matrix3._pool.pop() || new THREE.Matrix3()
-  setTimeout(() => {
-    THREE.Matrix3._pool.push(mat)
-  })
-  return mat
+THREE.Matrix3.reuse = function () {
+  return THREE.Matrix3._pool.pop() || new THREE.Matrix3()
+}
+THREE.Matrix3.prototype.recycle = function () {
+  THREE.Matrix3._pool.push(this)
 }
 THREE.Matrix4._pool = []
-THREE.Matrix4.temp = function () {
-  let mat = THREE.Matrix4._pool.pop() || new THREE.Matrix4()
-  setTimeout(() => {
-    THREE.Matrix4._pool.push(mat)
-  })
-  return mat
+THREE.Matrix4.reuse = function () {
+  return THREE.Matrix4._pool.pop() || new THREE.Matrix4()
+}
+THREE.Matrix4.prototype.recycle = function () {
+  THREE.Matrix4._pool.push(this)
 }
 
 AFRAME.AEntity.prototype.copyWorldPosRot = function (srcEl) {
-  let quat = THREE.Quaternion.temp()
+  let quat = THREE.Quaternion.reuse()
   let src = srcEl.object3D
   let dest = this.object3D
   let body = this.body
@@ -62,6 +59,8 @@ AFRAME.AEntity.prototype.copyWorldPosRot = function (srcEl) {
     body.quaternion.copy(quat)
   }
   dest.quaternion.multiply(quat.normalize())
+
+  quat.recycle()
 }
 
 AFRAME.AEntity.prototype.ensurePlayer = function () {

diff --git a/editor.css b/editor.css
@@ -0,0 +1,19 @@
+html {
+  background-color: black;
+  color: yellow;
+}
+
+body {
+  text-align: center;
+}
+
+input {
+  width: 2em;
+}
+
+textarea {
+  background-color: transparent;
+  color: inherit;
+  width: 90vw;
+  height: 80vh;
+}