diff --git a/dist/xrfragment.aframe.js b/dist/xrfragment.aframe.js index f1a2c53..172a929 100644 --- a/dist/xrfragment.aframe.js +++ b/dist/xrfragment.aframe.js @@ -956,20 +956,33 @@ xrf.frag.env = function(v, opts){ console.log(` └ applied image '${v.string}' as environment map`) } /** + * * navigation, portals & mutations - * + * * | fragment | type | scope | example value | - * |`href`| string (uri or [predefined view](#predefined_view )) | 🔒 |`#pos=1,1,0`
`#pos=1,1,0&rot=90,0,0`
`#pos=pyramid`
`#pos=lastvisit\|pyramid`
`://somefile.gltf#pos=1,1,0`
| + * |`href`| string (uri or predefined view) | 🔒 |`#pos=1,1,0`
`#pos=1,1,0&rot=90,0,0`
`#pos=pyramid`
`#pos=lastvisit|pyramid`
`://somefile.gltf#pos=1,1,0`
| + * + * [[» example implementation|https://github.com/coderofsalvation/xrfragment/blob/main/src/3rd/three/xrf/href.js]]
+ * [[» example 3D asset|https://github.com/coderofsalvation/xrfragment/blob/main/example/assets/href.gltf#L192]]
+ * [[» discussion|https://github.com/coderofsalvation/xrfragment/issues/1]]
* * [img[xrfragment.jpg]] - * + * + * * !!!spec 1.0 - * - * 1. a ''external''- or ''file URI'' fully replaces the current scene and assumes `pos=0,0,0&rot=0,0,0` by default (unless specified) - * + * + * 1. an ''external''- or ''file URI'' fully replaces the current scene and assumes `pos=0,0,0&rot=0,0,0` by default (unless specified) + * * 2. navigation should not happen when queries (`q=`) are present in local url: queries will apply (`pos=`, `rot=` e.g.) to the targeted object(s) instead. - * + * * 3. navigation should not happen ''immediately'' when user is more than 2 meter away from the portal/object containing the href (to prevent accidental navigation e.g.) + * + * 4. URL navigation should always be reflected in the client (in case of javascript: see [[here|https://github.com/coderofsalvation/xrfragment/blob/dev/src/3rd/three/navigator.js]] for an example navigator). + * + * 5. In XR mode, the navigator back/forward-buttons should be always visible (using a wearable e.g., see [[here|https://github.com/coderofsalvation/xrfragment/blob/dev/example/aframe/sandbox/index.html#L26-L29]] for an example wearable) + * + * [img[navigation.png]] + * */ xrf.frag.href = function(v, opts){ @@ -1084,10 +1097,15 @@ xrf.frag.href = function(v, opts){ } /** - * > above was abducted from [[this|https://i.imgur.com/E3En0gJ.png]] and [[this|https://i.imgur.com/lpnTz3A.png]] survey result + * > above solutions were abducted from [[this|https://i.imgur.com/E3En0gJ.png]] and [[this|https://i.imgur.com/lpnTz3A.png]] survey result * - * [[» discussion|https://github.com/coderofsalvation/xrfragment/issues/1]]
- * [[» implementation example|https://github.com/coderofsalvation/xrfragment/blob/main/src/three/xrf/pos.js]]
+ * !!!Demo + * + * <$videojs controls="controls" aspectratio="16:9" preload="auto" poster="" fluid="fluid" class="vjs-big-play-centered"> + * + * + * + * > capture of aframe/sandbox */ xrf.frag.pos = function(v, opts){ //if( renderer.xr.isPresenting ) return // too far away @@ -1158,6 +1176,10 @@ xrf.frag.rot = function(v, opts){ v.y * Math.PI / 180, v.z * Math.PI / 180 ) +// camera.rotation.x = v.x +// camera.rotation.y = v.y +// camera.rotation.z = v.z + camera.updateMatrixWorld() } // *TODO* use webgl instancing @@ -1231,15 +1253,24 @@ window.AFRAME.registerComponent('xrf', { // override the camera-related XR Fragments so the camera-rig is affected let camOverride = (xrf,v,opts) => { opts.camera = document.querySelector('[camera]').object3D.parent - console.dir(opts.camera) xrf(v,opts) } XRF.pos = camOverride - XRF.rot = camOverride - XRF.href = (xrf,v,opts) => { // convert portal to a-entity so AFRAME - camOverride(xrf,v,opts) // raycaster can find & execute it + // in order to set the rotation programmatically + // we need to disable look-controls + XRF.rot = (xrf,v,opts) => { + let {renderer} = opts; + let look = document.querySelector('[look-controls]') + if( look ) look.removeAttribute("look-controls") + camOverride(xrf,v,opts) + } + + // convert portal to a-entity so AFRAME + // raycaster can find & execute it + XRF.href = (xrf,v,opts) => { + camOverride(xrf,v,opts) let {mesh,camera} = opts; let el = document.createElement("a-entity") el.setAttribute("xrf-get",mesh.name ) diff --git a/dist/xrfragment.three.js b/dist/xrfragment.three.js index 0a5036b..0a1174d 100644 --- a/dist/xrfragment.three.js +++ b/dist/xrfragment.three.js @@ -956,20 +956,33 @@ xrf.frag.env = function(v, opts){ console.log(` └ applied image '${v.string}' as environment map`) } /** + * * navigation, portals & mutations - * + * * | fragment | type | scope | example value | - * |`href`| string (uri or [predefined view](#predefined_view )) | 🔒 |`#pos=1,1,0`
`#pos=1,1,0&rot=90,0,0`
`#pos=pyramid`
`#pos=lastvisit\|pyramid`
`://somefile.gltf#pos=1,1,0`
| + * |`href`| string (uri or predefined view) | 🔒 |`#pos=1,1,0`
`#pos=1,1,0&rot=90,0,0`
`#pos=pyramid`
`#pos=lastvisit|pyramid`
`://somefile.gltf#pos=1,1,0`
| + * + * [[» example implementation|https://github.com/coderofsalvation/xrfragment/blob/main/src/3rd/three/xrf/href.js]]
+ * [[» example 3D asset|https://github.com/coderofsalvation/xrfragment/blob/main/example/assets/href.gltf#L192]]
+ * [[» discussion|https://github.com/coderofsalvation/xrfragment/issues/1]]
* * [img[xrfragment.jpg]] - * + * + * * !!!spec 1.0 - * - * 1. a ''external''- or ''file URI'' fully replaces the current scene and assumes `pos=0,0,0&rot=0,0,0` by default (unless specified) - * + * + * 1. an ''external''- or ''file URI'' fully replaces the current scene and assumes `pos=0,0,0&rot=0,0,0` by default (unless specified) + * * 2. navigation should not happen when queries (`q=`) are present in local url: queries will apply (`pos=`, `rot=` e.g.) to the targeted object(s) instead. - * + * * 3. navigation should not happen ''immediately'' when user is more than 2 meter away from the portal/object containing the href (to prevent accidental navigation e.g.) + * + * 4. URL navigation should always be reflected in the client (in case of javascript: see [[here|https://github.com/coderofsalvation/xrfragment/blob/dev/src/3rd/three/navigator.js]] for an example navigator). + * + * 5. In XR mode, the navigator back/forward-buttons should be always visible (using a wearable e.g., see [[here|https://github.com/coderofsalvation/xrfragment/blob/dev/example/aframe/sandbox/index.html#L26-L29]] for an example wearable) + * + * [img[navigation.png]] + * */ xrf.frag.href = function(v, opts){ @@ -1084,10 +1097,15 @@ xrf.frag.href = function(v, opts){ } /** - * > above was abducted from [[this|https://i.imgur.com/E3En0gJ.png]] and [[this|https://i.imgur.com/lpnTz3A.png]] survey result + * > above solutions were abducted from [[this|https://i.imgur.com/E3En0gJ.png]] and [[this|https://i.imgur.com/lpnTz3A.png]] survey result * - * [[» discussion|https://github.com/coderofsalvation/xrfragment/issues/1]]
- * [[» implementation example|https://github.com/coderofsalvation/xrfragment/blob/main/src/three/xrf/pos.js]]
+ * !!!Demo + * + * <$videojs controls="controls" aspectratio="16:9" preload="auto" poster="" fluid="fluid" class="vjs-big-play-centered"> + * + * + * + * > capture of aframe/sandbox */ xrf.frag.pos = function(v, opts){ //if( renderer.xr.isPresenting ) return // too far away @@ -1158,6 +1176,10 @@ xrf.frag.rot = function(v, opts){ v.y * Math.PI / 180, v.z * Math.PI / 180 ) +// camera.rotation.x = v.x +// camera.rotation.y = v.y +// camera.rotation.z = v.z + camera.updateMatrixWorld() } // *TODO* use webgl instancing diff --git a/src/3rd/aframe/index.js b/src/3rd/aframe/index.js index fb5ad06..f966ad6 100644 --- a/src/3rd/aframe/index.js +++ b/src/3rd/aframe/index.js @@ -32,15 +32,24 @@ window.AFRAME.registerComponent('xrf', { // override the camera-related XR Fragments so the camera-rig is affected let camOverride = (xrf,v,opts) => { opts.camera = document.querySelector('[camera]').object3D.parent - console.dir(opts.camera) xrf(v,opts) } XRF.pos = camOverride - XRF.rot = camOverride - XRF.href = (xrf,v,opts) => { // convert portal to a-entity so AFRAME - camOverride(xrf,v,opts) // raycaster can find & execute it + // in order to set the rotation programmatically + // we need to disable look-controls + XRF.rot = (xrf,v,opts) => { + let {renderer} = opts; + let look = document.querySelector('[look-controls]') + if( look ) look.removeAttribute("look-controls") + camOverride(xrf,v,opts) + } + + // convert portal to a-entity so AFRAME + // raycaster can find & execute it + XRF.href = (xrf,v,opts) => { + camOverride(xrf,v,opts) let {mesh,camera} = opts; let el = document.createElement("a-entity") el.setAttribute("xrf-get",mesh.name ) diff --git a/src/3rd/three/xrf/rot.js b/src/3rd/three/xrf/rot.js index 9d6cb2a..f751281 100644 --- a/src/3rd/three/xrf/rot.js +++ b/src/3rd/three/xrf/rot.js @@ -6,4 +6,5 @@ xrf.frag.rot = function(v, opts){ v.y * Math.PI / 180, v.z * Math.PI / 180 ) + camera.updateMatrixWorld() }