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

example scaffolding component, mostly comments

Browse Source
scaffolding
Fabien Benetou 5 months ago
parent 820457a255
commit e84257a92b
1 changed files with 123 additions and 3 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. 126
      index.html

126
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>
@ -246,13 +246,42 @@ AFRAME.registerComponent('teleporter', {
events: { events: {
mouseenter: function (e) { this.el.setAttribute("opacity", .8) }, mouseenter: function (e) { this.el.setAttribute("opacity", .8) },
mouseleave: function (e) { this.el.setAttribute("opacity", .5) }, mouseleave: function (e) { this.el.setAttribute("opacity", .5) },
click: function (e) { document.getElementById('rig').setAttribute('position', this.el.getAttribute("position") ) } click: function (e) {
let posTarget = new THREE.Vector3()
this.el.object3D.getWorldPosition( posTarget )
console.log( posTarget)
document.getElementById('rig').setAttribute('position', posTarget)
// seems to work, maybe inteference with others teleporters activated unknowingly, e.g in succession
}
// this.el.getAttribute("position") ) }
// does not get proper world position
// makes it compatible with mouse on desktop ... but also somehow enable the wrist shortcut?! // makes it compatible with mouse on desktop ... but also somehow enable the wrist shortcut?!
} }
}); });
AFRAME.registerComponent('scaffolding', {
init: function(){
console.log(this.el.innerHTML)
// should become editable then saved back/replaced (or cloned)
// could do a test with switching to wireframe or grey color
// BT keyboard does get focus on Vision Pro too
// enter key does not seem to work though
// it does work on desktop tso should console.log() what keypresses are actually received
// Meta+Enter does work though! (on Corne-ish Zen it's Linux key with Enter)
// still prepare jxr regexes
// e.g el = document.querySelector("[scaffolding]")l el.innerHTML = el.innerHTML.replaceAll("<a-cylinder", "<a-cylinder wireframe=true")
// block based too
// responsive pedagogical way, as discuss with Adam particularly, metaphor of the electrician and consecutive pannels with limited access
// put this.el.innerHTML on a plane, e.g 1x1 black plane at back of current scaffolding
// arrow keys (on physical keyboard) move through that, initially changing color or current char
// use a font that faciliates positionning
// as done before, make the carret, e.g | directly in the content text itself
// on save (ESC? to define and test), remove carret then save back to this.el.innerHTML
}
});
let page = "Wiki.VirtualRealityInterface"; let page = "Wiki.VirtualRealityInterface";
// should do then only once graph loaded instead, should emit event
let pageFromParam = AFRAME.utils.getUrlParameter('page') let pageFromParam = AFRAME.utils.getUrlParameter('page')
if (pageFromParam) page = pageFromParam if (pageFromParam) page = pageFromParam
setTimeout( _ => { setTimeout( _ => {
@ -353,6 +382,97 @@ setTimeout( _ => {
<a-box id="namedteleporter" teleporter height=".1" class="teleportable" material="color: cyan" position="2 0 2" ></a-box> <a-box id="namedteleporter" teleporter height=".1" class="teleportable" material="color: cyan" position="2 0 2" ></a-box>
<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-entity position="-1 1 -3.5" scaffolding>
<a-box teleporter height=".01" depth=".4" width="1" class="teleportable" material="color: white" position=".5 0 -.2" ></a-box>
<a-entity position="0 0.5 0" class="scaffolding_front">
<a-cylinder radius=".05"></a-cylinder>
<a-cylinder radius=".05" position=".5 -.5 0" rotation="0 0 90"></a-cylinder>
<a-cylinder radius=".05" height=1.2 position=".5 0 0" rotation="0 0 45"></a-cylinder>
<a-cylinder radius=".05" height=".4" position="0 -.5 -.2" rotation="90 0 0"></a-cylinder>
</a-entity>
<a-entity position="0 0.5 -.4" class="scaffolding_back">
<a-cylinder radius=".05" position="0 0 0"></a-cylinder>
<a-cylinder radius=".05" position=".5 -.5 0" rotation="0 0 90"></a-cylinder>
<a-cylinder radius=".05" height=1.2 position=".5 0 0" rotation="0 0 -45"></a-cylinder>
<a-cylinder radius=".05" height=".4" position="1 -.5 .2" rotation="90 0 0"></a-cylinder>
</a-entity>
</a-entity>
<a-entity position="-1 2 -3.5" scaffolding>
<a-box teleporter height=".01" depth=".4" width="1" class="teleportable" material="color: white" position=".5 0 -.2" ></a-box>
<a-entity position="0 0.5 0" class="scaffolding_front">
<a-cylinder radius=".05"></a-cylinder>
<a-cylinder radius=".05" position=".5 -.5 0" rotation="0 0 90"></a-cylinder>
<a-cylinder radius=".05" height=1.2 position=".5 0 0" rotation="0 0 45"></a-cylinder>
<a-cylinder radius=".05" height=".4" position="0 -.5 -.2" rotation="90 0 0"></a-cylinder>
</a-entity>
<a-entity position="0 0.5 -.4" class="scaffolding_back">
<a-cylinder radius=".05" position="0 0 0"></a-cylinder>
<a-cylinder radius=".05" position=".5 -.5 0" rotation="0 0 90"></a-cylinder>
<a-cylinder radius=".05" height=1.2 position=".5 0 0" rotation="0 0 -45"></a-cylinder>
<a-cylinder radius=".05" height=".4" position="1 -.5 .2" rotation="90 0 0"></a-cylinder>
</a-entity>
</a-entity>
<a-entity position="0 0 -3.5" scaffolding>
<a-box teleporter height=".01" depth=".4" width="1" class="teleportable" material="color: white" position=".5 0 -.2" ></a-box>
<a-entity position="0 0.5 0" class="scaffolding_front">
<a-cylinder radius=".05"></a-cylinder>
<a-cylinder radius=".05" position=".5 -.5 0" rotation="0 0 90"></a-cylinder>
<a-cylinder radius=".05" height=1.2 position=".5 0 0" rotation="0 0 45"></a-cylinder>
<a-cylinder radius=".05" height=".4" position="0 -.5 -.2" rotation="90 0 0"></a-cylinder>
</a-entity>
<a-entity position="0 0.5 -.4" class="scaffolding_back">
<a-cylinder radius=".05" position="0 0 0"></a-cylinder>
<a-cylinder radius=".05" position=".5 -.5 0" rotation="0 0 90"></a-cylinder>
<a-cylinder radius=".05" height=1.2 position=".5 0 0" rotation="0 0 -45"></a-cylinder>
<a-cylinder radius=".05" height=".4" position="1 -.5 .2" rotation="90 0 0"></a-cylinder>
</a-entity>
</a-entity>
<a-entity position="0 1 -3.5" scaffolding>
<a-box teleporter height=".01" depth=".4" width="1" class="teleportable" material="color: white" position=".5 0 -.2" ></a-box>
<a-entity position="0 0.5 0" class="scaffolding_front">
<a-cylinder radius=".05"></a-cylinder>
<a-cylinder radius=".05" position=".5 -.5 0" rotation="0 0 90"></a-cylinder>
<a-cylinder radius=".05" height=1.2 position=".5 0 0" rotation="0 0 45"></a-cylinder>
<a-cylinder radius=".05" height=".4" position="0 -.5 -.2" rotation="90 0 0"></a-cylinder>
</a-entity>
<a-entity position="0 0.5 -.4" class="scaffolding_back">
<a-cylinder radius=".05" position="0 0 0"></a-cylinder>
<a-cylinder radius=".05" position=".5 -.5 0" rotation="0 0 90"></a-cylinder>
<a-cylinder radius=".05" height=1.2 position=".5 0 0" rotation="0 0 -45"></a-cylinder>
<a-cylinder radius=".05" height=".4" position="1 -.5 .2" rotation="90 0 0"></a-cylinder>
</a-entity>
</a-entity>
<a-entity position="1 0 -3.5" scaffolding>
<a-box teleporter height=".01" depth=".4" width="1" class="teleportable" material="color: white" position=".5 0 -.2" ></a-box>
<a-entity position="0 0.5 0" class="scaffolding_front">
<a-cylinder radius=".05"></a-cylinder>
<a-cylinder radius=".05" position=".5 -.5 0" rotation="0 0 90"></a-cylinder>
<a-cylinder radius=".05" height=1.2 position=".5 0 0" rotation="0 0 45"></a-cylinder>
<a-cylinder radius=".05" height=".4" position="0 -.5 -.2" rotation="90 0 0"></a-cylinder>
</a-entity>
<a-entity position="0 0.5 -.4" class="scaffolding_back">
<a-cylinder radius=".05" position="0 0 0"></a-cylinder>
<a-cylinder radius=".05" position=".5 -.5 0" rotation="0 0 90"></a-cylinder>
<a-cylinder radius=".05" height=1.2 position=".5 0 0" rotation="0 0 -45"></a-cylinder>
<a-cylinder radius=".05" height=".4" position="1 -.5 .2" rotation="90 0 0"></a-cylinder>
</a-entity>
</a-entity>
<a-entity position="-1 0 -3.5" scaffolding>
<a-box teleporter height=".01" depth=".4" width="1" class="teleportable" material="color: white" position=".5 0 -.2" ></a-box>
<a-entity position="0 0.5 0" class="scaffolding_front">
<a-cylinder radius=".05"></a-cylinder>
<a-cylinder radius=".05" position=".5 -.5 0" rotation="0 0 90"></a-cylinder>
<a-cylinder radius=".05" height=1.2 position=".5 0 0" rotation="0 0 45"></a-cylinder>
<a-cylinder radius=".05" height=".4" position="0 -.5 -.2" rotation="90 0 0"></a-cylinder>
</a-entity>
<a-entity position="0 0.5 -.4" class="scaffolding_back">
<a-cylinder radius=".05" position="0 0 0"></a-cylinder>
<a-cylinder radius=".05" position=".5 -.5 0" rotation="0 0 90"></a-cylinder>
<a-cylinder radius=".05" height=1.2 position=".5 0 0" rotation="0 0 -45"></a-cylinder>
<a-cylinder radius=".05" height=".4" position="1 -.5 .2" rotation="90 0 0"></a-cylinder>
</a-entity>
</a-entity>
</a-scene> </a-scene>
</body> </body>
</script> </script>

Write Preview
Loading…
Cancel
Save