|
|
|
|
@ -2157,8 +2157,85 @@ function changeColorLastId(){ |
|
|
|
|
let id = getIdFromPick() // applies on primary only |
|
|
|
|
console.log("id?",id) |
|
|
|
|
if (id) document.querySelector("#"+id).setAttribute("color", "red") |
|
|
|
|
// this could instead be any function with any parameters |
|
|
|
|
// see currying |
|
|
|
|
//if (id) document.querySelector("#"+id).functionname(params) |
|
|
|
|
// consider how with params it could be a curve or a number e.g distance between pinches |
|
|
|
|
// i.e another action, like picking before |
|
|
|
|
// can also be generalized to arbitrary selection, e.g classes, via .map() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function displayManipulateSlides(){ |
|
|
|
|
slides.map( (s,i) => { |
|
|
|
|
let el = newPrimitiveWithOutline( "box", "" + ((-slides.length/2)/10 + i/5) + " 1.6 -0.2", ".2 .1 .1" ) |
|
|
|
|
el.setAttribute("src", slides_URL + s) |
|
|
|
|
el.id += "slides_" + Date.now() |
|
|
|
|
el.className = "slide" |
|
|
|
|
AFRAME.scenes[0].appendChild(el) |
|
|
|
|
targets.push(el) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const slides_URL = "../content/jxr-presentation-in-SpaSca/captures/jpg/" |
|
|
|
|
|
|
|
|
|
const slides = [ |
|
|
|
|
"2023-01-20-151624_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151628_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151634_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151639_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151650_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151653_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151702_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151717_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151721_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151724_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151726_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151729_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151747_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151753_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151756_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151800_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151806_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151810_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151812_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151817_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151826_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151829_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151832_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151836_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151840_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151844_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151849_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151852_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151908_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151912_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151920_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151926_3840x2000_scrot.png.jpg", |
|
|
|
|
"2023-01-20-151930_3840x2000_scrot.png.jpg", |
|
|
|
|
] |
|
|
|
|
|
|
|
|
|
/* |
|
|
|
|
|
|
|
|
|
generalize selector to pick last Nth rather than very last |
|
|
|
|
adapt getIdFromPick() with .slice() after filter then map on length-N instead of length-1 |
|
|
|
|
|
|
|
|
|
selector pickers : pickClass and pickId |
|
|
|
|
display result in 3D HUD with rotating objects and selector value |
|
|
|
|
ideally themselves also selectable/usable, e.g clone from HUD to bring back "out" |
|
|
|
|
requires extra work as becoming a child will not work, own positionning |
|
|
|
|
should fix that |
|
|
|
|
could compare to world coordinates instead of "just" position attribute |
|
|
|
|
add a clear selector function to avoid making the HUD unusable |
|
|
|
|
|
|
|
|
|
could also pick via volume, e.g wireframe box |
|
|
|
|
start with https://threejs.org/docs/#api/en/math/Box3.containsPoint |
|
|
|
|
can iterate with https://threejs.org/docs/#api/en/math/Box3.containsBox |
|
|
|
|
consider also https://threejs.org/docs/#api/en/math/Box3.intersectsBox |
|
|
|
|
|
|
|
|
|
consider pick then apply, i.e changeColorLastId() but for next Id |
|
|
|
|
should be cancealable |
|
|
|
|
|
|
|
|
|
*/ |
|
|
|
|
</script> |
|
|
|
|
<div id="observablehq-key"> |
|
|
|
|
<div id="observablehq-viewof-offsetExample-ab4c1560"></div> |
|
|
|
|
@ -2207,18 +2284,16 @@ function changeColorLastId(){ |
|
|
|
|
<a-text target value="jxr addBlockCodeExample()" position="0 1.65 -0.1" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
<a-text target value="jxr addAllPrimitives()" position="0 1.60 -0.1" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
<a-text target value="jxr addCompoundPrimitiveExample()" position="0 1.55 -0.1" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
<a-text target value="jxr rescalePlace(1/10, 1)" position="0 1.50 -0.1" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
<a-text target value="jxr rescalePlace()" position="0 1.45 -0.1" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
<a-text target value="jxr tile_snapping_enabled = !tile_snapping_enabled" position="0 1.40 -0.1" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
<a-text target id="getfromid_color" value="jxr changeColorLastId()" position="0 1.35 -0.1" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
<a-text target id="getfromid_id" value="jxr getIdFromPick()" position="0 1.30 -0.1" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
|
|
|
|
|
<a-text target value="jxr pushLeftClass('tiles')" position=" -0.2 1.55 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
<a-text target value="jxr pushRightClass('tiles')" position=" -0.2 1.50 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
<a-text target value="jxr pushUpClass('tiles')" position=" -0.2 1.45 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
<a-text target value="jxr pushDownClass('tiles')" position=" -0.2 1.40 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
<a-text target value="jxr pushBackClass('tiles')" position=" -0.2 1.35 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
<a-text target value="jxr pushFrontClass('tiles')" position=" -0.2 1.30 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
<a-text target value="jxr pushLeftClass('slide')" position=" -0.2 1.55 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
<a-text target value="jxr pushRightClass('slide')" position=" -0.2 1.50 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
<a-text target value="jxr pushUpClass('slide')" position=" -0.2 1.45 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
<a-text target value="jxr pushDownClass('slide')" position=" -0.2 1.40 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
<a-text target value="jxr pushBackClass('slide')" position=" -0.2 1.35 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
<a-text target value="jxr pushFrontClass('slide')" position=" -0.2 1.30 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
|
|
|
|
|
<!-- somehow disable hand interaction despite, according to the documentation, it should rely on world position |
|
|
|
|
<a-text target value="jxr qs #rig sa position 0 0 10" position="0 1.55 .5" rotation="0 180 0" scale="0.1 0.1 0.1"></a-text> |
|
|
|
|
|
