Fix issues with orientation of networked images

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);

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) {

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");