working principle

scaled-linked-editor
Fabien Benetou 6 months ago
parent 08084875c9
commit 34bbc5bf73
  1. 40
      index.html
  2. 47
      jxr.js

@ -110,7 +110,7 @@ AFRAME.registerComponent('odometer',{
positions.push( pos )
if (positions.length > 20) {
let dist = pos.distanceTo( positions[positions.length-20] )
console.log(dist) // could be done via setFeedbackHUD() instead
//console.log(dist) // could be done via setFeedbackHUD() instead
el.setAttribute('value', dist.toFixed(2))
}
}})
@ -160,12 +160,12 @@ AFRAME.registerComponent('wristright',{
<a-troika-text anchor=left target value="jxr tiltDownId('codeditor')" position=" -0.3 1.60 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
-->
<a-troika-text anchor=left target value="jxr pushLeftClass('reader')" position=" -0.3 1.55 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushRightClass('reader')" position=" -0.3 1.50 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushUpClass('reader')" position=" -0.3 1.45 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushDownClass('reader')" position=" -0.3 1.40 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushBackClass('reader')" position=" -0.3 1.35 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushFrontClass('reader')" position=" -0.3 1.30 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushLeftClass('editable-target')" position=" -0.3 1.55 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushRightClass('editable-target')" position=" -0.3 1.50 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushUpClass('editable-target')" position=" -0.3 1.45 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushDownClass('editable-target')" position=" -0.3 1.40 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushBackClass('editable-target')" position=" -0.3 1.35 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushFrontClass('editable-target')" position=" -0.3 1.30 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-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>
@ -201,19 +201,19 @@ AFRAME.registerComponent('wristright',{
<a-torus position="0 1 -5" color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus position="0 2 -7" color="#43A367" radius=".5" radius-tubular="0.01"></a-torus>
<a-torus position="0 1 -5" color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus position="0 1 -6" color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus position="0 1 -7" color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus position="-1 1 -8" rotation="0 20 0" color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus position="-2 1 -9" rotation="0 40 0"color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus position="-3 1 -10" rotation="0 60 0"color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus position="-4 1 -11" rotation="0 80 0"color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus position="-5 1 -12" rotation="0 90 0"color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus position="-6 1 -12" rotation="0 90 0"color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus position="-8 1 -12" rotation="0 90 0"color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus position="-10 1 -12" rotation="0 90 0"color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus position="-15 1 -12" rotation="0 90 0"color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus position="-20 1 -12" rotation="0 90 0"color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus editable position="0 1 -5" color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus editable position="0 1 -6" color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus editable position="0 1 -7" color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus editable position="-1 1 -8" rotation="0 20 0" color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus editable position="-2 1 -9" rotation="0 40 0"color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus editable position="-3 1 -10" rotation="0 60 0"color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus editable position="-4 1 -11" rotation="0 80 0"color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus editable position="-5 1 -12" rotation="0 90 0"color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus editable position="-6 1 -12" rotation="0 90 0"color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus editable position="-8 1 -12" rotation="0 90 0"color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus editable position="-10 1 -12" rotation="0 90 0"color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus editable position="-15 1 -12" rotation="0 90 0"color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-torus editable position="-20 1 -12" rotation="0 90 0"color="#43A367" radius="1" radius-tubular="0.01"></a-torus>
<a-entity class="workcone" scale=".2 .5 .2" position="0.5 0 -1">
<a-cone position="0 0.2 0" color="darkorange" height=".4" radius-bottom="0.2" radius-top="0.02"></a-cone>

@ -3609,6 +3609,53 @@ AFRAME.registerComponent('pull', {
},
});
AFRAME.registerComponent('linked-editor', {
schema: { sourceid : {type: 'string'} },
events: {
picked: function (evt) {
},
moved: function (evt) {
document.getElementById(this.data.sourceid).setAttribute('rotation', this.el.getAttribute('rotation') )
let sourcePos = document.getElementById(this.data.sourceid).getAttribute('position')
let pos = this.el.getAttribute('position').clone()
const scale = 1/50 // could be based on distance from furthest object
//pos.z-=2 // group selection, i.e push...Class functions, can be used for manual adjustement
pos.y--
pos.multiplyScalar(1/scale) // might not well, should probably shift first within x,y,z>0
sourcePos.copy(pos)
},
released: function (evt) {
},
},
});
AFRAME.registerComponent('editable', {
init: function(){
const scale = 1/50 // could be based on distance from furthest object
// with a lower bound that can't be too far from precision selection threshold
let cloned = this.el.cloneNode(true) // might need a DOM flush first
if (!this.el.id) this.el.id = Date.now()+' '+Math.random()
cloned.setAttribute('linked-editor', 'sourceid', this.el.id)
cloned.id = Date.now()+' '+Math.random()
cloned.removeAttribute('editable')
cloned.setAttribute('target', '')
cloned.setAttribute('scale', scale + ' ' + scale + ' ' +scale + ' ' )
cloned.className = 'editable-target'
//cloned.setAttribute('rotation', this.el.getAttribute('rotation') )
let pos = this.el.getAttribute('position').clone()
pos.multiplyScalar(scale) // might not well, should probably shift first within x,y,z>0
pos.y++
//pos.z+=2 // group selection, i.e push...Class functions, can be used for manual adjustement
cloned.setAttribute('position', AFRAME.utils.coordinates.stringify( pos )) // loses position
AFRAME.scenes[0].appendChild(cloned)
// need to add target then insuring live link
// History of transformations to revert for linked sources of editables
// might skip the push...Class functions though but needs to be shared to moved event
// acctually would be moved on the newly created element, not the source
}
});
// used for testing, now that jxr.js is outside of index.html, could consider putting this back in index.html instead to keep behavior one would expect from a library
// does indeed create problems, namely other pages relying on it do get this testing behavior
AFRAME.registerComponent('startfunctions', {

Loading…
Cancel
Save