utopiah
/
text-code-xr-engine
1
0
Fork 0
Code Issues 81 Pull Requests Projects Releases Wiki Activity

working teleport with interaction

Browse Source
spatial-introspection
Fabien Benetou 8 months ago
parent 0421cf3099
commit 717ca1aba4
2 changed files with 47 additions and 7 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 30
      index.html
  2. 24
      jxr-core.js

30
index.html
Unescape View File

@ -7,7 +7,7 @@
<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?123'></script> <script src='jxr-core.js?1234'></script>
<script src='jxr-postitnote.js?13235'></script> <script src='jxr-postitnote.js?13235'></script>
</head> </head>
<body> <body>
@ -219,6 +219,19 @@ AFRAME.registerComponent('onemptypinch', { // changed from ondrop to be coherent
} }
}) })
function onHoveredChangeColor(){
console.log( "onHoveredChangeOpacity" )
let target = document.getElementById('testboxpinch')
// could iterate over targets, see https://aframe.io/docs/1.5.0/components/cursor.html#configuring-the-cursor-through-the-raycaster-component
console.log ( "cursor-hovered?", target.states.includes( "cursor-hovered" ) )
if ( target.states.includes( "cursor-hovered" ) ){
console.log ( "yes, cursor-hovered" )
target.setAttribute("material", "color", "green")
//target.setAttribute("color", "red")
document.getElementById('rig').setAttribute('position', "4 0 -3")
// bug on hand pinch, even while checking on world position, might have to see older commit
}
}
let page = "Wiki.VirtualRealityInterface"; let page = "Wiki.VirtualRealityInterface";
// should do then only once graph loaded instead, should emit event // should do then only once graph loaded instead, should emit event
@ -237,16 +250,22 @@ setTimeout( _ => {
</a> </a>
</div> </div>
<a-scene startfunctions onemptypinch="console.log('empty')"> <a-scene startfunctions onemptypinch="onHoveredChangeColor()">
<a-gltf-model hide-on-enter-ar="" id="environment" src="../content/CubeRoom.glb" rotation="0 -90 0" position="0 0 1" scale="" ></a-gltf-model> <a-gltf-model hide-on-enter-ar="" id="environment" src="../content/CubeRoom.glb" rotation="0 -90 0" position="0 0 1" scale="" ></a-gltf-model>
<!-- Cube Room by Anonymous [CC-BY] via Poly Pizza --> <!-- Cube Room by Anonymous [CC-BY] via Poly Pizza -->
<a-entity id="rig"> <a-entity id="rig">
<a-entity id="player" networked="template:#avatar-template;attachTemplateToLocal:false;" <a-entity id="player" networked="template:#avatar-template;attachTemplateToLocal:false;"
hud camera look-controls wasd-controls position="0 1.6 0"> hud camera look-controls wasd-controls position="0 1.6 0">
<a-entity cursor position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.01; radiusOuter: 0.02"
material="color: black; shader: flat; opacity:.1;"
></a-entity>
</a-entity> </a-entity>
<a-entity id="rightHand" pinchprimary hand-tracking-controls="hand: right;"></a-entity> <a-entity id="rightHand" pinchprimary hand-tracking-controls="hand: right;"></a-entity>
<a-entity id="leftHand" pinchsecondary wristattachsecondary="target: #box" hand-tracking-controls="hand: left;"></a-entity> <a-entity id="leftHand" pinchsecondary wristattachsecondary="target: #box" hand-tracking-controls="hand: left;"></a-entity>
<a-console position="2 2 0" rotation="0 -45 0" font-size="34" height=1 skip-intro=true></a-console>
</a-entity> </a-entity>
<a-box pressable start-on-press id="box" scale="0.05 0.05 0.05" color="pink"></a-box> <a-box pressable start-on-press id="box" scale="0.05 0.05 0.05" color="pink"></a-box>
@ -260,6 +279,7 @@ setTimeout( _ => {
<a-troika-text anchor=left value="jxr onNextPrimaryPinch(cloneTarget)" target position=" -0.3 1.60 0" rotation="0 40 0" scale="0.1 0.1 0.1"></a-troika-text> <a-troika-text anchor=left value="jxr onNextPrimaryPinch(cloneTarget)" target position=" -0.3 1.60 0" rotation="0 40 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left value="jxr location.reload()" target position=" -0.3 1.30 0" rotation="0 40 0" scale="0.1 0.1 0.1"></a-troika-text> <a-troika-text anchor=left value="jxr location.reload()" target position=" -0.3 1.30 0" rotation="0 40 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left value="jxr makeAnchorsVisibleOnTargets()" target position=" -0.3 1.20 0" rotation="0 40 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left value="forceXaxis toggling" <a-troika-text anchor=left value="forceXaxis toggling"
onreleased="console.log('run on released');forceXaxis=!forceXaxis" onreleased="console.log('run on released');forceXaxis=!forceXaxis"
@ -273,8 +293,6 @@ setTimeout( _ => {
<a-troika-text anchor=left value="jxr setTimeout( _ => toggleAttachToSelf(), 1000); toggleAttachToSelf()" 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 setTimeout( _ => toggleAttachToSelf(), 1000); toggleAttachToSelf()" target position=" -0.3 1.25 0" rotation="0 40 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-console position="2 2 0" rotation="0 -45 0" font-size="34" height=1 skip-intro=true></a-console>
<a-box scale=".07 .07 .07" class="mab" target position=".3 1.6 -.5" color="brown" onreleased="snapMAB()" > <a-box scale=".07 .07 .07" class="mab" target position=".3 1.6 -.5" color="brown" onreleased="snapMAB()" >
<a-box scale="1.5 1.5 1" color="brown"></a-box> <a-box scale="1.5 1.5 1" color="brown"></a-box>
<a-box scale="1 1.5 1.5" color="brown"></a-box> <a-box scale="1 1.5 1.5" color="brown"></a-box>
@ -303,6 +321,10 @@ setTimeout( _ => {
<a-box scale=".1 .1 .1" position=".5 .8 -.3" color="purple" ></a-box> <a-box scale=".1 .1 .1" position=".5 .8 -.3" color="purple" ></a-box>
<a-box scale=".2 .2 .2" position=".5 .8 -.3" color="yellow" ></a-box> <a-box scale=".2 .2 .2" position=".5 .8 -.3" color="yellow" ></a-box>
<a-entity id="testboxpinch" position="4 1 -4" geometry="primitive: box" material="color: blue"></a-entity>
<a-troika-text anchor=left value="jxr location.reload()" target position="4 1.30 -3.4" rotation="0 0 0" scale="0.1 0.1 0.1"></a-troika-text>
</a-scene> </a-scene>
</body> </body>
</script> </script>

24
jxr-core.js
Unescape View File

@ -36,14 +36,26 @@ AFRAME.registerComponent('target', {
}) })
function getClosestTargetElements( pos, threshold=0.05 ){ function getClosestTargetElements( pos, threshold=0.05 ){
// assumes pos has now no offset
// TODO Bbox intersects rather than position // TODO Bbox intersects rather than position
return targets.filter( e => e.getAttribute("visible") == true).map( t => { return { el: t, dist : pos.distanceTo(t.getAttribute("position") ) } }) return targets.filter( e => e.getAttribute("visible") == true)
.map( t => {
let posTarget = new THREE.Vector3()
t.object3D.getWorldPosition( posTarget )
let d = pos.distanceTo( posTarget )
return { el: t, dist : d }
})
.filter( t => t.dist < threshold && t.dist > 0 ) .filter( t => t.dist < threshold && t.dist > 0 )
.sort( (a,b) => a.dist > b.dist) .sort( (a,b) => a.dist > b.dist)
} }
function getClosestTargetElement( pos, threshold=0.05 ){ // 10x lower threshold for flight mode function getClosestTargetElement( pos, threshold=0.05 ){ // 10x lower threshold for flight mode
var res = null var res = null
// assumes both hands have the same (single) parent, if any
let parentPos = document.getElementById('rig').getAttribute('position')
pos.add( parentPos )
console.log( "from getClosestTargetElements, pos:", pos ) // relative pos, should thus remove rig position, even though it makes assumptions
const matches = getClosestTargetElements( pos, threshold) const matches = getClosestTargetElements( pos, threshold)
if (matches.length > 0) res = matches[0].el if (matches.length > 0) res = matches[0].el
return res return res
@ -151,7 +163,10 @@ AFRAME.registerComponent('pinchprimary', { // currently only 1 hand, the right o
// see own trigger-box component. Could use dedicated threejs helpers instead. // see own trigger-box component. Could use dedicated threejs helpers instead.
// https://github.com/Utopiah/aframe-triggerbox-component/blob/master/aframe-triggerbox-component.js#L66 // https://github.com/Utopiah/aframe-triggerbox-component/blob/master/aframe-triggerbox-component.js#L66
// could make trigger zones visible as debug mode // could make trigger zones visible as debug mode
var closests = getClosestTargetElements( event.detail.position ) let pos = event.detail.position
let parentPos = document.getElementById('rig').getAttribute('position')
pos.add( parentPos )
var closests = getClosestTargetElements( pos )
//if (closests && closests.length > 0) // avoiding self reference //if (closests && closests.length > 0) // avoiding self reference
// setFeedbackHUD("close enough, could stack with "+ closests[1].el.getAttribute("value") ) // setFeedbackHUD("close enough, could stack with "+ closests[1].el.getAttribute("value") )
var dist = event.detail.position.distanceTo( document.querySelector("#box").object3D.position ) var dist = event.detail.position.distanceTo( document.querySelector("#box").object3D.position )
@ -189,7 +204,10 @@ AFRAME.registerComponent('pinchprimary', { // currently only 1 hand, the right o
selectionBox.update(); selectionBox.update();
} }
if (selectedElement && !groupingMode) { if (selectedElement && !groupingMode) {
selectedElement.setAttribute("position", event.detail.position) let pos = event.detail.position
let parentPos = document.getElementById('rig').getAttribute('position')
pos.add( parentPos )
selectedElement.setAttribute("position", pos )
document.querySelector("#rightHand").object3D.traverse( e => { document.querySelector("#rightHand").object3D.traverse( e => {
if (e.name == "ring-finger-tip"){ if (e.name == "ring-finger-tip"){
selectedElement.object3D.rotation.copy( e.rotation ) selectedElement.object3D.rotation.copy( e.rotation )

Write Preview
Loading…
Cancel
Save