Merge pull request #26 from poeticAndroid/glitch

v0.24

README.md

@@ -4,14 +4,14 @@
 <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.23/components/utils.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.23/components/a-locomotion.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.23/components/a-hand-controls.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.23/components/a-items.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.23/components/a-include.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.23/components/a-editor.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.23/components/a-tiledwalls.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.23/components/a-door.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.24/components/utils.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.24/components/a-locomotion.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.24/components/a-hand-controls.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.24/components/a-items.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.24/components/a-include.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.24/components/a-editor.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.24/components/a-tiledwalls.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.24/components/a-door.js"></script>
 ```
 
 [Click for demo!](https://poetic-aframe.glitch.me/)

components/a-hand-controls.js

@@ -210,8 +210,8 @@ registerComponent('hand-controls', {
 
         var handMaterial = mesh.children[1].material;
         handMaterial.color = new THREE.Color(handColor);
-        mesh.position.set(0, 0, 0);
-        mesh.rotation.set(0, 0, handModelOrientation);
+        mesh.position.set(0, -1 / 32, 1 / 32);
+        mesh.rotation.set(-Math.PI / 8, 0, handModelOrientation);
         el.setAttribute('magicleap-controls', controlConfiguration);
         el.setAttribute('vive-controls', controlConfiguration);
         el.setAttribute('oculus-touch-controls', controlConfiguration);

components/a-items.js

@@ -2,7 +2,9 @@
 
 ; (function () {
   AFRAME.registerComponent("grabber", {
-    schema: {},
+    schema: {
+      hideOnGrab: { type: "boolean", default: false }
+    },
 
     init: function () {
       // Do something when component first attached.
@@ -18,9 +20,6 @@
       this._left = { hand: this._leftHand, glove: this._leftGlove }
       this._right = { hand: this._rightHand, glove: this._rightGlove }
 
-
-
-
       this._head.ray = this._camera.ensure(".items-ray", "a-entity", {
         class: "items-ray",
         raycaster: {
@@ -251,7 +250,8 @@
         }
         if (this[hand].glove) {
           this[hand].glove.setAttribute("ammo-body", "collisionFilterMask", 0)
-          this[hand].hand.object3D.visible = false
+          if (this.hideOnGrab)
+            this[hand].hand.object3D.visible = false
         }
       }
       this.emit("grab", this[hand].hand, this[hand].grabbed)
@@ -299,7 +299,7 @@
       if (this[hand].glove) {
         this[hand].glove.setAttribute("ammo-body", "collisionFilterMask", 1)
         this[hand].hand.object3D.visible = true
-            }
+      }
     },
     dropObject: function (el) {
       for (let hand of this._hands) {

components/a-locomotion.js

@@ -153,7 +153,7 @@
           this.el.object3D.position.add(delta)
         }
         this.safeFeetPos.lerp(this.feetPos, 0.125)
-        
+
         this._helmet.setAttribute("raycaster", "autoRefresh", false)
         this._helmet.components.raycaster.refreshObjects()
         if (this._helmet.components.raycaster.intersections[0]) {
@@ -164,10 +164,12 @@
             .applyMatrix3(matrix)
             .normalize()
             .multiplyScalar(0.25)
-          if (Math.abs(delta.y) > Math.abs(delta.x) && Math.abs(delta.y) > Math.abs(delta.z))
-            this.toggleCrouch()
-          else
+          if (Math.abs(delta.y) > Math.abs(delta.x) && Math.abs(delta.y) > Math.abs(delta.z)) {
+            this.floorOffset += delta.y
+            this._vehicle.object3D.position.y = 0.5 - this.floorOffset
+          } else {
             this.moveBy(delta.x, delta.y, delta.z, true)
+          }
         }
         this.safeHeadPos.lerp(this.cameraPos, 0.125)
       }

components/utils.js

@@ -67,12 +67,12 @@ AFRAME.AEntity.prototype.ensurePlayer = function () {
   let cam = this.ensure("a-camera", "a-camera", { "look-controls": { pointerLockEnabled: true } })
   cam.ensure(".tracker", "a-entity", { class: "tracker" })
   let boxsize = 0.0625
-  let leftHand = this.ensure(".left-hand", "a-entity", { "class": "left-hand" })
-  let leftHitbox = leftHand.ensure(".left-hitbox", "a-box", { class: "left-hitbox", color: "red", width: boxsize/2, height: boxsize, depth: boxsize })
-  let leftGlove = leftHitbox.ensure(".left-glove", "a-entity", { "class": "left-glove" })
-  let rightHand = this.ensure(".right-hand", "a-entity", { "class": "right-hand" })
-  let rightHitbox = rightHand.ensure(".right-hitbox", "a-box", { class: "right-hitbox", color: "red", width: boxsize/2, height: boxsize, depth: boxsize })
-  let rightGlove = rightHitbox.ensure(".right-glove", "a-entity", { "class": "right-glove" })
+  let leftHand = this.ensure(".left-hand", "a-entity", { class: "left-hand" })
+  let leftHitbox = leftHand.ensure(".left-hitbox", "a-box", { class: "left-hitbox", position: "0 -0 0.0625", material: "visible:false", width: boxsize / 2, height: boxsize, depth: boxsize * 2 })
+  let leftGlove = leftHitbox.ensure(".left-glove", "a-entity", { class: "left-glove", position: "0 0 -0.0625" })
+  let rightHand = this.ensure(".right-hand", "a-entity", { class: "right-hand" })
+  let rightHitbox = rightHand.ensure(".right-hitbox", "a-box", { class: "right-hitbox", position: "0 -0 0.0625", material: "visible:false", width: boxsize / 2, height: boxsize, depth: boxsize * 2 })
+  let rightGlove = rightHitbox.ensure(".right-glove", "a-entity", { class: "right-glove", position: "0 0 -0.0625" })
   setTimeout(() => {
     leftHand.setAttribute("hand-controls", { hand: "left", handEntity: leftGlove })
     rightHand.setAttribute("hand-controls", { hand: "right", handEntity: rightGlove })

editor.js

@@ -47,7 +47,7 @@ editBtn.addEventListener("click", () => {
 let runBtn = document.querySelector("#runBtn")
 runBtn.addEventListener("click", () => {
   document.body.innerHTML = `
-    <a-scene physics="driver: ammo; debug: true; debugDrawMode: 1;">
+    <a-scene physics="driver: ammo">
       <a-entity include="scenes/_assets.html"></a-entity>
       <a-entity locomotion grabber></a-entity>
       <a-entity id="world"></a-entity>