Last active
May 7, 2021 21:27
-
-
Save Utopiah/a0f917a785ce1a3d2b4ca98ec44c78c3 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* How to use this script : | |
To play with it "as is" try it in the console of your browser first. | |
If you do like and want to make it permanent then a bit of UI integration is needed | |
(e.g. could add an icon, chat command, etc). | |
That would be done by using https://hubs.mozilla.com/docs/hubs-cloud-custom-clients.html | |
So that your integration remains easy to merge and maintainable over time it is recommended to | |
touch Hubs Cloud code itself as little as possible. For example having separate components for | |
AFrame or React or both and loading them whenever required (e.g. in a specific room). | |
For discussion just the Hubs Cloud Discord server and channels #extensibility and #hubs-cloud | |
*/ | |
var yCamOffset = 1.6 | |
var attachCamInterval | |
var camHash = "vide" | |
var camEl = getFirstElementFromHash(camHash) | |
if (camEl){ | |
attachCamInterval = setInterval(attachCam, 100) | |
} else { | |
console.warn("You need to active your webcam first") | |
} | |
camEl.object3D.scale.setScalar(0.2) | |
var selfEl = AFRAME.scenes[0].querySelector("#avatar-rig") | |
var povCam = selfEl.querySelector("#avatar-pov-node") | |
function attachCam(){ attachObjToAvatar(camEl, selfEl) } | |
function attachObjToAvatar(obj, avatar){ | |
NAF.utils.getNetworkedEntity(obj).then(networkedEl => { | |
const mine = NAF.utils.isMine(networkedEl) | |
if (!mine) var owned = NAF.utils.takeOwnership(networkedEl) | |
networkedEl.object3D.position.copy( avatar.object3D.position ) | |
networkedEl.object3D.rotation.y = povCam.object3D.rotation.y + yCamOffset | |
networkedEl.object3D.rotation.x = 0 | |
networkedEl.object3D.rotation.z = 0 | |
networkedEl.object3D.position.y += 1.32 | |
}) | |
} | |
function getFirstElementFromHash(hash){ | |
var g = AFRAME.scenes[0].querySelectorAll("[media-loader]") | |
var matches = [] | |
for (let e of g){ | |
var m = e.components["media-loader"].attrValue.src.match(hash) | |
if (m && m.length) matches.push(e) | |
} | |
return matches[0] | |
} |
I suggest adding a slight offset to the webcam so that it doesn't glitch into your avatar:
networkedEl.object3D.position.z -= 0.05
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@ngarg1 no I only tried on hubs.mozilla.com and did work networked. I joined with another avatar who did see it cf https://twitter.com/utopiah/status/1257944507955412992 . Consequently assume if it works there it should work in more permissive custom environment.
In the example you give with person A and person B you have 2 ways to make it work :