From fd1949be52ea91df55acfff2f8df9aabc69bb46d Mon Sep 17 00:00:00 2001 From: "Glitch (poetic-aframe)" Date: Sat, 26 Sep 2020 07:57:47 +0000 Subject: [PATCH] v0.16 --- .glitch-assets | 3 ++ README.md | 14 +++--- components/a-editor.js | 4 +- components/a-locomotion.js | 92 +++++++++++++++++++++----------------- components/a-locomotion.md | 33 +++++++------- editor.html | 2 +- scenes/_assets.html | 21 +++++---- scenes/demo.html | 45 +++++++------------ scenes/new.html | 50 ++++++++++++++------- 9 files changed, 145 insertions(+), 119 deletions(-) diff --git a/.glitch-assets b/.glitch-assets index 33841de..b125d7b 100644 --- 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 index c7288c8..4da5b54 100644 --- a/README.md +++ b/README.md @@ -3,13 +3,13 @@ ```html - - - - - - - + + + + + + + ``` [Click for demo!](https://poetic-aframe.glitch.me/) diff --git a/components/a-editor.js b/components/a-editor.js index 80460d8..99bee5c 100644 --- 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 index 2e984f1..a5f92b0 100644 --- 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 index b38f117..b791d7d 100644 --- 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 index 00ac8a0..df2b49d 100644 --- a/editor.html +++ b/editor.html @@ -90,7 +90,7 @@ document.body.innerHTML = ` - + diff --git a/scenes/_assets.html b/scenes/_assets.html index 748df79..9e62e78 100644 --- a/scenes/_assets.html +++ b/scenes/_assets.html @@ -1,10 +1,15 @@ - - - - - + + + + + + + + + + + + + \ No newline at end of file diff --git a/scenes/demo.html b/scenes/demo.html index 071afe9..592d669 100644 --- a/scenes/demo.html +++ b/scenes/demo.html @@ -1,48 +1,35 @@ - + - + - - - - + + + - - - - - - - - + + + + + + - + - + - + - - - + diff --git a/scenes/new.html b/scenes/new.html index 8ab2b43..43aa426 100644 --- a/scenes/new.html +++ b/scenes/new.html @@ -1,15 +1,15 @@ - + - - - + + + - - + + - + + + + + @@ -64,5 +62,25 @@ - + + + + + + + + + + + + + + + + + + + + + +