Merge pull request #17 from poeticAndroid/glitch

v0.16
poeticAndroid · Sep 26, 2020 · e085eee · e085eee
2 parents 869bc8f + fd1949b
commit e085eee
Show file tree

Hide file tree

Showing 9 changed files with 145 additions and 119 deletions.
diff --git a/.glitch-assets b/.glitch-assets
@@ -22,3 +22,6 @@
 {"uuid":"JNhgDLDuyeYwajw1","deleted":true}
 {"name":"fox.glb","date":"2020-08-14T19:05:48.168Z","url":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Ffox.glb","type":"","size":94696,"thumbnail":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fthumbnails%2Ffox.glb","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"xWhMSAvBHQYk77A5"}
 {"name":"Rabbit_01.glb","date":"2020-09-20T03:36:56.511Z","url":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2FRabbit_01.glb","type":"","size":62032,"thumbnail":"https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fthumbnails%2FRabbit_01.glb","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"6hw1bvv1lcyRgZDR"}
+{"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"}
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.15/components/utils.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.15/components/a-locomotion.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.15/components/a-items.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.15/components/a-include.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.15/components/a-editor.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.15/components/a-tiledwalls.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.15/components/a-door.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.16/components/utils.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.16/components/a-locomotion.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.16/components/a-items.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.16/components/a-include.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.16/components/a-editor.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.16/components/a-tiledwalls.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.16/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
@@ -68,7 +68,9 @@
       // srcEl = srcEl.cloneNode(true)
       // this._div.innerHTML = srcEl.outerHTML.trim()
       let worldEl = this._parseHTML(srcEl.outerHTML)
-      srcEl.classList.remove("editable")
+      srcEl.removeAttribute("position")
+      srcEl.removeAttribute("rotation")
+      srcEl.removeAttribute("scale")
       worldEl.classList.add("editable")
       this._map.push({
         src: srcEl,

diff --git a/components/a-locomotion.js b/components/a-locomotion.js
@@ -8,7 +8,8 @@
       rotationSpeed: { type: "number", default: 1 },
       quantizeMovement: { type: "boolean", default: false },
       quantizeRotation: { type: "boolean", default: true },
-      teleportDistance: { type: "number", default: 3 }
+      teleportDistance: { type: "number", default: 3 },
+      godMode: { type: "boolean", default: false }
     },
 
     init: function () {
@@ -71,6 +72,8 @@
     update: function () {
       // Do something when component's data is updated.
       this._camera.setAttribute("wasd-controls", "acceleration", this.data.acceleration)
+      this._allowGod = this.data.godMode
+      this._godMode = this.data.godMode
     },
 
     remove: function () {
@@ -107,27 +110,29 @@
       this._bumper.setAttribute("raycaster", "far", delta.length() + 0.125)
       this._bumper.setAttribute("raycaster", "direction", delta.multiplyScalar(-1).normalize())
 
-      this._vehicle.components.raycaster.refreshObjects()
-      if (this._vehicle.components.raycaster.intersections[0]) {
-        let p = this._vehicle.components.raycaster.intersections[0].point
-        this.moveTo(this.playerPos.x, Math.max(p.y, this.playerPos.y - 0.1), this.playerPos.z)
-      } else {
-        this.moveTo(this.playerPos.x, this.playerPos.y - 0.1, this.playerPos.z)
-      }
-      this._bumper.setAttribute("raycaster", "autoRefresh", false)
-      this._bumper.components.raycaster.refreshObjects()
-      if (this._bumper.components.raycaster.intersections[0]) {
-        let int = this._bumper.components.raycaster.intersections[0]
-        matrix.getNormalMatrix(int.object.el.object3D.matrixWorld)
-        delta
-          .copy(int.face.normal)
-          .applyMatrix3(matrix)
-          .normalize()
-          .multiplyScalar(0.25)
-          .add(int.point)
-        this.moveTo(delta.x, this.safePos.y, delta.z, true)
-      } else {
-        this.safePos.lerp(this.playerPos, 0.125)
+      if (!this._godMode) {
+        this._vehicle.components.raycaster.refreshObjects()
+        if (this._vehicle.components.raycaster.intersections[0]) {
+          let p = this._vehicle.components.raycaster.intersections[0].point
+          this.moveTo(this.playerPos.x, Math.max(p.y, this.playerPos.y - 0.1), this.playerPos.z)
+        } else {
+          this.moveTo(this.playerPos.x, this.playerPos.y - 0.1, this.playerPos.z)
+        }
+        this._bumper.setAttribute("raycaster", "autoRefresh", false)
+        this._bumper.components.raycaster.refreshObjects()
+        if (this._bumper.components.raycaster.intersections[0]) {
+          let int = this._bumper.components.raycaster.intersections[0]
+          matrix.getNormalMatrix(int.object.el.object3D.matrixWorld)
+          delta
+            .copy(int.face.normal)
+            .applyMatrix3(matrix)
+            .normalize()
+            .multiplyScalar(0.25)
+            .add(int.point)
+          this.moveTo(delta.x, this.safePos.y, delta.z, true)
+        } else {
+          this.safePos.lerp(this.playerPos, 0.125)
+        }
       }
       this._vehicle.object3D.position.set(this._camera.object3D.position.x, this._vehicle.object3D.position.y, this._camera.object3D.position.z)
 
@@ -147,7 +152,12 @@
           rot += Math.round(gamepad.axes[2])
           alt += Math.round(gamepad.axes[3])
           if (gamepad.buttons[10].pressed) {
-            if (this._btnDown == 0) this.data.quantizeMovement = !this.data.quantizeMovement
+            if (this._allowGod) {
+              if (this._btnDown == 0) this._godMode = !this._godMode
+            }
+            else {
+              if (this._btnDown == 0) this.data.quantizeMovement = !this.data.quantizeMovement
+            }
             this._btnDown = 3
           }
           if (gamepad.buttons[11].pressed) {
@@ -228,30 +238,28 @@
       }
       this._alt = alt
       dir.multiplyScalar(mk)
+      let fwd = dir.y
+      if (this._godMode) dir.y = 0
       pivot.set(0, 0)
       dir.rotateAround(pivot, camdir.angle())
       this.rotateBy(rot * rk)
-      this.moveTo(this.playerPos.x + dir.x, this.playerPos.y, this.playerPos.z + dir.y)
+      this.moveBy(dir.x, 0, dir.y)
+      if (this._godMode)
+        this.moveBy(this.cameraDir.x * fwd, this.cameraDir.y * fwd, this.cameraDir.z * fwd)
     },
 
-    moveBy: function (x, z) {
+    moveBy: function (x, y, z, safe) {
       let delta = THREE.Vector3.temp()
-      delta.set(x, 0, z)
+      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)
     },
     moveTo: function (x, y, z, safe) {
-      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)
-
-      this.playCenter.add(delta)
-      this.playerPos.add(delta)
-      this.cameraPos.add(delta)
-      this.el.object3D.position.add(delta)
+      this.moveBy(x - this.playerPos.x, y - this.playerPos.y, z - this.playerPos.z, safe)
     },
 
     rotateBy: function (angle) {
@@ -311,7 +319,12 @@
 
     _buttonChanged: function (e) {
       if (e.srcElement.getAttribute("hand-controls").hand === "left") {
-        if (e.detail.id == 3 && e.detail.state.pressed) this.data.quantizeMovement = !this.data.quantizeMovement
+        if (this._allowGod) {
+          if (e.detail.id == 3 && e.detail.state.pressed) this._godMode = !this._godMode
+        }
+        else {
+          if (e.detail.id == 3 && e.detail.state.pressed) this.data.quantizeMovement = !this.data.quantizeMovement
+        }
       } else {
         if (e.detail.id == 3 && e.detail.state.pressed) this.data.quantizeRotation = !this.data.quantizeRotation
       }
@@ -378,16 +391,13 @@
       let pos = this.el.object3D.position
       console.log("starting at", pos)
       // loco.moveTo(pos.x, pos.y, pos.z, true)
-      
+
       setTimeout(() => {
         loco.moveTo(pos.x, pos.y, pos.z, true)
         setTimeout(() => {
-          loco.moveTo(pos.x, pos.y, pos.z, true)
-          setTimeout(() => {
-            if (loco.floorOffset) loco.toggleCrouch()
-          }, 256)
+          if (loco.floorOffset) loco.toggleCrouch()
         }, 256)
-      })
+      }, 256)
     }
   })
 }.call(this))
