Skip to content

Commit

Permalink
Merge pull request #18 from poeticAndroid/glitch
Browse files Browse the repository at this point in the history 
v0.17
  • Loading branch information
@poeticAndroid
poeticAndroid authored Sep 27, 2020
2 parents e085eee + 15cb372 commit 26fb8da
Show file tree
Hide file tree
Showing 5 changed files with 91 additions and 23 deletions.
14 changes: 7 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.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>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.17/components/utils.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.17/components/a-locomotion.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.17/components/a-items.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.17/components/a-include.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.17/components/a-editor.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.17/components/a-tiledwalls.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/poeticAndroid/poetic-aframe@v0.17/components/a-door.js"></script>
```

[Click for demo!](https://poetic-aframe.glitch.me/)
Expand Down
70 changes: 64 additions & 6 deletions components/a-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
this._world = this.el.sceneEl.ensure("#world", "a-entity", { id: "world" })
this._anchor = this.el.ensure(".editor-anchor", "a-entity", { class: "editor-anchor" })
this._angularSize = new THREE.Vector3()
this._history = []

this.load = this.load.bind(this)
this.save = this.save.bind(this)
Expand Down Expand Up @@ -51,7 +52,7 @@
},

tick: function (time, timeDelta) {
if (this._grabbed && this._grabbed !== true) {
if (this._grabbed && this._grabbed !== true && this._grabbed.copyWorldPosRot) {
this._grabbed.copyWorldPosRot(this._anchor)
if (this._grabbed.body) {
this._grabbed.body.sleep()
Expand Down Expand Up @@ -79,6 +80,10 @@
worldEl.addEventListener("loaded", () => { worldEl.pause() })
this._src.appendChild(srcEl)
this._world.appendChild(worldEl)
this._history.push({
cmd: "remove",
el: srcEl
})
},
findEntity: function (el) {
let index = null
Expand All @@ -100,6 +105,10 @@
}
if (typeof index === "number") {
let m = this._map[index]
this._history.push({
cmd: "add",
html: m.src.outerHTML
})
m.src.parentNode.removeChild(m.src)
m.world.parentNode.removeChild(m.world)
this._map.splice(index, 1)
Expand All @@ -115,7 +124,6 @@
while (this._map.length) this.removeEntity(this._map.length - 1)
let src = localStorage.getItem("#world")
if (!src) return
this._div.innerHTML = src.trim()
let scene = this._parseHTML(src)
for (let ent of scene.childNodes) {
if (ent instanceof Element) {
Expand All @@ -124,10 +132,9 @@
}
},
save: function () {
let rot = THREE.Vector3.temp()
for (let i = 0; i < this._map.length; i++) {
let m = this._map[i]
// m.world.flushToDOM()
let oldHtml = m.src.outerHTML
let str = AFRAME.utils.coordinates.stringify(m.world.getAttribute("position"))
if (str && str != "0 0 0")
m.src.setAttribute("position", str)
Expand All @@ -145,19 +152,68 @@
m.src.removeAttribute("scale")
if (!m.src.getAttribute("class"))
m.src.removeAttribute("class")
let newHtml = m.src.outerHTML
if (newHtml !== oldHtml) {
this._history.push({
cmd: "edit",
el: m.src,
html: oldHtml,
_html:newHtml
})
}
}
// this._src.flushToDOM(true)
localStorage.setItem("#world", this._src.outerHTML.replace(/=""/g, "").trim())
},

undo: function () {
if (this._history.length == 0) return
let action = this._history.pop()
console.log("Undoing...", this._history.length, action)
let len = this._history.length
switch (action.cmd) {
case "remove":
this.removeEntity(action.el)
break
case "add":
this.addEntity(action.html)
break
case "edit":
let m = this._map[this.findEntity(action.el)]
if (!m) return
let child = this._parseHTML(action.html)
let def = ["0 0 0", "0 0 0", "1 1 1"]
for (let atr of ["position", "rotation", "scale"]) {
let _def = def.shift()
if (child.getAttribute(atr)) {
m.world.setAttribute(atr, child.getAttribute(atr))
m.src.setAttribute(atr, child.getAttribute(atr))
} else {
m.world.setAttribute(atr, _def)
m.src.removeAttribute(atr)
}
}
// this.save()
break
}
while (this._history.length > len) this._history.pop()
},

_grab: function (e) {
this.save()
this._grabbed = true
setTimeout(() => {
this._grabbed = false
this._undoBtn = 0
this._history = []
}, 256)
},

_useDown: function (e) {
if (e.detail.button) this._undoBtn++
if (this._undoBtn > 1) {
if (this._grabbed) this.save()
this._grabbed = true
}
if (this._grabbed) return
let ray = this.el.components.raycaster
ray.refreshObjects()
Expand All @@ -173,6 +229,8 @@
}
},
_useUp: function (e) {
if (this._undoBtn > 1) this.undo()
if (this._undoBtn > 0) this._undoBtn--
if (this._grabbed === true) this._grabbed = false
if (this._grabbed) {
switch (e.detail.button) {
Expand Down Expand Up @@ -214,7 +272,7 @@
},

_parseHTML: function (html) {
this._div.innerHTML = html
this._div.innerHTML = html.trim()
return document.importNode(this._div.content, true).firstChild
}
})
Expand Down
2 changes: 1 addition & 1 deletion components/a-include.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@
schema: { type: "string" },

update: async function () {
console.log("Including", this.data)
if (this.data && !loading) {
loading = true
console.log("Including", this.data)
this.el.outerHTML = await (await fetch(this.data)).text()
loading = false
let next = this.el.sceneEl.querySelector("[include]")
Expand Down
6 changes: 6 additions & 0 deletions components/a-items.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,12 +131,18 @@
for (i = 0, len = navigator.getGamepads().length; i < len; i++) {
gamepad = navigator.getGamepads()[i]
if (gamepad) {
if (gamepad.buttons[0].value > 0.75 && !this._gamepadDelta[0]) this.useDown("head", 1)
if (gamepad.buttons[1].value > 0.75 && !this._gamepadDelta[1]) this.useDown("head", 2)
if (!(gamepad.buttons[0].value > 0.75) && this._gamepadDelta[0]) this.useUp("head", 1)
if (!(gamepad.buttons[1].value > 0.75) && this._gamepadDelta[1]) this.useUp("head", 2)
if (gamepad.buttons[4].value > 0.75 && !this._gamepadDelta[4]) this.toggleGrab()
if (gamepad.buttons[5].value > 0.75 && !this._gamepadDelta[5]) this.toggleGrab()
if (gamepad.buttons[6].value > 0.75 && !this._gamepadDelta[6]) this.useDown()
if (gamepad.buttons[7].value > 0.75 && !this._gamepadDelta[7]) this.useDown()
if (!(gamepad.buttons[6].value > 0.75) && this._gamepadDelta[6]) this.useUp()
if (!(gamepad.buttons[7].value > 0.75) && this._gamepadDelta[7]) this.useUp()
this._gamepadDelta[0] = gamepad.buttons[0].value > 0.75
this._gamepadDelta[1] = gamepad.buttons[1].value > 0.75
this._gamepadDelta[4] = gamepad.buttons[4].value > 0.75
this._gamepadDelta[5] = gamepad.buttons[5].value > 0.75
this._gamepadDelta[6] = gamepad.buttons[6].value > 0.75
Expand Down
22 changes: 13 additions & 9 deletions editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
}

input {
width: 4em;
width: 2em;
}

textarea {
Expand All @@ -42,12 +42,14 @@
<p>
<button id="loadBtn">💾 Load</button>
<button id="copyBtn">📋 Copy</button>
<button id="editBtn">✏ Edit</button>
<button id="editBtn">✍ Edit</button>
<button id="runBtn">👟 Run</button>
<label for="densTxt">📦 Density:</label>
<input id="densTxt" type="number" min="1" value="2" />
<label for="rotTxt">🎡 RotSteps:</label>
<input id="rotTxt" type="number" min="1" value="8" />
<label for="densxzTxt">📦 Density:</label>
<input id="densxzTxt" title="XZ" type="number" min="0" value="1" /><input id="densyTxt" title="Y" type="number"
min="0" value="1" />
<label for="rotyTxt">🎡 RotSteps:</label>
<input id="rotxzTxt" title="XZ" type="number" min="0" value="2" /><input id="rotyTxt" title="Y" type="number"
min="0" value="3" />
</p>
<p>
<textarea autofocus></textarea>
Expand Down Expand Up @@ -85,13 +87,15 @@

let editBtn = document.querySelector("#editBtn")
editBtn.addEventListener("click", () => {
let grid = 1 / parseFloat(document.querySelector("#densTxt").value)
let rot = parseFloat(document.querySelector("#rotTxt").value)
let gridXZ = 1 / Math.pow(2, parseFloat(document.querySelector("#densxzTxt").value))
let gridY = 1 / Math.pow(2, parseFloat(document.querySelector("#densyTxt").value))
let rotXZ = Math.pow(2, parseFloat(document.querySelector("#rotxzTxt").value))
let rotY = Math.pow(2, parseFloat(document.querySelector("#rotyTxt").value))
document.body.innerHTML = `
<a-scene>
<a-entity include="scenes/_assets.html"></a-entity>
<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-torus-knot editor="gridSize: ${gridXZ} ${gridY} ${gridXZ};rotationSteps: ${rotXZ} ${rotY} ${rotXZ};" scale=".0625 .0625 .0625" position="0 1 -.25"></a-torus-knot>
</a-entity>
</a-scene>
`
Expand Down

0 comments on commit 26fb8da

Please sign in to comment.