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]
}
@Utopiah
Copy link
Author

Utopiah commented May 11, 2020

@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 :

  1. the script is run on person A device and moves both cameras. For that you have to modify the targets and avatars entities.
  2. the script is run on A and B devices. For that you can keep the avatar entity but you have to clarify the hash of the cameras since they most likely collide.

@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