diff --git a/src/hub.js b/src/hub.js index 65f54135775f6b688a2e1aa306bab437b376443b..e9dcad31d203389e1ee09bf54a5fa9809c2101b6 100644 --- a/src/hub.js +++ b/src/hub.js @@ -304,8 +304,25 @@ const onReady = async () => { NAF.connection.entities.completeSync(ev.detail.clientId); }); + const offset = { x: 0, y: 0, z: -1.5 }; + const playerCamera = document.querySelector("#player-camera").object3D; + const spawnPos = new THREE.Vector3(); + const spawnRot = new THREE.Quaternion(); + const spawnMediaInfrontOfPlayer = url => { + const entity = addMedia(url, true); + entity.addEventListener("loaded", () => { + console.log("body loaded"); + spawnPos.copy(offset); + playerCamera.localToWorld(spawnPos); + playerCamera.getWorldQuaternion(spawnRot); + console.log(spawnPos, spawnRot); + entity.body.position.copy(spawnPos); + entity.body.quaternion.copy(spawnRot); + }); + }; + scene.addEventListener("add_media", e => { - addMedia(e.detail); + spawnMediaInfrontOfPlayer(e.detail); }); if (qsTruthy("mediaTools")) { @@ -314,7 +331,7 @@ const onReady = async () => { const imgUrl = e.clipboardData.getData("text"); console.log("Pasted: ", imgUrl, e); - addMedia(imgUrl); + spawnMediaInfrontOfPlayer(imgUrl); }); document.addEventListener("dragover", e => { diff --git a/src/utils/media-utils.js b/src/utils/media-utils.js index 5c0efb2ba378bb13a667e2614d04b6c8a4f1874a..93ad430f74db8ac0ad6863a0d7da1b668b360485 100644 --- a/src/utils/media-utils.js +++ b/src/utils/media-utils.js @@ -18,7 +18,6 @@ export const resolveFarsparkUrl = async url => { }; let interactableId = 0; -const offset = { x: 0, y: 0, z: -1.5 }; export const addMedia = src => { const scene = AFRAME.scenes[0]; @@ -26,11 +25,6 @@ export const addMedia = src => { entity.id = "interactable-media-" + interactableId++; entity.setAttribute("networked", { template: "#interactable-media" }); entity.setAttribute("media-loader", { src }); - entity.setAttribute("offset-relative-to", { - target: "#player-camera", - offset: offset, - selfDestruct: true - }); scene.appendChild(entity); return entity; };