Skip to content

Instantly share code, notes, and snippets.

@Utopiah
Last active May 7, 2021 21:27
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save Utopiah/a0f917a785ce1a3d2b4ca98ec44c78c3 to your computer and use it in GitHub Desktop.
Save Utopiah/a0f917a785ce1a3d2b4ca98ec44c78c3 to your computer and use it in GitHub Desktop.
/* 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]
}
@OldShakerhand
Copy link

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