example of snapping to real world meshing objects

real-world-meshing
Fabien Benetou 6 months ago
parent 1dd6c6a30b
commit b886795a91
  1. 28
      index.html
  2. 3
      jxr-core.js

@ -5,23 +5,48 @@
<!-- Suggestions? https://git.benetou.fr/utopiah/text-code-xr-engine/issues/ --> <!-- Suggestions? https://git.benetou.fr/utopiah/text-code-xr-engine/issues/ -->
<!-- 1.6 needed for real-world-meshing <script src='dependencies/aframe.offline.min.js'></script>--> <!-- 1.6 needed for real-world-meshing <script src='dependencies/aframe.offline.min.js'></script>-->
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script> <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<!-- <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>-->
<!-- <script src='dependencies/aframe.offline.min.js'></script>-->
<script src="dependencies/a-console.js"></script> <script src="dependencies/a-console.js"></script>
<script src='dependencies/aframe-troika-text.min.js'></script> <script src='dependencies/aframe-troika-text.min.js'></script>
<script src='dependencies/webdav.js'></script> <script src='dependencies/webdav.js'></script>
<script src='jxr-core.js?1234'></script> <script src='jxr-core.js?125'></script>
<script src='jxr-postitnote.js?13235'></script> <script src='jxr-postitnote.js?13235'></script>
</head> </head>
<body> <body>
<script> <script>
// onreleased does not work on 1.6 yet works on 1.5
// also minimalist example on event to emit() then receive on component does work
function getFurnitures(){ function getFurnitures(){
// from https://aframe.io/docs/1.6.0/components/real-world-meshing.html // from https://aframe.io/docs/1.6.0/components/real-world-meshing.html
worldMeshes = Array.from(document.querySelectorAll("[data-world-mesh]") ) worldMeshes = Array.from(document.querySelectorAll("[data-world-mesh]") )
// should be done after entering AR
worldMeshes.map( el => console.log( el.getAttribute("data-world-mesh") ) ) worldMeshes.map( el => console.log( el.getAttribute("data-world-mesh") ) )
// should be use in order to snap onreleased to a specific object, e.g // should be use in order to snap onreleased to a specific object, e.g
} }
function attachFirstWorldMeshFromLabel(label){
console.log('testing attachFirstWorldMeshFromLabel()')
// used as e.g onreleased="attachFirstWorldMeshFromLabel('screen')"
let target = document.querySelector("[data-world-mesh="+label+"]")
if (!target) {
console.log('no entity of semantic label', label, 'found')
console.log('(consider doing room setup again)')
} else {
let latest = selectedElements[selectedElements.length-1].element
console.log('putting', latest, 'on', target, 'of label', label)
latest.setAttribute( "position", target.getAttribute("position") )
latest.setAttribute( "rotation", target.getAttribute("rotation") )
// note that this will NOT work well on objects with depth, e.g table, but rather on screens, art piece, walls (even arguable)
// could add optional parameter to add "on top of" or other positionning
// could be based on the limited type of labels too
// could stack, or even add random offsets to void overlap
}
}
var forceXaxis var forceXaxis
// setInterval( _ => console.log(forceXaxis), 1000) // setInterval( _ => console.log(forceXaxis), 1000)
@ -397,6 +422,7 @@ setTimeout( _ => {
<a-box target teleporter height=".1" depth=".1" width=".1" class="teleportable" material="color: red" position="0 1 -.5" ></a-box> <a-box target teleporter height=".1" depth=".1" width=".1" class="teleportable" material="color: red" position="0 1 -.5" ></a-box>
<a-troika-text anchor=left value="jxr getFurnitures()" target position=" 0.3 1.25 0" rotation="0 -40 0" scale="0.1 0.1 0.1"></a-troika-text> <a-troika-text anchor=left value="jxr getFurnitures()" target position=" 0.3 1.25 0" rotation="0 -40 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-box target height=".1" depth=".02" width=".1" material="color: purple" position="0 1.2 -.5" onreleased="attachFirstWorldMeshFromLabel('table')"></a-box>
</a-scene> </a-scene>
</body> </body>
</script> </script>

@ -176,6 +176,7 @@ AFRAME.registerComponent('pinchprimary', { // currently only 1 hand, the right o
} }
if (selectedElement){ if (selectedElement){
let content = selectedElement.getAttribute("value") let content = selectedElement.getAttribute("value")
console.log('emitted released event that somehow does NOT get cought anymore') // broken since 1.6, emitting works but does not seem to be caught
selectedElement.emit('released', {element:selectedElement, timestamp:Date.now(), primary:true}) selectedElement.emit('released', {element:selectedElement, timestamp:Date.now(), primary:true})
} }
// unselect current target if any // unselect current target if any
@ -249,9 +250,11 @@ AFRAME.registerComponent('pinchprimary', { // currently only 1 hand, the right o
// avoiding setOnDropFromAttribute() as it is not idiosyncratic and creates timing issues // avoiding setOnDropFromAttribute() as it is not idiosyncratic and creates timing issues
AFRAME.registerComponent('onreleased', { // changed from ondrop to be coherent with event name AFRAME.registerComponent('onreleased', { // changed from ondrop to be coherent with event name
schema: { type: 'string' }, // rewritten due to 1.6 https://github.com/aframevr/aframe/issues/5541
// could support multi // could support multi
events: { events: {
released: function (e) { released: function (e) {
console.log('received released event', e)
let code = this.el.getAttribute('onreleased') let code = this.el.getAttribute('onreleased')
// if multi, should also look for onreleased__ not just onreleased // if multi, should also look for onreleased__ not just onreleased
try { try {

Loading…
Cancel
Save