From f56fba7fa4b7dbd5689acfa3b9a3fde85609b39f Mon Sep 17 00:00:00 2001 From: Fabien Benetou Date: Sat, 11 May 2024 11:39:13 +0200 Subject: [PATCH] physics example --- index.html | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++++- jxr-core.js | 2 ++ 2 files changed, 78 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 6b4205d..8d79c69 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ + @@ -17,7 +18,8 @@ - refactor to use emit('eventname', {eventdata:'data'}) for onreleased and onpicked rather than latest element e.g newEl.setAttribute("onreleased", 'document.querySelector("['+generatorName+']").emit("check",{color:"'+color+'"})') let latest = selectedElements[selectedElements.length-1].element - check for this pattern and replace by event.detail.element instead + check for this pattern and replace by event.detail.element instead (for now e.detail.element) + might want to reconsider the el convention and do e.g let eventFromEl = e.detail.element over the eval() scope - insure scene setup, e.g starting position and orientation of environment and main character (until now assumed unchanged) - isolate emit('eventname', {test:0}) versus same with onreleased (which does NOT work) and same without event detail (which works) - add audio instructions @@ -52,6 +54,7 @@ AFRAME.registerComponent('startfunctions', { let untestedGames = ["checkers", "carcassone"] addGame("voxelpaint") addGame("simon") + addGame("physics-construct") addGames() } @@ -111,6 +114,78 @@ function showOnlyThisGame(name){ document.querySelector("["+name+"]").emit("reset") } +//___________________________________________________________________________________________________________________________________ +/* + physics https://github.com/c-frame/aframe-physics-system and setup docs https://github.com/c-frame/aframe-physics-system/blob/master/CannonDriver.md#installation + should append to head script with src="https://cdn.jsdelivr.net/gh/c-frame/aframe-physics-system@v4.2.2/dist/aframe-physics-system.min.js" + + + + + + + + + +*/ +AFRAME.registerComponent('physics-construct', { + init: function(){ + let generatorName = this.attrName + let el = this.el + + let sphereEl = document.createElement('a-sphere') + sphereEl.setAttribute('radius', '.01') + sphereEl.setAttribute('target', '') + sphereEl.setAttribute('position', '0 1 -.5') + sphereEl.setAttribute("onpicked", "window.pfb = selectedElements.at(-1).element.getAttribute('position').clone();") + sphereEl.setAttribute("onreleased", "twoPosToBox(window.pfb, selectedElements.at(-1).element.getAttribute('position'),'"+generatorName+"');") + AFRAME.scenes[0].appendChild(sphereEl) + + let ballEl = document.createElement('a-sphere') + ballEl.setAttribute('radius', '.01') + ballEl.setAttribute('color', 'blue') + ballEl.setAttribute('target', '') + ballEl.setAttribute('position', '0 1.5 -0.2') + //ballEl.setAttribute('dynamic-body', '') // does not fall? + ballEl.setAttribute("onpicked", 'e.detail.element.removeAttribute("dynamic-body")') // untested + ballEl.setAttribute("onreleased", 'e.detail.element.setAttribute("dynamic-body","")') + AFRAME.scenes[0].appendChild(ballEl) + + AFRAME.scenes[0].setAttribute("physics", "debug:true") + + //let script = document.createElement("script") + //script.setAttribute("src", "https://cdn.jsdelivr.net/gh/c-frame/aframe-physics-system@v4.2.2/dist/aframe-physics-system.min.js") + //document.head.appendChild(script) // does not work, check older tricks + }, + events: { + reset: function (evt) { + console.log(this.attrName, 'component was resetted!'); + let generatorName = this.attrName + Array.from( this.el.querySelectorAll("."+generatorName) ).map( el => deleteTarget(el) ) + }, + check: function (evt) { + }, + }, +}) + +// should be in the component instead +function twoPosToBox(A, B, generatorName){ + let center = A.clone() + center.add(B) + center.divideScalar(2) + let lengthes = A.clone() + lengthes.sub(B) + let el = document.createElement("a-box") + el.setAttribute("position", center ) + el.setAttribute('target', '') + el.setAttribute('static-body', '') + //el.setAttribute("onpicked", 'e.detail.element.removeAttribute("dynamic-body")') // untested + //el.setAttribute("onreleased", 'e.detail.element.setAttribute("dynamic-body","")') + el.classList.add( generatorName ) + el.setAttribute("scale", lengthes.toArray().map( i => Math.abs(i) ).join(" ") ) + AFRAME.scenes[0].appendChild(el) +} + //___________________________________________________________________________________________________________________________________ AFRAME.registerComponent('voxelpaint', { init: function(){ diff --git a/jxr-core.js b/jxr-core.js index ae229d6..bcb892a 100644 --- a/jxr-core.js +++ b/jxr-core.js @@ -218,6 +218,7 @@ AFRAME.registerComponent('onreleased', { // changed from ondrop to be coherent w // if multi, should also look for onreleased__ not just onreleased try { eval( code ) // should be jxr too e.g if (txt.match(prefix)) interpretJXR(txt) + // note that event details are avaible within that code as e.detail which might not be very clear } catch (error) { console.error(`Evaluation failed with ${error}`); } @@ -235,6 +236,7 @@ AFRAME.registerComponent('onpicked', { // if multi, should also look for onreleased__ not just onreleased try { eval( code ) // should be jxr too e.g if (txt.match(prefix)) interpretJXR(txt) + // note that event details are avaible within that code as e.detail which might not be very clear } catch (error) { console.error(`Evaluation failed with ${error}`); }