Merge pull request #9 from poeticAndroid/glitch

Glitch

README.md

@@ -1,13 +1,13 @@
-# A-Frame components and stuff made by poeticAndroid!
+# A-Frame components made by poeticAndroid!
 
 ```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.6/components/utils.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.6/components/a-tiledwalls.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.6/components/a-locomotion.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.6/components/a-items.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.6/components/a-door.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.7/components/utils.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.7/components/a-tiledwalls.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.7/components/a-locomotion.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.7/components/a-items.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.7/components/a-door.js"></script>
 ```
 
 [Click for demo!](https://poetic-aframe.glitch.me/)

components/a-door.js

@@ -17,12 +17,12 @@
       this._knobRad = parseFloat(this._knob.getAttribute("radius"))
       this._grabber = document.querySelector("[grabber]")
 
-      this.open = this.open.bind(this)
-      this._knob.addEventListener("usedown", this.open)
+      this.toggleOpen = this.toggleOpen.bind(this)
+      this._knob.addEventListener("usedown", this.toggleOpen)
     },
 
     remove: function () {
-      this._knob.removeEventListener("usedown", this.open)
+      this._knob.removeEventListener("usedown", this.toggleOpen)
     },
 
     update: function () {
@@ -54,8 +54,8 @@
         }, 512)
     },
 
