From e0dbea651294ca0d41ecbf9515e5cfd66ec16b68 Mon Sep 17 00:00:00 2001
From: netpro2k <netpro2k@gmail.com>
Date: Tue, 3 Jul 2018 19:55:43 -0700
Subject: [PATCH] Fix issues with orientation of networked images
---
src/components/image-plus.js | 28 ++++------------------------
src/components/offset-relative-to.js | 2 ++
src/utils/media-utils.js | 7 ++++++-
3 files changed, 12 insertions(+), 25 deletions(-)
diff --git a/src/components/image-plus.js b/src/components/image-plus.js
index 081260547..663b1cf67 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 82a90717b..13bb93815 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 390d9067b..b88ae9761 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");
--
GitLab