diff --git a/components/a-locomotion.md b/components/a-locomotion.md
@@ -12,30 +12,31 @@ Add the `locomotion` component to your player rig like so:
 
 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         |
-| Crouch                    | Right stick down       | C       | Swipe down       |
-| Toggle quantized movement | Click left stick       |
-| Toggle quantized rotation | Click right stick      |
+| Action                                  | Controller             | Desktop | Touch            |
+| --------------------------------------- | ---------------------- | ------- | ---------------- |
+| Move                                    | Left stick             | WASD    |
+| Rotate                                  | Right stick left/right | Mouse   | Swipe left/right |
+| Teleport                                | Right stick up         | Space   | Swipe up         |
+| Crouch                                  | Right stick down       | C       | Swipe down       |
+| Toggle quantized movement (or God mode) | Click left stick       |
+| Toggle quantized rotation               | Click right stick      |
 
 ### Properties
 
-| Property         | Description                    | Default |
-| ---------------- | ------------------------------ | ------- |
-| acceleration     | Speed of movement              | 65      |
-| rotationSpeed    | Speed of rotation              | 1       |
-| quantizeMovement | Quantize movement              | false   |
-| quantizeRotation | Quantize rotation              | true    |
-| teleportDistance | Maximum teleportation distance | 3       |
+| Property         | Description                                                      | Default |
+| ---------------- | ---------------------------------------------------------------- | ------- |
+| acceleration     | Speed of movement                                                | 65      |
+| rotationSpeed    | Speed of rotation                                                | 1       |
+| 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   |
 
 ### Methods
 
 | Method              | Description                                                           |
 | ------------------- | --------------------------------------------------------------------- |
