diff --git a/src/components/image-plus.js b/src/components/image-plus.js index 08126054732c9808d8041d6a33fb4bf221134ccd..663b1cf6704ce33051a651d8e37741637c1d2189 100644 --- a/src/components/image-plus.js +++ b/src/components/image-plus.js @@ -70,10 +70,7 @@ AFRAME.registerComponent("image-plus", { schema: { src: { type: "string" }, - contentType: { type: "string" }, - - initialOffset: { default: { x: 0, y: 0, z: -1.5 } }, - reorientOnGrab: { default: false } + contentType: { type: "string" } }, _fit(w, h) { @@ -103,31 +100,11 @@ AFRAME.registerComponent("image-plus", { }); }, - _onGrab: (function() { - const q = new THREE.Quaternion(); - return function() { - if (this.data.reorientOnGrab) { - this.billboardTarget.getWorldQuaternion(q); - this.el.body.quaternion.copy(q); - } - }; - })(), - init() { - this._onGrab = this._onGrab.bind(this); - - this.el.addEventListener("grab-start", this._onGrab); - const material = new THREE.MeshBasicMaterial(); material.side = THREE.DoubleSide; material.transparent = true; this.el.getObject3D("mesh").material = material; - - const worldPos = new THREE.Vector3().copy(this.data.initialOffset); - this.billboardTarget = document.querySelector("#player-camera").object3D; - this.billboardTarget.localToWorld(worldPos); - this.el.object3D.position.copy(worldPos); - this.billboardTarget.getWorldQuaternion(this.el.object3D.quaternion); }, remove() { @@ -235,6 +212,9 @@ AFRAME.registerComponent("image-plus", { try { const url = this.data.src; const contentType = this.data.contentType; + if (!url) { + return; + } if (textureCache.has(url)) { const cacheItem = textureCache.get(url); diff --git a/src/components/offset-relative-to.js b/src/components/offset-relative-to.js index 82a90717ba22137ac38e045a893804f60a183d3b..13bb938154e1203f887e8c2c9aacc13a85260160 100644 --- a/src/components/offset-relative-to.js +++ b/src/components/offset-relative-to.js @@ -37,6 +37,8 @@ AFRAME.registerComponent("offset-relative-to", { obj.parent.worldToLocal(offsetVector); } obj.position.copy(offsetVector); + // TODO: Hack here to deal with the fact that the rotation component mutates ordering, and we network rotation without sending ordering information + obj.rotation.order = "YXZ"; target.getWorldQuaternion(obj.quaternion); if (this.data.selfDestruct) { if (this.data.on) { diff --git a/src/utils/media-utils.js b/src/utils/media-utils.js index 390d9067bf376d801c8ba2466db5fac812139357..b88ae97611e19518b7f237423fd475bc730f9059 100644 --- a/src/utils/media-utils.js +++ b/src/utils/media-utils.js @@ -21,17 +21,22 @@ export const resolveFarsparkUrl = async url => { const fetchContentType = async url => fetch(url, { method: "HEAD" }).then(r => r.headers.get("content-type")); let interactableId = 0; +const offset = { x: 0, y: 0, z: -1.5 }; export const spawnNetworkedImage = (src, contentType) => { const scene = AFRAME.scenes[0]; const image = document.createElement("a-entity"); image.id = "interactable-image-" + interactableId++; image.setAttribute("networked", { template: "#interactable-image" }); + image.setAttribute("offset-relative-to", { + target: "#player-camera", + offset: offset, + selfDestruct: true + }); image.setAttribute("image-plus", { src, contentType }); scene.appendChild(image); return image; }; -const offset = { x: 0, y: 0, z: -1.5 }; export const spawnNetworkedInteractable = src => { const scene = AFRAME.scenes[0]; const model = document.createElement("a-entity");