-    open: function () {
-      if (this._grabber) this._grabber.components.grabber.drop()
+    toggleOpen: function () {
+      if (this._grabber) this._grabber.components.grabber.dropObject(this._knob)
       let ang = this.el.components.rotation.data.y
       if (Math.abs(ang - this._maxAng) < Math.abs(ang - this._minAng)) {
         this._knob.object3D.position.set(0, 0, .5)

components/a-door.md

@@ -1,6 +1,6 @@
 # a-door.js
 
-component for making doors.
+Component for making doors.
 
 ## door
 
@@ -15,9 +15,15 @@ Add the `door` component to an entity where the middle of the hinge should be.
 ### Properties
 
 | Property | Description                                | Default |
-|----------|--------------------------------------------|---------|
+| -------- | ------------------------------------------ | ------- |
 | width    | The width of the door.                     | 1       |
 | push     | How far the door can be pushed in degrees. | 120     |
 | pull     | How far the door can be pulled in degrees. | 120     |
 | open     | Initial opening of the door in degrees.    | 0       |
 | locked   | Whether or not the door is locked.         | false   |
+
+### Methods
+
+| Method       | Description                      |
+| ------------ | -------------------------------- |
+| toggleOpen() | Toggle the door open and closed. |

components/a-items.js

@@ -134,9 +134,9 @@
           this._gamepadDelta[7] = gamepad.buttons[7].value > 0.75
         }
       }
-      let pos1 = THREE.Vector3.new()
-      let pos2 = THREE.Vector3.new()
-      let delta = THREE.Vector3.new()
+      let pos1 = THREE.Vector3.temp()
+      let pos2 = THREE.Vector3.temp()
+      let delta = THREE.Vector3.temp()
       for (let hand of this._hands) {
         hand = "_" + hand
         if (this[hand].grabbed) {
@@ -246,6 +246,12 @@
       if (hand != "_head") this[hand].hand.object3D.visible = true
       console.log("Dropping!")
     },
+    dropObject: function (el) {
+      for (let hand of this._hands) {
+        hand = "_" + hand
+        if (this[hand].grabbed == el) this[hand].drop()
+      }
+    },
 
     _keyDown: function (e) {
       if (e.code == "KeyE") this.toggleGrab()

components/a-items.md

@@ -1,39 +1,54 @@
-a-items.js
-==========
+# a-items.js
+
 Components to facilitate grabbable and usable items.
 
-grabber
--------
+## grabber
+
 Add the `grabber` component to your player rig like so:
 
 ```html
-<a-entity id="player" grabber ></a-entity>
+<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.
 
-grabbable
----------
+## grabbable
+
 Add the `grabbable` component to any object you want the player to be able to pick up.
 
 ```html
-<a-entity grabbable ></a-entity>
+<a-entity grabbable></a-entity>
 ```
 
 ### Properties
 
 | 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    |
 
 ### Events
 
+These event are emitted on the grabbable as well as the hand that initiated the event.
+
 | Event   | Description                                                    |
-|---------|----------------------------------------------------------------|
+| ------- | -------------------------------------------------------------- |
 | grab    | Emitted when grabbed.                                          |
 | usedown | Emitted when use-button is pressed while holding this object.  |
 | useup   | Emitted when use-button is released while holding this object. |
 | drop    | Emitted when dropped.                                          |
 
+### 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.                     |

components/a-locomotion.js

@@ -100,11 +100,11 @@
     },
 
     tick: function (time, timeDelta) {
-      let dir = THREE.Vector2.new()
-      let camdir = THREE.Vector2.new()
-      let pivot = THREE.Vector2.new()
-      let delta = THREE.Vector3.new()
-      let matrix = THREE.Matrix3.new()
+      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 gamepad, i, l, len, mk, ref, rk
       this._cameraObj.object3D.updateMatrix()
       // Do something on every scene tick or frame.
@@ -247,7 +247,7 @@
     },
 
     moveBy: function (x, z) {
-      let delta = THREE.Vector3.new()
+      let delta = THREE.Vector3.temp()
       delta.set(x, 0, z)
 
       this.playCenter.add(delta)
@@ -256,7 +256,7 @@
       this.el.object3D.position.add(delta)
     },
     moveTo: function (x, y, z, safe) {
-      let delta = THREE.Vector3.new()
+      let delta = THREE.Vector3.temp()
       if (safe) this.safePos.set(x, y, z)
       delta.set(x - this.playerPos.x, y - this.playerPos.y, z - this.playerPos.z)
 
@@ -267,9 +267,9 @@
     },
 
     rotateBy: function (angle) {
-      let pos = THREE.Vector2.new()
-      let pivot = THREE.Vector2.new()
-      let delta = THREE.Vector3.new()
+      let pos = THREE.Vector2.temp()
+      let pivot = THREE.Vector2.temp()
+      let delta = THREE.Vector3.temp()
       pos.set(this.playerPos.x, this.playerPos.z)
       pivot.set(this.playCenter.x, this.playCenter.z)
       pos.rotateAround(pivot, -angle)

components/a-locomotion.md

@@ -1,20 +1,19 @@
-a-locomotion.js
-===============
+# a-locomotion.js
+
 Components to facilitate moving about and stuff.
 
+## locomotion
 
-locomotion
-----------
 Add the `locomotion` component to your player rig like so:
 
 ```html
-<a-entity id="player" locomotion ></a-entity>
+<a-entity id="player" locomotion></a-entity>
 ```
 
 This makes it possible to move around the using the following controls.
 
 | Action                    | Controller             | Desktop | Touch            |
-|---------------------------|------------------------|---------|------------------|
+| ------------------------- | ---------------------- | ------- | ---------------- |
 | Move                      | Left stick             | WASD    |
 | Rotate                    | Right stick left/right | Mouse   | Swipe left/right |
 | Teleport                  | Right stick up         | Space   | Swipe up         |
@@ -25,7 +24,7 @@ This makes it possible to move around the using the following controls.
 ### Properties
 
 | Property         | Description                    | Default |
-|------------------|--------------------------------|---------|
+| ---------------- | ------------------------------ | ------- |
 | acceleration     | Speed of movement              | 65      |
 | rotationSpeed    | Speed of rotation              | 1       |
 | quantizeMovement | Quantize movement              | false   |
@@ -35,37 +34,36 @@ This makes it possible to move around the using the following controls.
 ### Methods
 
 | Method              | Description                                                           |
-|---------------------|-----------------------------------------------------------------------|
+| ------------------- | --------------------------------------------------------------------- |
 | moveBy(x,z)         | Move by given distance on X and Z axes.                               |
 | moveTo(x,y,z, safe) | Move to given position. Ignore walls in the way, if `safe` is `true`. |
 | rotateBy(angle)     | Rotate by given angle.                                                |
 | toggleCrouch()      | Toggle crouch mode.                                                   |
 
+## floor
 
-floor
------
 Add the `floor` component to any object you want the player to be able to walk on.
 
 ```html
-<a-box floor ></a-box>
+<a-box floor></a-box>
 ```
 
 ### Properties
 
 | Property   | Description                                                  | Default |
-|------------|--------------------------------------------------------------|---------|
+| ---------- | ------------------------------------------------------------ | ------- |
 | staticBody | Whether or not to add `static-body` component automatically. | true    |
 
-wall
-----
+## wall
+
 Add the `wall` component to any object you want the player not to be able to walk through.
 
 ```html
-<a-box wall ></a-box>
+<a-box wall></a-box>
 ```
 
 ### Properties
 
 | Property   | Description                                                  | Default |
-|------------|--------------------------------------------------------------|---------|
+| ---------- | ------------------------------------------------------------ | ------- |
 | staticBody | Whether or not to add `static-body` component automatically. | true    |

components/a-tiledwalls.md

@@ -1,14 +1,12 @@
-a-tiledwalls.js
-===============
-component for help making walls or floors with tiled textures.
+# a-tiledwalls.js
 
+Component for help making walls or floors with tiled textures.
+
+## thickness
 
-thickness
-----------
 Add the `thickness` component to your wall to resize it according to `material.repeat`.
 The following will make a brick wall that is 10 long, 3 heigh and 0.25 thick.
 
 ```html
-<a-box thickness="0.25" src="#bricks" material="repeat: 10 3" ></a-box>
+<a-box thickness="0.25" src="#bricks" material="repeat: 10 3"></a-box>
 ```
-

components/utils.js

@@ -1,39 +1,39 @@
 /* global AFRAME, THREE */
 
 THREE.Vector2._pool = []
-THREE.Vector2.new = function () {
+THREE.Vector2.temp = function () {
   let vec = THREE.Vector2._pool.pop() || new THREE.Vector2()
   setTimeout(() => {
     THREE.Vector2._pool.push(vec)
   })
   return vec
 }
 THREE.Vector3._pool = []
-THREE.Vector3.new = function () {
+THREE.Vector3.temp = function () {
   let vec = THREE.Vector3._pool.pop() || new THREE.Vector3()
   setTimeout(() => {
     THREE.Vector3._pool.push(vec)
   })
   return vec
 }
 THREE.Quaternion._pool = []
-THREE.Quaternion.new = function () {
+THREE.Quaternion.temp = function () {
   let quat = THREE.Quaternion._pool.pop() || new THREE.Quaternion()
   setTimeout(() => {
     THREE.Quaternion._pool.push(quat)
   })
   return quat
 }
 THREE.Matrix3._pool = []
-THREE.Matrix3.new = function () {
+THREE.Matrix3.temp = function () {
   let mat = THREE.Matrix3._pool.pop() || new THREE.Matrix3()
   setTimeout(() => {
     THREE.Matrix3._pool.push(mat)
   })
   return mat
 }
 THREE.Matrix4._pool = []
-THREE.Matrix4.new = function () {
+THREE.Matrix4.temp = function () {
   let mat = THREE.Matrix4._pool.pop() || new THREE.Matrix4()
   setTimeout(() => {
     THREE.Matrix4._pool.push(mat)
@@ -42,7 +42,7 @@ THREE.Matrix4.new = function () {
 }
 
 AFRAME.AEntity.prototype.copyWorldPosRot = function (srcEl) {
-  let quat = THREE.Quaternion.new()
+  let quat = THREE.Quaternion.temp()
   let src = srcEl.object3D
   let dest = this.object3D
   let body = this.body