immers deeper integration

webxrsyskbd
Fabien Benetou 2 years ago
parent 16e72b5a23
commit ac94b9ab3c
  1. 63
      index.html

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>
<title>SpaSca : Spatial Scaffolding</title>
<head>
<!-- Suggestions? https://git.benetou.fr/utopiah/text-code-xr-engine/issues/ -->
@ -7,7 +8,8 @@
<script src='dependencies/aframe-html.js'></script>
<script src='dependencies/aframe-mirror.js'></script>
<script src='dependencies/aframe-troika-text.min.js'></script>
<script type="module" src='dependencies/immers-client.js'></script>
<!--<script type="module" src='dependencies/immers-client.js'></script>-->
<script type="module" src="https://cdn.jsdelivr.net/npm/immers-client/dist/destination.bundle.js"></script>
<!-- for input sharing -->
<script src='dependencies/peerjs.min.js'></script>
@ -53,19 +55,6 @@
</div>
<script type="module">
/*
1. Fetch and render friends list with online status and link to current location
2. Fetch and render one page of the user's activity feed
3. Send an outgoing text chat message
You should be able to find everything you need to do these on the following documentation pages:
https://immers-space.github.io/immers-client/ImmersHUD.html
https://immers-space.github.io/immers-client/ImmersClient.html
*/
// just text
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
@ -229,11 +218,54 @@ AFRAME.registerComponent('web-url', {
}
})
/*
See federation branch https://git.benetou.fr/utopiah/text-code-xr-engine/src/branch/federation
Started to learn deeper integration with :
1. Fetch and render friends list with online status and link to current location
immersClient.friendsList().then( r => r.map( u => {
console.log(u.profile.displayName);
if (u.profile.avatarImage) { console.log(u.profile.avatarImage) }
if (u.locationURL) { console.log(u.locationURL) }
if (u.locationName) { console.log(u.locationName) }
// unsure what is the difference between location and destination
} ) )
// could replace console.log() by addNewNote()
2. Fetch and render one page of the user's activity feed
immersClient.feed().then( console.log )
3. Send an outgoing text chat message
immersClient.sendChatMessage("msg", "public", ["otherutopiah[immers.space]"])
That can then be read via
immersClient.addEventListener("immers-client-new-message", console.log )
See results in https://git.benetou.fr/utopiah/text-code-xr-engine/issues/47 for answers
Note that functions can be comabined rather efficiently e.g
immersClient.addEventListener("immers-client-new-message", e => addNewNote(e.detail.message.messageHTML) )
immersClient.sendChatMessage("jxr loadPageRange(3,4)", "public")
assuming both are friends.
Documentation
https://immers-space.github.io/immers-client/ImmersHUD.html
https://immers-space.github.io/immers-client/ImmersClient.html
*/
var immersClient
setTimeout( _ => {
document.querySelector("immers-hud").immersClient.addEventListener("immers-client-connected", _ => {
immersClient = document.querySelector("immers-hud").immersClient
console.log(immersClient.profile.displayName, "connected")
//addNewNote(immersClient.profile.displayName+ " connected")
})
}, 1000)
/* not sure what's the right way... but timeout works, others don't.
@ -987,6 +1019,8 @@ AFRAME.registerComponent('pinchprimary', { // currently only 1 hand, the right o
//selectedElement = clone
selectedElement = getClosestTargetElement( event.detail.position )
// is it truly world position? See https://github.com/aframevr/aframe/issues/5182
setFeedbackHUD( AFRAME.utils.coordinates.stringify( event.detail.position ) )
// if close enough to a target among a list of potential targets, unselect previous target then select new
});
},
@ -1822,6 +1856,7 @@ function loadCodeFromPage(url="https://fabien.benetou.fr/Analysis/BeyondTheCaseA
<a-text target value="jxr loadPageRange(1,13)" position="0 1.35 -0.1" scale="0.1 0.1 0.1"></a-text>
<a-text target value="jxr loadCodeFromPage()" position="0 1.45 -0.1" scale="0.1 0.1 0.1"></a-text>
<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>
<!-- somehow disable hand interaction despite, according to the documentation, it should rely on world position -->
<a-troika-text value="SpaSca : Spatial Scaffolding" anchor="left" outline-width="5%" font="../content/ChakraPetch-Regular.ttf" position="-5.26197 6.54224 -1.81284"
scale="4 4 5" rotation="90 0 0" troika-text="outlineWidth: 0.01; strokeColor: #ffffff" material="flatShading: true; blending: additive; emissive: #c061cb"></a-troika-text>

Loading…
Cancel
Save