-| moveBy(x,z)         | Move by given distance on X and Z axes.                               |
+| moveBy(x,y,z, safe) | Move by given vector. Ignore walls in the way, if `safe` is `true`.   |
 | 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.                                                   |

diff --git a/editor.html b/editor.html
@@ -90,7 +90,7 @@
       document.body.innerHTML = `
         <a-scene>
           <a-entity include="scenes/_assets.html"></a-entity>
-          <a-entity locomotion grabber>
+          <a-entity locomotion="godMode:true" grabber>
             <a-torus-knot editor="gridSize: ${grid} ${grid} ${grid};rotationSteps: ${rot} ${rot} ${rot};" scale=".0625 .0625 .0625" position="0 1 -.25"></a-torus-knot>
           </a-entity>
         </a-scene>

diff --git a/scenes/_assets.html b/scenes/_assets.html
@@ -1,10 +1,15 @@
 <a-assets>
-  <audio id="shot" src="https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fshot.mp3?v=1596381044793"
-    preload="auto"></audio>
-  <a-asset-item id="cat" src="https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Ffox.glb?v=1597431948168">
-  </a-asset-item>
-  <a-asset-item id="bunny"
-    src="https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2FRabbit_01.glb?v=1600573016511"></a-asset-item>
-  <img id="granite"
-    src="https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2FSeamless%20floor%20concrete%20stone%20pavement%20texture.jpg?v=1592047015951" />
+  <img id="skyImg" src="https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fskybox0.png?v=1592248851267" />
+  <img id="floorImg" src="https://cdn.aframe.io/a-painter/images/floor.jpg" />
+  <img id="granite" src="https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2FSeamless%20floor%20concrete%20stone%20pavement%20texture.jpg?v=1592047015951" />
+  <img id="woodImg" src="https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fseamless_texture_rovere_wood_parquet_DIFFUSE.jpg?v=1592051409386"/>
+  <img id="marbleImg" src="https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fmarble_tile_floor.jpg?v=1592050799934" />
+  <img id="floralImg" src="https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Ffloral_paper.png?v=1600978651599" />
+  <img id="damaskImg" src="https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fdamask_paper.png?v=1600979952219" />
+
+  <audio id="shot" src="https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fshot.mp3?v=1596381044793" preload="auto"></audio>
+
+  <a-asset-item id="cat" src="https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Ffox.glb?v=1597431948168"></a-asset-item>
+  <a-asset-item id="bunny" src="https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2FRabbit_01.glb?v=1600573016511"></a-asset-item>
+  <a-asset-item id="gunMdl" src="https://cdn.glitch.com/e956e2ed-f877-4602-a395-a2e234731117%2Fgun.glb?v=1596117169794"></a-asset-item>
 </a-assets>