diff --git a/Jenkinsfile b/Jenkinsfile
index 18a2532f8236797c5f074eadcd9b6c160a9ef22a..bf031771306c10109afbc40a165d66b40b27e698 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -1,3 +1,19 @@
+import groovy.json.JsonOutput
+
+// From https://issues.jenkins-ci.org/browse/JENKINS-44231
+
+// Given arbitrary string returns a strongly escaped shell string literal.
+// I.e. it will be in single quotes which turns off interpolation of $(...), etc.
+// E.g.: 1'2\3\'4 5"6 (groovy string) -> '1'\''2\3\'\''4 5"6' (groovy string which can be safely pasted into shell command).
+def shellString(s) {
+ // Replace ' with '\'' (https://unix.stackexchange.com/a/187654/260156). Then enclose with '...'.
+ // 1) Why not replace \ with \\? Because '...' does not treat backslashes in a special way.
+ // 2) And why not use ANSI-C quoting? I.e. we could replace ' with \'
+ // and enclose using $'...' (https://stackoverflow.com/a/8254156/4839573).
+ // Because ANSI-C quoting is not yet supported by Dash (default shell in Ubuntu & Debian) (https://unix.stackexchange.com/a/371873).
+ '\'' + s.replace('\'', '\'\\\'\'') + '\''
+}
+
pipeline {
agent any
@@ -6,9 +22,41 @@ pipeline {
}
stages {
+ stage('pre-build') {
+ steps {
+ sh 'rm -rf ./build ./tmp'
+ }
+ }
+
stage('build') {
steps {
- build 'reticulum'
+ script {
+ def baseAssetsPath = env.BASE_ASSETS_PATH
+ def assetBundleServer = env.ASSET_BUNDLE_SERVER
+ def targetS3Url = env.TARGET_S3_URL
+ def smokeURL = env.SMOKE_URL
+ def slackURL = env.SLACK_URL
+
+ def habCommand = "sudo /usr/bin/hab-docker-studio -k mozillareality run /bin/bash scripts/hab-build-and-push.sh ${baseAssetsPath} ${assetBundleServer} ${targetS3Url} ${env.BUILD_NUMBER}"
+ sh "/usr/bin/script --return -c ${shellString(habCommand)} /dev/null"
+
+ def gitMessage = sh(returnStdout: true, script: "git log -n 1 --pretty=format:'[%an] %s'").trim()
+ def gitSha = sh(returnStdout: true, script: "git log -n 1 --pretty=format:'%h'").trim()
+ def text = (
+ "*<http://localhost:8080/job/${env.JOB_NAME}/${env.BUILD_NUMBER}|#${env.BUILD_NUMBER}>* *${env.JOB_NAME}* " +
+ "<https://github.com/mozilla/hubs/commit/$gitSha|$gitSha> " +
+ "Hubs: ```${gitSha} ${gitMessage}```\n" +
+ "<${smokeURL}?require_version=${env.BUILD_NUMBER}|Smoke Test> - to push:\n" +
+ "`/mr hubs deploy ${targetS3Url}`"
+ )
+ def payload = 'payload=' + JsonOutput.toJson([
+ text : text,
+ channel : "#mr-builds",
+ username : "buildbot",
+ icon_emoji: ":gift:"
+ ])
+ sh "curl -X POST --data-urlencode ${shellString(payload)} ${slackURL}"
+ }
}
}
}
diff --git a/package.json b/package.json
index cae88c47526aef2ed515ceaa4fda82d1a2812622..744b8d81544a7a5fafee47af0f431b6753e7c665 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
"aframe-input-mapping-component": "https://github.com/mozillareality/aframe-input-mapping-component#hubs/master",
"aframe-motion-capture-components": "https://github.com/mozillareality/aframe-motion-capture-components#1ca616fa67b627e447b23b35a09da175d8387668",
"aframe-physics-extras": "^0.1.3",
- "aframe-physics-system": "github:donmccurdy/aframe-physics-system",
+ "aframe-physics-system": "https://github.com/mozillareality/aframe-physics-system#hubs/master",
"aframe-rounded": "^1.0.3",
"aframe-slice9-component": "^1.0.0",
"aframe-teleport-controls": "https://github.com/mozillareality/aframe-teleport-controls#hubs/master",
@@ -87,8 +87,10 @@
"selfsigned": "^1.10.2",
"shelljs": "^0.8.1",
"style-loader": "^0.20.2",
+ "url-loader": "^1.0.1",
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
- "webpack-dev-server": "^3.0.0"
+ "webpack-dev-server": "^3.0.0",
+ "worker-loader": "^2.0.0"
}
}
diff --git a/scripts/build_local_reticulum.sh b/scripts/build_local_reticulum.sh
deleted file mode 100755
index 9a19f9f202b688b27213b0478f9e1a14e67d2620..0000000000000000000000000000000000000000
--- a/scripts/build_local_reticulum.sh
+++ /dev/null
@@ -1,7 +0,0 @@
-#!/usr/bin/env bash
-
-if [ ! -e ../reticulum ]; then
- echo "This script assumes reticulum is checked out in a sibling to this folder."
-fi
-
-rm -rf ../reticulum/priv/static ; GENERATE_SMOKE_TESTS=true BASE_ASSETS_PATH=https://hubs.local:4000/ yarn build -- --output-path ../reticulum/priv/static
diff --git a/scripts/hab-build-and-push.sh b/scripts/hab-build-and-push.sh
new file mode 100755
index 0000000000000000000000000000000000000000..2f04c0a26fd57505bfd508de05b56e920e947b37
--- /dev/null
+++ b/scripts/hab-build-and-push.sh
@@ -0,0 +1,36 @@
+#!/bin/bash
+
+export BASE_ASSETS_PATH=$1
+export ASSET_BUNDLE_SERVER=$2
+export TARGET_S3_URL=$3
+export BUILD_VERSION=$4
+
+# To build + push to S3 run:
+# hab studio run "bash scripts/hab-build-and-push.sh"
+
+# On exit, need to make all files writable so CI can clean on next build
+trap 'chmod -R a+rw .' EXIT
+
+DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+
+pushd "$DIR/.."
+
+mkdir -p .yarn
+mkdir -p node_modules
+mkdir -p build
+
+# Yarn expects /usr/local/share
+# https://github.com/yarnpkg/yarn/issues/4628
+mkdir -p /usr/local/share
+
+rm /usr/bin/env
+ln -s "$(hab pkg path core/coreutils)/bin/env" /usr/bin/env
+hab pkg install -b core/coreutils core/bash core/node core/yarn core/git core/aws-cli
+
+yarn install --cache-folder .yarn
+GENERATE_SMOKE_TESTS=true yarn build --output-path build
+mkdir build/pages
+mv build/*.html build/pages
+
+aws s3 sync --acl public-read --cache-control "max-age=31556926" build/assets "$TARGET_S3_URL/assets"
+aws s3 sync --acl public-read --cache-control "no-cache" --delete build/pages "$TARGET_S3_URL/pages/latest"
diff --git a/scripts/run-local-reticulum.sh b/scripts/run-local-reticulum.sh
new file mode 100644
index 0000000000000000000000000000000000000000..976d858cd8dd7adea49ae587995759c431420182
--- /dev/null
+++ b/scripts/run-local-reticulum.sh
@@ -0,0 +1,2 @@
+#!/usr/bin/env bash
+BASE_ASSETS_PATH=https://hubs.local:8080/ DEV_RETICULUM_SERVER=hubs.local:4000 yarn start
diff --git a/src/assets/images/media-error.gif b/src/assets/images/media-error.gif
new file mode 100644
index 0000000000000000000000000000000000000000..825bb624f1770088bf75eaa515d2e612e61adae9
Binary files /dev/null and b/src/assets/images/media-error.gif differ
diff --git a/src/assets/stylesheets/2d-hud.scss b/src/assets/stylesheets/2d-hud.scss
index 263569b58b04e599868e601cd0c960cee543c843..475e4615923a6e1359984b1c6ea9be72e9242947 100644
--- a/src/assets/stylesheets/2d-hud.scss
+++ b/src/assets/stylesheets/2d-hud.scss
@@ -1,3 +1,5 @@
+@import 'shared';
+
:local(.container) {
position: absolute;
top: 10px;
@@ -37,9 +39,24 @@
width: 40px;
height: 40px;
background-size: 100%;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
cursor: pointer;
}
+:local(.addMediaButton) {
+ position: absolute;
+ top: 90px;
+ background-color: #404040;
+}
+
+:local(.iconButton.small) {
+ width: 30px;
+ height: 30px;
+}
+
:local(.iconButton.large) {
width: 80px;
height: 80px;
diff --git a/src/assets/stylesheets/info-dialog.scss b/src/assets/stylesheets/info-dialog.scss
index 690db56c83a0fee301b0bb95952f6a1622ec9140..58b2259fc71f0097d8f2b032b1fcc9bfa5305251 100644
--- a/src/assets/stylesheets/info-dialog.scss
+++ b/src/assets/stylesheets/info-dialog.scss
@@ -79,7 +79,7 @@
}
}
-.invite-form {
+.invite-form, .add-media-form {
display: flex;
flex-direction: column;
align-items: center;
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index 79d11599544849a83f9982617dafddd3bb6c268a..1f8ae6a1b0986b0576ad3dd567b1fc8bb96c1d86 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -40,6 +40,7 @@
"exit.subtitle.closed": "This room is no longer available.",
"exit.subtitle.full": "This room is full, please try again later.",
"exit.subtitle.connect_error": "Unable to connect to this room, please try again later.",
+ "exit.subtitle.version_mismatch": "The version you deployed is not available yet. Your browser will refresh in 5 seconds.",
"autoexit.title": "Auto-ending session in ",
"autoexit.title_units": " seconds",
"autoexit.subtitle": "You have started another session.",
diff --git a/src/components/auto-box-collider.js b/src/components/auto-box-collider.js
new file mode 100644
index 0000000000000000000000000000000000000000..220ad92ed83ba506aa63f70dc2ee24e087ce61db
--- /dev/null
+++ b/src/components/auto-box-collider.js
@@ -0,0 +1,49 @@
+AFRAME.registerComponent("auto-box-collider", {
+ schema: {
+ resize: { default: false },
+ resizeLength: { default: 0.5 }
+ },
+
+ init() {
+ this.onLoaded = this.onLoaded.bind(this);
+ this.el.addEventListener("model-loaded", this.onLoaded);
+ },
+
+ remove() {
+ this.el.removeEventListener("model-loaded", this.onLoaded);
+ },
+
+ onLoaded() {
+ const rotation = this.el.object3D.rotation.clone();
+ this.el.object3D.rotation.set(0, 0, 0);
+ const { min, max } = new THREE.Box3().setFromObject(this.el.object3DMap.mesh);
+ const halfExtents = new THREE.Vector3()
+ .addVectors(min.clone().negate(), max)
+ .multiplyScalar(0.5 / this.el.object3D.scale.x);
+ this.el.setAttribute("shape", {
+ shape: "box",
+ halfExtents: halfExtents,
+ offset: new THREE.Vector3(0, halfExtents.y, 0)
+ });
+ if (this.data.resize) {
+ this.resize(min, max);
+ }
+ this.el.object3D.rotation.copy(rotation);
+ this.el.removeAttribute("auto-box-collider");
+ },
+
+ // Adjust the scale such that the object fits within a box of a specified size.
+ resize(min, max) {
+ const dX = Math.abs(max.x - min.x);
+ const dY = Math.abs(max.y - min.y);
+ const dZ = Math.abs(max.z - min.z);
+ const lengthOfLongestComponent = Math.max(dX, dY, dZ);
+ const correctiveFactor = this.data.resizeLength / lengthOfLongestComponent;
+ const scale = this.el.object3D.scale;
+ this.el.setAttribute("scale", {
+ x: scale.x * correctiveFactor,
+ y: scale.y * correctiveFactor,
+ z: scale.z * correctiveFactor
+ });
+ }
+});
diff --git a/src/components/auto-scale-cannon-physics-body.js b/src/components/auto-scale-cannon-physics-body.js
new file mode 100644
index 0000000000000000000000000000000000000000..1633dffef17c70db520a7e8edb7ef3c819734970
--- /dev/null
+++ b/src/components/auto-scale-cannon-physics-body.js
@@ -0,0 +1,31 @@
+function almostEquals(epsilon, u, v) {
+ return Math.abs(u.x - v.x) < epsilon && Math.abs(u.y - v.y) < epsilon && Math.abs(u.z - v.z) < epsilon;
+}
+
+AFRAME.registerComponent("auto-scale-cannon-physics-body", {
+ dependencies: ["body"],
+ schema: {
+ equalityEpsilon: { default: 0.001 },
+ debounceDelay: { default: 100 }
+ },
+
+ init() {
+ this.body = this.el.components["body"];
+ this.prevScale = this.el.object3D.scale.clone();
+ this.nextUpdateTime = -1;
+ },
+
+ tick(t) {
+ const scale = this.el.object3D.scale;
+ // Note: This only checks if the LOCAL scale of the object3D changes.
+ if (!almostEquals(this.data.equalityEpsilon, scale, this.prevScale)) {
+ this.prevScale.copy(scale);
+ this.nextUpdateTime = t + this.data.debounceDelay;
+ }
+
+ if (this.nextUpdateTime > 0 && t > this.nextUpdateTime) {
+ this.nextUpdateTime = -1;
+ this.body.updateCannonScale();
+ }
+ }
+});
diff --git a/src/components/character-controller.js b/src/components/character-controller.js
index f32debe666107ccfb6144f94e7ca5afe3f9f4168..02322f1a48a7bd6c1f1c137f5ba3e248ff885f5c 100644
--- a/src/components/character-controller.js
+++ b/src/components/character-controller.js
@@ -18,8 +18,8 @@ AFRAME.registerComponent("character-controller", {
},
init: function() {
- this.navGroup;
- this.navNode;
+ this.navGroup = null;
+ this.navNode = null;
this.velocity = new THREE.Vector3(0, 0, 0);
this.accelerationInput = new THREE.Vector3(0, 0, 0);
this.pendingSnapRotationMatrix = new THREE.Matrix4();
@@ -160,7 +160,7 @@ AFRAME.registerComponent("character-controller", {
setPositionOnNavMesh: function(startPosition, endPosition, object3D) {
const nav = this.el.sceneEl.systems.nav;
if (nav.navMesh) {
- if (!this.navGroup) {
+ if (this.navGroup == null) {
this.navGroup = nav.getGroup(endPosition);
}
this.navNode = this.navNode || nav.getNode(endPosition, this.navGroup);
diff --git a/src/components/gltf-model-plus.js b/src/components/gltf-model-plus.js
index 55d62b10e997a943d39c6e593cb35256c67b0e6c..b1195922467eb57dd6b536e688b147c164e502ea 100644
--- a/src/components/gltf-model-plus.js
+++ b/src/components/gltf-model-plus.js
@@ -74,16 +74,34 @@ function cloneGltf(gltf) {
return clone;
}
-const inflateEntities = function(parentEl, node, gltfPath) {
- // setObject3D mutates the node's parent, so we have to copy
- const children = node.children.slice(0);
+/// Walks the tree of three.js objects starting at the given node, using the GLTF data
+/// and template data to construct A-Frame entities and components when necessary.
+/// (It's unnecessary to construct entities for subtrees that have no component data
+/// or templates associated with any of their nodes.)
+///
+/// Returns the A-Frame entity associated with the given node, if one was constructed.
+const inflateEntities = function(node, templates, gltfPath) {
+ // inflate subtrees first so that we can determine whether or not this node needs to be inflated
+ const childEntities = [];
+ const children = node.children.slice(0); // setObject3D mutates the node's parent, so we have to copy
+ for (const child of children) {
+ const el = inflateEntities(child, templates, gltfPath);
+ if (el) {
+ childEntities.push(el);
+ }
+ }
+
+ const nodeHasBehavior = node.userData.components || node.name in templates;
+ if (!nodeHasBehavior && !childEntities.length) {
+ return null; // we don't need an entity for this node
+ }
const el = document.createElement("a-entity");
+ el.append.apply(el, childEntities);
// Remove invalid CSS class name characters.
const className = (node.name || node.uuid).replace(/[^\w-]/g, "");
el.classList.add(className);
- parentEl.appendChild(el);
// AFRAME rotation component expects rotations in YXZ, convert it
if (node.rotation.order !== "YXZ") {
@@ -138,15 +156,11 @@ const inflateEntities = function(parentEl, node, gltfPath) {
}
}
- children.forEach(childNode => {
- inflateEntities(el, childNode, gltfPath);
- });
-
return el;
};
-function attachTemplate(root, { selector, templateRoot }) {
- const targetEls = root.querySelectorAll(selector);
+function attachTemplate(root, name, templateRoot) {
+ const targetEls = root.querySelectorAll("." + name);
for (const el of targetEls) {
const root = templateRoot.cloneNode(true);
// Merge root element attributes with the target element
@@ -168,30 +182,15 @@ function nextTick() {
}
function cachedLoadGLTF(src, preferredTechnique, onProgress) {
- return new Promise((resolve, reject) => {
- // Load the gltf model from the cache if it exists.
- if (GLTFCache[src]) {
- // Use a cloned copy of the cached model.
- resolve(cloneGltf(GLTFCache[src]));
- } else {
- // Otherwise load the new gltf model.
+ // Load the gltf model from the cache if it exists.
+ if (!GLTFCache[src]) {
+ GLTFCache[src] = new Promise((resolve, reject) => {
const gltfLoader = new THREE.GLTFLoader();
gltfLoader.preferredTechnique = preferredTechnique;
-
- gltfLoader.load(
- src,
- model => {
- if (!GLTFCache[src]) {
- // Store a cloned copy of the gltf model.
- GLTFCache[src] = cloneGltf(model);
- }
- resolve(model);
- },
- onProgress,
- reject
- );
- }
- });
+ gltfLoader.load(src, resolve, onProgress, reject);
+ });
+ }
+ return GLTFCache[src].then(cloneGltf);
}
/**
@@ -203,11 +202,11 @@ function cachedLoadGLTF(src, preferredTechnique, onProgress) {
AFRAME.registerComponent("gltf-model-plus", {
schema: {
src: { type: "string" },
- inflate: { default: false },
- preferredTechnique: { default: AFRAME.utils.device.isMobile() ? "KHR_materials_unlit" : "pbrMetallicRoughness" }
+ inflate: { default: false }
},
init() {
+ this.preferredTechnique = AFRAME.utils.device.isMobile() ? "KHR_materials_unlit" : "pbrMetallicRoughness";
this.loadTemplates();
},
@@ -216,13 +215,11 @@ AFRAME.registerComponent("gltf-model-plus", {
},
loadTemplates() {
- this.templates = [];
- this.el.querySelectorAll(":scope > template").forEach(templateEl =>
- this.templates.push({
- selector: templateEl.getAttribute("data-selector"),
- templateRoot: document.importNode(templateEl.firstElementChild || templateEl.content.firstElementChild, true)
- })
- );
+ this.templates = {};
+ this.el.querySelectorAll(":scope > template").forEach(templateEl => {
+ const root = document.importNode(templateEl.firstElementChild || templateEl.content.firstElementChild, true);
+ this.templates[templateEl.getAttribute("data-name")] = root;
+ });
},
async applySrc(src) {
@@ -245,7 +242,7 @@ AFRAME.registerComponent("gltf-model-plus", {
}
const gltfPath = THREE.LoaderUtils.extractUrlBase(src);
- const model = await cachedLoadGLTF(src, this.data.preferredTechnique);
+ const model = await cachedLoadGLTF(src, this.preferredTechnique);
// If we started loading something else already
// TODO: there should be a way to cancel loading instead
@@ -260,17 +257,20 @@ AFRAME.registerComponent("gltf-model-plus", {
this.el.setObject3D("mesh", this.model);
if (this.data.inflate) {
- this.inflatedEl = inflateEntities(this.el, this.model, gltfPath);
+ this.inflatedEl = inflateEntities(this.model, this.templates, gltfPath);
+ this.el.appendChild(this.inflatedEl);
// TODO: Still don't fully understand the lifecycle here and how it differs between browsers, we should dig in more
// Wait one tick for the appended custom elements to be connected before attaching templates
await nextTick();
if (src != this.lastSrc) return; // TODO: there must be a nicer pattern for this
- this.templates.forEach(attachTemplate.bind(null, this.el));
+ for (const name in this.templates) {
+ attachTemplate(this.el, name, this.templates[name]);
+ }
}
this.el.emit("model-loaded", { format: "gltf", model: this.model });
} catch (e) {
- console.error("Failed to load glTF model", e.message, this);
+ console.error("Failed to load glTF model", e, this);
this.el.emit("model-error", { format: "gltf", src });
}
},
diff --git a/src/components/ik-controller.js b/src/components/ik-controller.js
index 3b2f3026a56ce64afb9460c6c6de0f37ccc6d969..1bf9e71de656aa9b4972cdf59e534af78599493b 100644
--- a/src/components/ik-controller.js
+++ b/src/components/ik-controller.js
@@ -39,14 +39,14 @@ function findIKRoot(entity) {
*/
AFRAME.registerComponent("ik-controller", {
schema: {
- leftEye: { type: "string", default: ".LeftEye" },
- rightEye: { type: "string", default: ".RightEye" },
- head: { type: "string", default: ".Head" },
- neck: { type: "string", default: ".Neck" },
- leftHand: { type: "string", default: ".LeftHand" },
- rightHand: { type: "string", default: ".RightHand" },
- chest: { type: "string", default: ".Chest" },
- hips: { type: "string", default: ".Hips" },
+ leftEye: { type: "string", default: "LeftEye" },
+ rightEye: { type: "string", default: "RightEye" },
+ head: { type: "string", default: "Head" },
+ neck: { type: "string", default: "Neck" },
+ leftHand: { type: "string", default: "LeftHand" },
+ rightHand: { type: "string", default: "RightHand" },
+ chest: { type: "string", default: "Chest" },
+ hips: { type: "string", default: "Hips" },
rotationSpeed: { default: 5 }
},
@@ -86,46 +86,46 @@ AFRAME.registerComponent("ik-controller", {
update(oldData) {
if (this.data.leftEye !== oldData.leftEye) {
- this.leftEye = this.el.querySelector(this.data.leftEye);
+ this.leftEye = this.el.object3D.getObjectByName(this.data.leftEye);
}
if (this.data.rightEye !== oldData.rightEye) {
- this.rightEye = this.el.querySelector(this.data.rightEye);
+ this.rightEye = this.el.object3D.getObjectByName(this.data.rightEye);
}
if (this.data.head !== oldData.head) {
- this.head = this.el.querySelector(this.data.head);
+ this.head = this.el.object3D.getObjectByName(this.data.head);
}
if (this.data.neck !== oldData.neck) {
- this.neck = this.el.querySelector(this.data.neck);
+ this.neck = this.el.object3D.getObjectByName(this.data.neck);
}
if (this.data.leftHand !== oldData.leftHand) {
- this.leftHand = this.el.querySelector(this.data.leftHand);
+ this.leftHand = this.el.object3D.getObjectByName(this.data.leftHand);
}
if (this.data.rightHand !== oldData.rightHand) {
- this.rightHand = this.el.querySelector(this.data.rightHand);
+ this.rightHand = this.el.object3D.getObjectByName(this.data.rightHand);
}
if (this.data.chest !== oldData.chest) {
- this.chest = this.el.querySelector(this.data.chest);
+ this.chest = this.el.object3D.getObjectByName(this.data.chest);
}
if (this.data.hips !== oldData.hips) {
- this.hips = this.el.querySelector(this.data.hips);
+ this.hips = this.el.object3D.getObjectByName(this.data.hips);
}
// Set middleEye's position to be right in the middle of the left and right eyes.
- this.middleEyePosition.addVectors(this.leftEye.object3D.position, this.rightEye.object3D.position);
+ this.middleEyePosition.addVectors(this.leftEye.position, this.rightEye.position);
this.middleEyePosition.divideScalar(2);
this.middleEyeMatrix.makeTranslation(this.middleEyePosition.x, this.middleEyePosition.y, this.middleEyePosition.z);
this.invMiddleEyeToHead = this.middleEyeMatrix.getInverse(this.middleEyeMatrix);
this.invHipsToHeadVector
- .addVectors(this.chest.object3D.position, this.neck.object3D.position)
- .add(this.head.object3D.position)
+ .addVectors(this.chest.position, this.neck.position)
+ .add(this.head.position)
.negate();
},
@@ -162,35 +162,30 @@ AFRAME.registerComponent("ik-controller", {
// Then position the hips such that the head is aligned with headTransform
// (which positions middleEye in line with the hmd)
- hips.object3D.position.setFromMatrixPosition(headTransform).add(invHipsToHeadVector);
+ hips.position.setFromMatrixPosition(headTransform).add(invHipsToHeadVector);
// Animate the hip rotation to follow the Y rotation of the camera with some damping.
cameraYRotation.setFromRotationMatrix(cameraForward, "YXZ");
cameraYRotation.x = 0;
cameraYRotation.z = 0;
cameraYQuaternion.setFromEuler(cameraYRotation);
- Quaternion.slerp(
- hips.object3D.quaternion,
- cameraYQuaternion,
- hips.object3D.quaternion,
- this.data.rotationSpeed * dt / 1000
- );
+ Quaternion.slerp(hips.quaternion, cameraYQuaternion, hips.quaternion, this.data.rotationSpeed * dt / 1000);
// Take the head orientation computed from the hmd, remove the Y rotation already applied to it by the hips,
// and apply it to the head
- invHipsQuaternion.copy(hips.object3D.quaternion).inverse();
- head.object3D.quaternion.setFromRotationMatrix(headTransform).premultiply(invHipsQuaternion);
+ invHipsQuaternion.copy(hips.quaternion).inverse();
+ head.quaternion.setFromRotationMatrix(headTransform).premultiply(invHipsQuaternion);
- hips.object3D.updateMatrix();
- rootToChest.multiplyMatrices(hips.object3D.matrix, chest.object3D.matrix);
+ hips.updateMatrix();
+ rootToChest.multiplyMatrices(hips.matrix, chest.matrix);
invRootToChest.getInverse(rootToChest);
this.updateHand(this.hands.left, leftHand, leftController);
this.updateHand(this.hands.right, rightHand, rightController);
},
- updateHand(handState, hand, controller) {
- const handObject3D = hand.object3D;
+ updateHand(handState, handObject3D, controller) {
+ const hand = handObject3D.el;
const handMatrix = handObject3D.matrix;
const controllerObject3D = controller.object3D;
diff --git a/src/components/image-plus.js b/src/components/image-plus.js
new file mode 100644
index 0000000000000000000000000000000000000000..744020534a6d9f5f6924ea12084572d4eb325109
--- /dev/null
+++ b/src/components/image-plus.js
@@ -0,0 +1,248 @@
+import GIFWorker from "../workers/gifparsing.worker.js";
+import errorImageSrc from "!!url-loader!../assets/images/media-error.gif";
+
+class GIFTexture extends THREE.Texture {
+ constructor(frames, delays, disposals) {
+ super(document.createElement("canvas"));
+ this.image.width = frames[0].width;
+ this.image.height = frames[0].height;
+
+ this._ctx = this.image.getContext("2d");
+
+ this.generateMipmaps = false;
+ this.isVideoTexture = true;
+ this.minFilter = THREE.NearestFilter;
+
+ this.frames = frames;
+ this.delays = delays;
+ this.disposals = disposals;
+
+ this.frame = 0;
+ this.frameStartTime = Date.now();
+ }
+
+ update() {
+ if (!this.frames || !this.delays || !this.disposals) return;
+ const now = Date.now();
+ if (now - this.frameStartTime > this.delays[this.frame]) {
+ if (this.disposals[this.frame] === 2) {
+ this._ctx.clearRect(0, 0, this.image.width, this.image.width);
+ }
+ this.frame = (this.frame + 1) % this.frames.length;
+ this.frameStartTime = now;
+ this._ctx.drawImage(this.frames[this.frame], 0, 0, this.image.width, this.image.height);
+ this.needsUpdate = true;
+ }
+ }
+}
+
+/**
+ * Create video element to be used as a texture.
+ *
+ * @param {string} src - Url to a video file.
+ * @returns {Element} Video element.
+ */
+function createVideoEl(src) {
+ const videoEl = document.createElement("video");
+ videoEl.setAttribute("playsinline", "");
+ videoEl.setAttribute("webkit-playsinline", "");
+ videoEl.autoplay = true;
+ videoEl.loop = true;
+ videoEl.crossOrigin = "anonymous";
+ videoEl.src = src;
+ return videoEl;
+}
+
+const textureLoader = new THREE.TextureLoader();
+textureLoader.setCrossOrigin("anonymous");
+
+const textureCache = new Map();
+
+const errorImage = new Image();
+errorImage.src = errorImageSrc;
+const errorTexture = new THREE.Texture(errorImage);
+errorTexture.magFilter = THREE.NearestFilter;
+errorImage.onload = () => {
+ errorTexture.needsUpdate = true;
+};
+
+AFRAME.registerComponent("image-plus", {
+ dependencies: ["geometry"],
+
+ schema: {
+ src: { type: "string" },
+ contentType: { type: "string" }
+ },
+
+ _fit(w, h) {
+ const ratio = (h || 1.0) / (w || 1.0);
+ const geo = this.el.geometry;
+ let width, height;
+ if (geo && geo.width) {
+ if (geo.height && ratio > 1) {
+ width = geo.width / ratio;
+ } else {
+ height = geo.height * ratio;
+ }
+ } else if (geo && geo.height) {
+ width = geo.width / ratio;
+ } else {
+ width = Math.min(1.0, 1.0 / ratio);
+ height = Math.min(1.0, ratio);
+ }
+ this.el.setAttribute("geometry", { width, height });
+ this.el.setAttribute("shape", {
+ shape: "box",
+ halfExtents: {
+ x: width / 2,
+ y: height / 2,
+ z: 0.05
+ }
+ });
+ },
+
+ init() {
+ const material = new THREE.MeshBasicMaterial();
+ material.side = THREE.DoubleSide;
+ material.transparent = true;
+ this.el.getObject3D("mesh").material = material;
+ },
+
+ remove() {
+ const material = this.el.getObject3D("mesh").material;
+ const texture = material.map;
+
+ if (texture === errorTexture) return;
+
+ const url = texture.image.src;
+ const cacheItem = textureCache.get(url);
+ cacheItem.count--;
+ if (cacheItem.count <= 0) {
+ // Unload the video element to prevent it from continuing to play in the background
+ if (texture.image instanceof HTMLVideoElement) {
+ const video = texture.image;
+ video.pause();
+ video.src = "";
+ video.load();
+ }
+
+ texture.dispose();
+
+ // THREE never lets go of material refs, long running PR HERE https://github.com/mrdoob/three.js/pull/12464
+ // Mitigate the damage a bit by at least breaking the image ref so Image/Video elements can be freed
+ // TODO: If/when THREE gets fixed, we should be able to safely remove this
+ delete texture.image;
+
+ textureCache.delete(url);
+ }
+ },
+
+ async loadGIF(url) {
+ return new Promise((resolve, reject) => {
+ // TODO: pool workers
+ const worker = new GIFWorker();
+ worker.onmessage = e => {
+ const [success, frames, delays, disposals] = e.data;
+ if (!success) {
+ reject(`error loading gif: ${e.data[1]}`);
+ return;
+ }
+
+ let loadCnt = 0;
+ for (let i = 0; i < frames.length; i++) {
+ const img = new Image();
+ img.onload = e => {
+ loadCnt++;
+ frames[i] = e.target;
+ if (loadCnt === frames.length) {
+ const texture = new GIFTexture(frames, delays, disposals);
+ texture.image.src = url;
+ resolve(texture);
+ }
+ };
+ img.src = frames[i];
+ }
+ };
+ fetch(url, { mode: "cors" })
+ .then(r => r.arrayBuffer())
+ .then(rawImageData => {
+ worker.postMessage(rawImageData, [rawImageData]);
+ })
+ .catch(reject);
+ });
+ },
+
+ loadVideo(url) {
+ return new Promise((resolve, reject) => {
+ const videoEl = createVideoEl(url);
+
+ const texture = new THREE.VideoTexture(videoEl);
+ texture.minFilter = THREE.LinearFilter;
+ videoEl.addEventListener("loadedmetadata", () => resolve(texture), { once: true });
+ videoEl.onerror = reject;
+
+ // If iOS and video is HLS, do some hacks.
+ if (
+ this.el.sceneEl.isIOS &&
+ AFRAME.utils.material.isHLS(
+ videoEl.src || videoEl.getAttribute("src"),
+ videoEl.type || videoEl.getAttribute("type")
+ )
+ ) {
+ // Actually BGRA. Tell shader to correct later.
+ texture.format = THREE.RGBAFormat;
+ texture.needsCorrectionBGRA = true;
+ // Apparently needed for HLS. Tell shader to correct later.
+ texture.flipY = false;
+ texture.needsCorrectionFlipY = true;
+ }
+ });
+ },
+
+ loadImage(url) {
+ return new Promise((resolve, reject) => {
+ textureLoader.load(url, resolve, null, function(xhr) {
+ reject(`'${url}' could not be fetched (Error code: ${xhr.status}; Response: ${xhr.statusText})`);
+ });
+ });
+ },
+
+ async update() {
+ let texture;
+ try {
+ const url = this.data.src;
+ const contentType = this.data.contentType;
+ if (!url) {
+ return;
+ }
+
+ if (textureCache.has(url)) {
+ const cacheItem = textureCache.get(url);
+ texture = cacheItem.texture;
+ cacheItem.count++;
+ } else {
+ if (url === "error") {
+ texture = errorTexture;
+ } else if (contentType === "image/gif") {
+ texture = await this.loadGIF(url);
+ } else if (contentType.startsWith("image/")) {
+ texture = await this.loadImage(url);
+ } else if (contentType.startsWith("video")) {
+ texture = await this.loadVideo(url);
+ } else {
+ throw new Error(`Unknown centent type: ${contentType}`);
+ }
+
+ textureCache.set(url, { count: 1, texture });
+ }
+ } catch (e) {
+ console.error("Error loading media", this.data.src, e);
+ texture = errorTexture;
+ }
+
+ const material = this.el.getObject3D("mesh").material;
+ material.map = texture;
+ material.needsUpdate = true;
+ this._fit(texture.image.videoWidth || texture.image.width, texture.image.videoHeight || texture.image.height);
+ }
+});
diff --git a/src/components/input-configurator.js b/src/components/input-configurator.js
index 1609b20c7b163504d3dcc46390767bf14c91a09e..df36b38d8c4bb81a2f8fd98824cbd3ecf4ef7f15 100644
--- a/src/components/input-configurator.js
+++ b/src/components/input-configurator.js
@@ -69,7 +69,7 @@ AFRAME.registerComponent("input-configurator", {
this.eventHandlers = [];
this.actionEventHandler = null;
if (this.lookOnMobile) {
- this.lookOnMobile.el.removeComponent("look-on-mobile");
+ this.lookOnMobile.el.removeAttribute("look-on-mobile");
this.lookOnMobile = null;
}
this.cursorRequiresManagement = false;
diff --git a/src/components/networked-counter.js b/src/components/networked-counter.js
index be9725cf6a50efb822370ab5d4b7196a6bcce3c4..6902658b03eef05429e2de1fdcd8cf48debec090 100644
--- a/src/components/networked-counter.js
+++ b/src/components/networked-counter.js
@@ -6,130 +6,90 @@
AFRAME.registerComponent("networked-counter", {
schema: {
max: { default: 3 },
- ttl: { default: 120 },
+ ttl: { default: 0 },
grab_event: { type: "string", default: "grab-start" },
release_event: { type: "string", default: "grab-end" }
},
- init: function() {
- this.count = 0;
- this.queue = {};
- this.timeouts = {};
+ init() {
+ this.registeredEls = new Map();
},
- remove: function() {
- for (const id in this.queue) {
- if (this.queue.hasOwnProperty(id)) {
- const item = this.queue[id];
- item.el.removeEventListener(this.data.grab_event, item.onGrabHandler);
- item.el.removeEventListener(this.data.release_event, item.onReleaseHandler);
- }
- }
-
- for (const id in this.timeouts) {
- this._removeTimeout(id);
- }
+ remove() {
+ this.registeredEls.forEach(({ onGrabHandler, onReleaseHandler, timeout }, el) => {
+ el.removeEventListener(this.data.grab_event, onGrabHandler);
+ el.removeEventListener(this.data.release_event, onReleaseHandler);
+ clearTimeout(timeout);
+ });
+ this.registeredEls.clear();
},
- register: function(networkedEl) {
- if (this.data.max <= 0) {
- return;
- }
-
- const id = NAF.utils.getNetworkId(networkedEl);
- if (id && this.queue.hasOwnProperty(id)) {
- return;
- }
+ register(el) {
+ if (this.data.max <= 0 || this.registeredEls.has(el)) return;
- const now = Date.now();
- const grabEventListener = this._onGrabbed.bind(this, id);
- const releaseEventListener = this._onReleased.bind(this, id);
+ const grabEventListener = this._onGrabbed.bind(this, el);
+ const releaseEventListener = this._onReleased.bind(this, el);
- this.queue[id] = {
- ts: now,
- el: networkedEl,
+ this.registeredEls.set(el, {
+ ts: Date.now(),
onGrabHandler: grabEventListener,
onReleaseHandler: releaseEventListener
- };
+ });
- networkedEl.addEventListener(this.data.grab_event, grabEventListener);
- networkedEl.addEventListener(this.data.release_event, releaseEventListener);
+ el.addEventListener(this.data.grab_event, grabEventListener);
+ el.addEventListener(this.data.release_event, releaseEventListener);
- this.count++;
-
- if (!this._isCurrentlyGrabbed(id)) {
- this._addTimeout(id);
+ if (!el.is("grabbed")) {
+ this._startTimer(el);
}
this._destroyOldest();
},
- deregister: function(networkedEl) {
- const id = NAF.utils.getNetworkId(networkedEl);
- if (id && this.queue.hasOwnProperty(id)) {
- const item = this.queue[id];
- networkedEl.removeEventListener(this.data.grab_event, item.onGrabHandler);
- networkedEl.removeEventListener(this.data.release_event, item.onReleaseHandler);
-
- delete this.queue[id];
-
- this._removeTimeout(id);
- delete this.timeouts[id];
-
- this.count--;
+ deregister(el) {
+ if (this.registeredEls.has(el)) {
+ const { onGrabHandler, onReleaseHandler, timeout } = this.registeredEls.get(el);
+ el.removeEventListener(this.data.grab_event, onGrabHandler);
+ el.removeEventListener(this.data.release_event, onReleaseHandler);
+ clearTimeout(timeout);
+ this.registeredEls.delete(el);
}
},
- _onGrabbed: function(id) {
- this._removeTimeout(id);
+ _onGrabbed(el) {
+ clearTimeout(this.registeredEls.get(el).timeout);
},
- _onReleased: function(id) {
- this._removeTimeout(id);
- this._addTimeout(id);
- this.queue[id].ts = Date.now();
+ _onReleased(el) {
+ this._startTimer(el);
+ this.registeredEls.get(el).ts = Date.now();
},
- _destroyOldest: function() {
- if (this.count > this.data.max) {
- let oldest = null,
- ts = Number.MAX_VALUE;
- for (const id in this.queue) {
- if (this.queue.hasOwnProperty(id)) {
- if (this.queue[id].ts < ts && !this._isCurrentlyGrabbed(id)) {
- oldest = this.queue[id];
- ts = this.queue[id].ts;
- }
+ _destroyOldest() {
+ if (this.registeredEls.size > this.data.max) {
+ let oldestEl = null,
+ minTs = Number.MAX_VALUE;
+ this.registeredEls.forEach(({ ts }, el) => {
+ if (ts < minTs && !el.is("grabbed")) {
+ oldestEl = el;
+ minTs = ts;
}
- }
- if (ts > 0) {
- this.deregister(oldest.el);
- this._destroy(oldest.el);
- }
+ });
+ this._destroy(oldestEl);
}
},
- _isCurrentlyGrabbed: function(id) {
- const networkedEl = this.queue[id].el;
- return networkedEl.is("grabbed");
- },
-
- _addTimeout: function(id) {
- const timeout = this.data.ttl * 1000;
- this.timeouts[id] = setTimeout(() => {
- const el = this.queue[id].el;
- this.deregister(el);
+ _startTimer(el) {
+ if (!this.data.ttl) return;
+ clearTimeout(this.registeredEls.get(el).timeout);
+ this.registeredEls.get(el).timeout = setTimeout(() => {
this._destroy(el);
- }, timeout);
- },
-
- _removeTimeout: function(id) {
- if (this.timeouts.hasOwnProperty(id)) {
- clearTimeout(this.timeouts[id]);
- }
+ }, this.data.ttl * 1000);
},
- _destroy: function(networkedEl) {
- networkedEl.parentNode.removeChild(networkedEl);
+ _destroy(el) {
+ // networked-interactable's remvoe will also call deregister, but it will happen async so we do it here as well.
+ this.deregister(el);
+ el.parentNode.removeChild(el);
}
});
diff --git a/src/components/offset-relative-to.js b/src/components/offset-relative-to.js
index 3cd45b942ed4573ee9b588a467de456af801f62f..23920e099a94fd50373f6804bf8c02d8cae0910f 100644
--- a/src/components/offset-relative-to.js
+++ b/src/components/offset-relative-to.js
@@ -12,16 +12,41 @@ AFRAME.registerComponent("offset-relative-to", {
},
on: {
type: "string"
+ },
+ selfDestruct: {
+ default: false
}
},
init() {
- this.updateOffset();
- this.el.sceneEl.addEventListener(this.data.on, this.updateOffset.bind(this));
+ this.updateOffset = this.updateOffset.bind(this);
+ if (this.data.on) {
+ this.el.sceneEl.addEventListener(this.data.on, this.updateOffset);
+ } else {
+ this.updateOffset();
+ }
},
- updateOffset() {
- const offsetVector = new THREE.Vector3().copy(this.data.offset);
- this.data.target.object3D.localToWorld(offsetVector);
- this.el.setAttribute("position", offsetVector);
- this.data.target.object3D.getWorldQuaternion(this.el.object3D.quaternion);
- }
+
+ updateOffset: (function() {
+ const offsetVector = new THREE.Vector3();
+ return function() {
+ const obj = this.el.object3D;
+ const target = this.data.target.object3D;
+ offsetVector.copy(this.data.offset);
+ target.localToWorld(offsetVector);
+ if (obj.parent) {
+ 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
+ // See https://github.com/networked-aframe/networked-aframe/issues/134
+ obj.rotation.order = "YXZ";
+ target.getWorldQuaternion(obj.quaternion);
+ if (this.data.selfDestruct) {
+ if (this.data.on) {
+ this.el.sceneEl.removeEventListener(this.data.on, this.updateOffset);
+ }
+ this.el.removeAttribute("offset-relative-to");
+ }
+ };
+ })()
});
diff --git a/src/components/position-at-box-shape-border.js b/src/components/position-at-box-shape-border.js
new file mode 100644
index 0000000000000000000000000000000000000000..59776bf6de0c2f12f2b46e40720a4287dee49c9b
--- /dev/null
+++ b/src/components/position-at-box-shape-border.js
@@ -0,0 +1,89 @@
+const PI = Math.PI;
+const HALF_PI = PI / 2;
+const THREE_HALF_PI = 3 * PI / 2;
+const right = new THREE.Vector3(1, 0, 0);
+const forward = new THREE.Vector3(0, 0, 1);
+const left = new THREE.Vector3(-1, 0, 0);
+const back = new THREE.Vector3(0, 0, -1);
+const dirs = {
+ left: {
+ dir: left,
+ rotation: THREE_HALF_PI,
+ halfExtent: "x"
+ },
+ right: {
+ dir: right,
+ rotation: HALF_PI,
+ halfExtent: "x"
+ },
+ forward: {
+ dir: forward,
+ rotation: 0,
+ halfExtent: "z"
+ },
+ back: {
+ dir: back,
+ rotation: PI,
+ halfExtent: "z"
+ }
+};
+
+AFRAME.registerComponent("position-at-box-shape-border", {
+ schema: {
+ target: { type: "string" },
+ dirs: { default: ["left", "right", "forward", "back"] }
+ },
+
+ init() {
+ this.cam = this.el.sceneEl.camera.el.object3D;
+ },
+
+ update() {
+ this.dirs = this.data.dirs.map(d => dirs[d]);
+ },
+
+ tick: (function() {
+ const camWorldPos = new THREE.Vector3();
+ const targetPosition = new THREE.Vector3();
+ const pointOnBoxFace = new THREE.Vector3();
+ return function() {
+ if (!this.shape) {
+ this.shape = this.el.components["shape"];
+ if (!this.shape) return;
+ }
+ if (!this.target) {
+ this.target = this.el.querySelector(this.data.target).object3D;
+ if (!this.target) return;
+ }
+ const halfExtents = this.shape.data.halfExtents;
+ this.cam.getWorldPosition(camWorldPos);
+
+ let minSquareDistance = Infinity;
+ let targetDir = this.dirs[0].dir;
+ let targetHalfExtent = halfExtents[this.dirs[0].halfExtent];
+ let targetRotation = this.dirs[0].rotation;
+
+ for (let i = 0; i < this.dirs.length; i++) {
+ const dir = this.dirs[i].dir;
+ const halfExtent = halfExtents[this.dirs[i].halfExtent];
+ pointOnBoxFace.copy(dir).multiplyScalar(halfExtent);
+ this.el.object3D.localToWorld(pointOnBoxFace);
+ const squareDistance = pointOnBoxFace.distanceToSquared(camWorldPos);
+ if (squareDistance < minSquareDistance) {
+ minSquareDistance = squareDistance;
+ targetDir = dir;
+ targetHalfExtent = halfExtent;
+ targetRotation = this.dirs[i].rotation;
+ }
+ }
+
+ this.target.position.copy(
+ targetPosition
+ .copy(targetDir)
+ .multiplyScalar(targetHalfExtent)
+ .add(this.shape.data.offset)
+ );
+ this.target.rotation.set(0, targetRotation, 0);
+ };
+ })()
+});
diff --git a/src/components/remove-networked-object-button.js b/src/components/remove-networked-object-button.js
new file mode 100644
index 0000000000000000000000000000000000000000..39ec27b754a2dfbb5476c9490ee40e3c30f12f79
--- /dev/null
+++ b/src/components/remove-networked-object-button.js
@@ -0,0 +1,18 @@
+AFRAME.registerComponent("remove-networked-object-button", {
+ init() {
+ this.onClick = () => {
+ this.targetEl.parentNode.removeChild(this.targetEl);
+ };
+ NAF.utils.getNetworkedEntity(this.el).then(networkedEl => {
+ this.targetEl = networkedEl;
+ });
+ },
+
+ play() {
+ this.el.addEventListener("click", this.onClick);
+ },
+
+ pause() {
+ this.el.removeEventListener("click", this.onClick);
+ }
+});
diff --git a/src/components/sticky-object.js b/src/components/sticky-object.js
new file mode 100644
index 0000000000000000000000000000000000000000..d415779078f6a0acb2d6975170cde39cbd80cf47
--- /dev/null
+++ b/src/components/sticky-object.js
@@ -0,0 +1,130 @@
+/* global THREE, CANNON, AFRAME */
+AFRAME.registerComponent("sticky-object", {
+ dependencies: ["body", "super-networked-interactable"],
+
+ schema: {
+ autoLockOnLoad: { default: false },
+ autoLockOnRelease: { default: false },
+ autoLockSpeedLimit: { default: 0.25 }
+ },
+
+ init() {
+ this._onGrab = this._onGrab.bind(this);
+ this._onRelease = this._onRelease.bind(this);
+ this._onBodyLoaded = this._onBodyLoaded.bind(this);
+ },
+
+ play() {
+ this.el.addEventListener("grab-start", this._onGrab);
+ this.el.addEventListener("grab-end", this._onRelease);
+ this.el.addEventListener("body-loaded", this._onBodyLoaded);
+ },
+
+ pause() {
+ this.el.removeEventListener("grab-start", this._onGrab);
+ this.el.removeEventListener("grab-end", this._onRelease);
+ this.el.removeEventListener("body-loaded", this._onBodyLoaded);
+ },
+
+ setLocked(locked) {
+ if (!NAF.utils.isMine(this.el)) return;
+
+ const mass = this.el.components["super-networked-interactable"].data.mass;
+ this.locked = locked;
+ this.el.body.type = locked ? window.CANNON.Body.STATIC : window.CANNON.Body.DYNAMIC;
+ this.el.setAttribute("body", {
+ mass: locked ? 0 : mass
+ });
+ },
+
+ _onBodyLoaded() {
+ if (this.data.autoLockOnLoad) {
+ this.setLocked(true);
+ }
+ },
+
+ _onRelease() {
+ if (
+ this.data.autoLockOnRelease &&
+ this.el.body.velocity.lengthSquared() < this.data.autoLockSpeedLimit * this.data.autoLockSpeedLimit
+ ) {
+ this.setLocked(true);
+ }
+ },
+
+ _onGrab() {
+ this.setLocked(false);
+ },
+
+ remove() {
+ if (this.stuckTo) {
+ const stuckTo = this.stuckTo;
+ delete this.stuckTo;
+ stuckTo._unstickObject();
+ }
+ }
+});
+
+AFRAME.registerComponent("sticky-object-zone", {
+ dependencies: ["physics"],
+ init() {
+ // TODO: position/rotation/impulse need to get updated if the sticky-object-zone moves
+ this.worldQuaternion = new THREE.Quaternion();
+ this.worldPosition = new THREE.Vector3();
+ this.el.object3D.getWorldQuaternion(this.worldQuaternion);
+ this.el.object3D.getWorldPosition(this.worldPosition);
+
+ const dir = new THREE.Vector3(0, 0, 5).applyQuaternion(this.el.object3D.quaternion);
+ this.bootImpulsePosition = new CANNON.Vec3(0, 0, 0);
+ this.bootImpulse = new CANNON.Vec3();
+ this.bootImpulse.copy(dir);
+
+ this._onCollisions = this._onCollisions.bind(this);
+ this.el.addEventListener("collisions", this._onCollisions);
+ },
+
+ remove() {
+ this.el.removeEventListener("collisions", this._onCollisions);
+ },
+
+ _onCollisions(e) {
+ e.detail.els.forEach(el => {
+ const stickyObject = el.components["sticky-object"];
+ if (!stickyObject) return;
+ this._setStuckObject(stickyObject);
+ });
+ if (this.stuckObject) {
+ e.detail.clearedEls.forEach(el => {
+ if (this.stuckObject && this.stuckObject.el === el) {
+ this._unstickObject();
+ }
+ });
+ }
+ },
+
+ _setStuckObject(stickyObject) {
+ stickyObject.setLocked(true);
+ stickyObject.el.object3D.position.copy(this.worldPosition);
+ stickyObject.el.object3D.quaternion.copy(this.worldQuaternion);
+ stickyObject.el.body.collisionResponse = false;
+ stickyObject.stuckTo = this;
+
+ if (this.stuckObject && NAF.utils.isMine(this.stuckObject.el)) {
+ const el = this.stuckObject.el;
+ this._unstickObject();
+ el.body.applyImpulse(this.bootImpulse, this.bootImpulsePosition);
+ }
+
+ this.stuckObject = stickyObject;
+ },
+
+ _unstickObject() {
+ // this condition will be false when dragging an object directly from one sticky zone to another
+ if (this.stuckObject.stuckTo === this) {
+ this.stuckObject.setLocked(false);
+ this.stuckObject.el.body.collisionResponse = true;
+ delete this.stuckObject.stuckTo;
+ }
+ delete this.stuckObject;
+ }
+});
diff --git a/src/components/super-networked-interactable.js b/src/components/super-networked-interactable.js
index 418b8e50f9b6d5b8f3eb7b89f4547e4dd23aee47..3b84bb7ac3b99421024113d527aa8a1ea54da725 100644
--- a/src/components/super-networked-interactable.js
+++ b/src/components/super-networked-interactable.js
@@ -24,17 +24,17 @@ AFRAME.registerComponent("super-networked-interactable", {
}
});
- this.grabStartListener = this._onGrabStart.bind(this);
- this.ownershipLostListener = this._onOwnershipLost.bind(this);
- this.el.addEventListener("grab-start", this.grabStartListener);
- this.el.addEventListener("ownership-lost", this.ownershipLostListener);
+ this._onGrabStart = this._onGrabStart.bind(this);
+ this._onOwnershipLost = this._onOwnershipLost.bind(this);
+ this.el.addEventListener("grab-start", this._onGrabStart);
+ this.el.addEventListener("ownership-lost", this._onOwnershipLost);
this.system.addComponent(this);
},
remove: function() {
this.counter.deregister(this.el);
- this.el.removeEventListener("grab-start", this.grabStartListener);
- this.el.removeEventListener("ownership-lost", this.ownershipLostListener);
+ this.el.removeEventListener("grab-start", this._onGrabStart);
+ this.el.removeEventListener("ownership-lost", this._onOwnershipLost);
this.system.removeComponent(this);
},
diff --git a/src/components/text-button.js b/src/components/text-button.js
index 67af3653dcc4c9e81b59aec376feab6a00eb7fe4..491b482a248099ae8a277ed5cb04dbb638df6f83 100644
--- a/src/components/text-button.js
+++ b/src/components/text-button.js
@@ -57,3 +57,12 @@ AFRAME.registerComponent("text-button", {
this.textEl.setAttribute("text", "color", hovering ? this.data.textHoverColor : this.data.textColor);
}
});
+
+const noop = function() {};
+// TODO: this should ideally be fixed upstream somehow but its pretty tricky since text is just a geometry not a different type of Object3D, and Object3D is what handles raycast checks.
+AFRAME.registerComponent("text-raycast-hack", {
+ dependencies: ["text"],
+ init() {
+ this.el.getObject3D("text").raycast = noop;
+ }
+});
diff --git a/src/gltf-component-mappings.js b/src/gltf-component-mappings.js
index d036e0e6c14d308ad07f3458f5f937c3dccdfeda..0552e61c854ad7efe6ed5e97020b512ed5d0feac 100644
--- a/src/gltf-component-mappings.js
+++ b/src/gltf-component-mappings.js
@@ -23,6 +23,7 @@ AFRAME.GLTFModelPlus.registerComponent("shape", "shape");
AFRAME.GLTFModelPlus.registerComponent("visible", "visible");
AFRAME.GLTFModelPlus.registerComponent("spawn-point", "spawn-point");
AFRAME.GLTFModelPlus.registerComponent("hoverable", "hoverable");
+AFRAME.GLTFModelPlus.registerComponent("sticky-zone", "sticky-zone");
AFRAME.GLTFModelPlus.registerComponent("nav-mesh", "nav-mesh", (el, componentName, componentData, gltfPath) => {
if (componentData.src) {
componentData.src = resolveURL(componentData.src, gltfPath);
diff --git a/src/hub.html b/src/hub.html
index 51db549c28b7aeb9ce4a8a01365b0b01877a224f..fe79353c5899fcf192157a8b9d423758842fb7f9 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -101,11 +101,11 @@
<a-entity class="right-controller"></a-entity>
<a-entity class="model" gltf-model-plus="inflate: true">
- <template data-selector=".RootScene">
+ <template data-name="RootScene">
<a-entity ik-controller hand-pose__left hand-pose__right animation-mixer space-invader-mesh="meshSelector: .Bot_Skinned"></a-entity>
</template>
- <template data-selector=".Neck">
+ <template data-name="Neck">
<a-entity>
<a-entity
class="nametag"
@@ -117,62 +117,44 @@
</a-entity>
</template>
- <template data-selector=".Chest">
+ <template data-name="Chest">
<a-entity>
<a-entity personal-space-invader="radius: 0.2; useMaterial: true;" bone-visibility> </a-entity>
<a-entity billboard>
- <a-entity
- block-button
- visible-while-frozen
- ui-class-while-frozen
- text-button="haptic:#player-right-controller;
- textHoverColor: #fff;
- textColor: #fff;
- backgroundHoverColor: #ea4b54;
- backgroundColor: #fff;"
- slice9="width: 0.45;
- height: 0.2;
- left: 53;
- top: 53;
- right: 10;
- bottom: 10;
- opacity: 1.3;
- src: #tooltip"
- position="0 0 .35">
- </a-entity>
- <a-entity
- visible-while-frozen
- text="value:Block;
- width:2.5;
- align:center;"
- position="0 0 0.36"></a-entity>
+ <a-entity mixin="rounded-text-button" block-button visible-while-frozen ui-class-while-frozen position="0 0 .35"> </a-entity>
+ <a-entity visible-while-frozen text="value:Block; width:2.5; align:center;" position="0 0 0.36"></a-entity>
</a-entity>
</a-entity>
</template>
- <template data-selector=".Head">
+ <template data-name="Head">
<a-entity
networked-audio-source
networked-audio-analyser
personal-space-invader="radius: 0.15; useMaterial: true;"
bone-visibility
>
- <a-cylinder
- static-body
- radius="0.13"
- height="0.2"
- position="0 0.07 0.05"
- visible="false"
- ></a-cylinder>
+ <a-cylinder
+ static-body
+ radius="0.13"
+ height="0.2"
+ position="0 0.07 0.05"
+ visible="false"
+ ></a-cylinder>
</a-entity>
</template>
- <template data-selector=".LeftHand">
- <a-entity personal-space-invader="radius: 0.1" bone-visibility></a-entity>
+ <!-- needs to exist for the benefit of the personal space calculator -->
+ <template data-name="Bot_Skinned">
+ <a-entity></a-entity>
</template>
- <template data-selector=".RightHand">
- <a-entity personal-space-invader="radius: 0.1" bone-visibility></a-entity>
+ <template data-name="LeftHand">
+ <a-entity personal-space-invader="radius: 0.1" bone-visibility></a-entity>
+ </template>
+
+ <template data-name="RightHand">
+ <a-entity personal-space-invader="radius: 0.1" bone-visibility></a-entity>
</template>
</a-entity>
</a-entity>
@@ -184,14 +166,58 @@
class="interactable"
super-networked-interactable="counter: #counter; mass: 1;"
body="type: dynamic; shape: none; mass: 1;"
+ auto-scale-cannon-physics-body
grabbable
- stretchable="useWorldPosition: true;"
+ stretchable="useWorldPosition: true; usePhysics: never"
hoverable
duck
+ sticky-object="autoLockOnRelease: true;"
></a-entity>
</template>
- <template id="pen-template">
+ <template id="interactable-model">
+ <a-entity
+ gltf-model-plus="inflate: false;"
+ class="interactable"
+ super-networked-interactable="counter: #media-counter; mass: 1;"
+ body="type: dynamic; shape: none; mass: 1;"
+ grabbable
+ stretchable="useWorldPosition: true; usePhysics: never"
+ hoverable
+ sticky-object="autoLockOnRelease: true; autoLockOnLoad: true;"
+ auto-box-collider
+ position-at-box-shape-border="target:.delete-button"
+ auto-scale-cannon-physics-body
+ >
+ <a-entity class="delete-button" visible-while-frozen scale="0.08 0.08 0.08">
+ <a-entity mixin="rounded-text-button" remove-object-button position="0 0 0"> </a-entity>
+ <a-entity text=" value:Delete; width:2.5; align:center;" text-raycast-hack position="0 0 0.01"></a-entity>
+ </a-entity>
+ </a-entity>
+ </template>
+
+ <template id="interactable-image">
+ <a-entity
+ class="interactable"
+ super-networked-interactable="counter: #media-counter; mass: 1;"
+ body="type: dynamic; shape: none; mass: 1;"
+ auto-scale-cannon-physics-body
+ grabbable
+ stretchable="useWorldPosition: true; usePhysics: never"
+ hoverable
+ geometry="primitive: plane"
+ image-plus
+ sticky-object="autoLockOnLoad: true; autoLockOnRelease: true;"
+ position-at-box-shape-border="target:.delete-button;dirs:forward,back"
+ >
+ <a-entity class="delete-button" visible-while-frozen>
+ <a-entity mixin="rounded-text-button" remove-networked-object-button position="0 0 0"> </a-entity>
+ <a-entity text=" value:Delete; width:2.5; align:center;" text-raycast-hack position="0 0 0.01"></a-entity>
+ </a-entity>
+ </a-entity>
+ </template>
+
+ <template id="interactable-pen">
<a-entity
gltf-model-plus="src: #interactable-pen; inflate: true;"
class="interactable"
@@ -213,20 +239,40 @@
></a-entity>
</template>
+
+ <a-mixin id="rounded-text-button"
+ text-button="
+ haptic:#player-right-controller;
+ textHoverColor: #fff;
+ textColor: #fff;
+ backgroundHoverColor: #ea4b54;
+ backgroundColor: #fff;"
+ slice9="
+ width: 0.45;
+ height: 0.2;
+ left: 53;
+ top: 53;
+ right: 10;
+ bottom: 10;
+ opacity: 1.3;
+ src: #tooltip"
+ ></a-mixin>
+
<a-mixin id="controller-super-hands"
- super-hands="
- colliderEvent: collisions; colliderEventProperty: els;
- colliderEndEvent: collisions; colliderEndEventProperty: clearedEls;
- grabStartButtons: hand_grab; grabEndButtons: hand_release;
- stretchStartButtons: hand_grab; stretchEndButtons: hand_release;
- dragDropStartButtons: index_down; dragDropEndButtons: index_up"
- collision-filter="collisionForces: false"
- physics-collider
+ super-hands="
+ colliderEvent: collisions; colliderEventProperty: els;
+ colliderEndEvent: collisions; colliderEndEventProperty: clearedEls;
+ grabStartButtons: hand_grab; grabEndButtons: hand_release;
+ stretchStartButtons: hand_grab; stretchEndButtons: hand_release;
+ dragDropStartButtons: index_down; dragDropEndButtons: index_up;"
+ collision-filter="collisionForces: false"
+ physics-collider
></a-mixin>
</a-assets>
<!-- Interactables -->
<a-entity id="counter" networked-counter="max: 3; ttl: 120"></a-entity>
+ <a-entity id="media-counter" networked-counter="max: 10;"></a-entity>
<a-entity
id="cursor-controller"
@@ -266,122 +312,122 @@
networked-avatar
cardboard-controls
>
- <a-entity
- id="player-hud"
- hud-controller="head: #player-camera;"
- vr-mode-toggle-visibility
- vr-mode-toggle-playing__hud-controller
- >
- <a-entity in-world-hud="haptic:#player-right-controller;raycaster:#player-right-controller;" rotation="30 0 0">
- <a-rounded height="0.13" width="0.48" color="#000000" position="-0.24 -0.065 0" radius="0.065" opacity="0.35" class="hud bg"></a-rounded>
- <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Mute Mic; activeTooltipText: Unmute Mic; image: #mute-off; hoverImage: #mute-off-hover; activeImage: #mute-on; activeHoverImage: #mute-on-hover" scale="0.1 0.1 0.1" position="-0.17 0 0.001" class="ui hud mic" material="alphaTest:0.1;"></a-image>
- <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Pause; activeTooltipText: Resume; image: #freeze-off; hoverImage: #freeze-off-hover; activeImage: #freeze-on; activeHoverImage: #freeze-on-hover" scale="0.2 0.2 0.2" position="0 0 0.005" class="ui hud freeze"></a-image>
- <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Enable Bubble; activeTooltipText: Disable Bubble; image: #bubble-off; hoverImage: #bubble-off-hover; activeImage: #bubble-on; activeHoverImage: #bubble-on-hover" scale="0.1 0.1 0.1" position="0.17 0 0.001" class="ui hud bubble" material="alphaTest:0.1;"></a-image>
- <a-rounded visible="false" id="hud-tooltip" height="0.08" width="0.3" color="#000000" position="-0.15 -0.2 0" rotation="-20 0 0" radius="0.025" opacity="0.35" class="hud bg">
- <a-entity text="value: Mute Mic; align:center;" position="0.15 0.04 0.001" ></a-entity>
- </a-rounded>
- </a-entity>
- </a-entity>
-
- <a-entity
- id="player-camera"
- class="camera"
- camera
- position="0 1.6 0"
- personal-space-bubble="radius: 0.4"
- pitch-yaw-rotator
- >
- <a-entity
- id="gaze-teleport"
- position = "0.15 0 0"
- teleport-controls="
- cameraRig: #player-rig;
- teleportOrigin: #player-camera;
- button: gaze-teleport_;
- collisionEntities: [nav-mesh];
- drawIncrementally: true;
- incrementalDrawMs: 600;
- hitOpacity: 0.3;
- missOpacity: 0.2;"
- ></a-entity>
- <a-entity id="player-camera-reverse-z" rotation="0 180 0"></a-entity>
- </a-entity>
-
- <a-entity
- id="player-left-controller"
- class="left-controller"
- hand-controls2="left"
- tracked-controls
- teleport-controls="
- cameraRig: #player-rig;
- teleportOrigin: #player-camera;
- button: cursor-teleport_;
- collisionEntities: [nav-mesh];
- drawIncrementally: true;
- incrementalDrawMs: 600;
- hitOpacity: 0.3;
- missOpacity: 0.2;"
- haptic-feedback
- body="type: static; shape: none;"
- mixin="controller-super-hands"
- controls-shape-offset
- >
- <!-- <a-sphere radius="0.02" color="red" pen="camera: #player-camera; drawing: #my-first-drawing;"></a-sphere> -->
- <a-entity id="player-left-controller-reverse-z" rotation="0 180 0"></a-entity>
+ <a-entity
+ id="player-hud"
+ hud-controller="head: #player-camera;"
+ vr-mode-toggle-visibility
+ vr-mode-toggle-playing__hud-controller
+ >
+ <a-entity in-world-hud="haptic:#player-right-controller;raycaster:#player-right-controller;" rotation="30 0 0">
+ <a-rounded height="0.13" width="0.48" color="#000000" position="-0.24 -0.065 0" radius="0.065" opacity="0.35" class="hud bg"></a-rounded>
+ <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Mute Mic; activeTooltipText: Unmute Mic; image: #mute-off; hoverImage: #mute-off-hover; activeImage: #mute-on; activeHoverImage: #mute-on-hover" scale="0.1 0.1 0.1" position="-0.17 0 0.001" class="ui hud mic" material="alphaTest:0.1;"></a-image>
+ <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Pause; activeTooltipText: Resume; image: #freeze-off; hoverImage: #freeze-off-hover; activeImage: #freeze-on; activeHoverImage: #freeze-on-hover" scale="0.2 0.2 0.2" position="0 0 0.005" class="ui hud freeze"></a-image>
+ <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Enable Bubble; activeTooltipText: Disable Bubble; image: #bubble-off; hoverImage: #bubble-off-hover; activeImage: #bubble-on; activeHoverImage: #bubble-on-hover" scale="0.1 0.1 0.1" position="0.17 0 0.001" class="ui hud bubble" material="alphaTest:0.1;"></a-image>
+ <a-rounded visible="false" id="hud-tooltip" height="0.08" width="0.3" color="#000000" position="-0.15 -0.2 0" rotation="-20 0 0" radius="0.025" opacity="0.35" class="hud bg">
+ <a-entity text="value: Mute Mic; align:center;" position="0.15 0.04 0.001" ></a-entity>
+ </a-rounded>
</a-entity>
-
+ </a-entity>
+
+ <a-entity
+ id="player-camera"
+ class="camera"
+ camera
+ position="0 1.6 0"
+ personal-space-bubble="radius: 0.4"
+ pitch-yaw-rotator
+ >
<a-entity
- id="player-right-controller"
- class="right-controller"
- hand-controls2="right"
- tracked-controls
+ id="gaze-teleport"
+ position = "0.15 0 0"
teleport-controls="
cameraRig: #player-rig;
teleportOrigin: #player-camera;
- button: cursor-teleport_;
+ button: gaze-teleport_;
collisionEntities: [nav-mesh];
drawIncrementally: true;
incrementalDrawMs: 600;
hitOpacity: 0.3;
missOpacity: 0.2;"
- haptic-feedback
- body="type: static; shape: none;"
- mixin="controller-super-hands"
- controls-shape-offset
- >
- <a-entity id="player-right-controller-reverse-z" rotation="0 180 0"></a-entity>
- </a-entity>
+ ></a-entity>
+ <!-- <a-sphere radius="0.02" color="red" pen="camera: #player-camera; drawing: #my-first-drawing;"></a-sphere> -->
+ <a-entity id="player-camera-reverse-z" rotation="0 180 0"></a-entity>
+ </a-entity>
+
+ <a-entity
+ id="player-left-controller"
+ class="left-controller"
+ hand-controls2="left"
+ tracked-controls
+ teleport-controls="
+ cameraRig: #player-rig;
+ teleportOrigin: #player-camera;
+ button: cursor-teleport_;
+ collisionEntities: [nav-mesh];
+ drawIncrementally: true;
+ incrementalDrawMs: 600;
+ hitOpacity: 0.3;
+ missOpacity: 0.2;"
+ haptic-feedback
+ body="type: static; shape: none;"
+ mixin="controller-super-hands"
+ controls-shape-offset
+ >
+ <a-entity id="player-left-controller-reverse-z" rotation="0 180 0"></a-entity>
+ </a-entity>
+
+ <a-entity
+ id="player-right-controller"
+ class="right-controller"
+ hand-controls2="right"
+ tracked-controls
+ teleport-controls="
+ cameraRig: #player-rig;
+ teleportOrigin: #player-camera;
+ button: cursor-teleport_;
+ collisionEntities: [nav-mesh];
+ drawIncrementally: true;
+ incrementalDrawMs: 600;
+ hitOpacity: 0.3;
+ missOpacity: 0.2;"
+ haptic-feedback
+ body="type: static; shape: none;"
+ mixin="controller-super-hands"
+ controls-shape-offset
+ >
+ <a-entity id="player-right-controller-reverse-z" rotation="0 180 0"></a-entity>
+ </a-entity>
+
+ <a-entity gltf-model-plus="inflate: true;"
+ class="model">
+ <template data-name="RootScene">
+ <a-entity
+ ik-controller
+ animation-mixer
+ hand-pose__left
+ hand-pose__right
+ hand-pose-controller__left="networkedAvatar:#player-rig;eventSrc:#player-left-controller"
+ hand-pose-controller__right="networkedAvatar:#player-rig;eventSrc:#player-right-controller"
+ ></a-entity>
+ </template>
- <a-entity gltf-model-plus="inflate: true;"
- class="model">
- <template data-selector=".RootScene">
- <a-entity
- ik-controller
- animation-mixer
- hand-pose__left
- hand-pose__right
- hand-pose-controller__left="networkedAvatar:#player-rig;eventSrc:#player-left-controller"
- hand-pose-controller__right="networkedAvatar:#player-rig;eventSrc:#player-right-controller"
- ></a-entity>
- </template>
-
- <template data-selector=".Neck">
- <a-entity>
- <a-entity class="nametag" visible="false" text ></a-entity>
- </a-entity>
- </template>
+ <template data-name="Neck">
+ <a-entity>
+ <a-entity class="nametag" visible="false" text ></a-entity>
+ </a-entity>
+ </template>
- <template data-selector=".Head">
- <a-entity visible="false" bone-visibility></a-entity>
- </template>
+ <template data-name="Head">
+ <a-entity visible="false" bone-visibility></a-entity>
+ </template>
- <template data-selector=".LeftHand">
- <a-entity bone-visibility></a-entity>
- </template>
+ <template data-name="LeftHand">
+ <a-entity bone-visibility></a-entity>
+ </template>
- <template data-selector=".RightHand">
- <a-entity bone-visibility></a-entity>
- </template>
+ <template data-name="RightHand">
+ <a-entity bone-visibility></a-entity>
+ </template>
</a-entity>
</a-entity>
diff --git a/src/hub.js b/src/hub.js
index 9e704ea2d8f60112e96b08f594930463bdbfdbb1..2faeb0bf360dab2c37a28ad0ace7f868c1d2cd16 100644
--- a/src/hub.js
+++ b/src/hub.js
@@ -63,10 +63,16 @@ import "./components/networked-avatar";
import "./components/css-class";
import "./components/scene-shadow";
import "./components/avatar-replay";
+import "./components/image-plus";
+import "./components/auto-box-collider";
import "./components/pinch-to-move";
import "./components/look-on-mobile";
import "./components/pitch-yaw-rotator";
import "./components/input-configurator";
+import "./components/sticky-object";
+import "./components/auto-scale-cannon-physics-body";
+import "./components/position-at-box-shape-border";
+import "./components/remove-networked-object-button";
import ReactDOM from "react-dom";
import React from "react";
@@ -75,6 +81,7 @@ import HubChannel from "./utils/hub-channel";
import LinkChannel from "./utils/link-channel";
import { connectToReticulum } from "./utils/phoenix-utils";
import { disableiOSZoom } from "./utils/disable-ios-zoom";
+import { addMedia } from "./utils/media-utils";
import "./systems/personal-space-bubble";
import "./systems/app-mode";
@@ -299,6 +306,33 @@ const onReady = async () => {
NAF.connection.entities.completeSync(ev.detail.clientId);
});
+ scene.addEventListener("add_media", e => {
+ addMedia(e.detail);
+ });
+
+ if (qsTruthy("mediaTools")) {
+ document.addEventListener("paste", e => {
+ if (e.target.nodeName === "INPUT") return;
+
+ const imgUrl = e.clipboardData.getData("text");
+ console.log("Pasted: ", imgUrl, e);
+ addMedia(imgUrl);
+ });
+
+ document.addEventListener("dragover", e => {
+ e.preventDefault();
+ });
+
+ document.addEventListener("drop", e => {
+ e.preventDefault();
+ const imgUrl = e.dataTransfer.getData("url");
+ if (imgUrl) {
+ console.log("Droped: ", imgUrl);
+ addMedia(imgUrl);
+ }
+ });
+ }
+
if (!qsTruthy("offline")) {
document.body.addEventListener("connected", () => {
if (!isBotMode) {
@@ -401,6 +435,13 @@ const onReady = async () => {
return;
}
+ if (qs.required_version && qs.required_version !== process.env.BUILD_VERSION) {
+ remountUI({ roomUnavailableReason: "version_mismatch" });
+ setTimeout(() => document.location.reload(), 5000);
+ exitScene();
+ return;
+ }
+
getAvailableVREntryTypes().then(availableVREntryTypes => {
if (availableVREntryTypes.gearvr === VR_DEVICE_AVAILABILITY.yes) {
remountUI({ availableVREntryTypes, forcedVREntryType: "gearvr" });
diff --git a/src/index.js b/src/index.js
index 2383019035144bc82277e15baa01b034f6244754..32558cd4ec93844c558ce5d45fed8d54824ac01a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -7,7 +7,6 @@ import InfoDialog from "./react-components/info-dialog.js";
import queryString from "query-string";
const qs = queryString.parse(location.search);
-
registerTelemetry();
ReactDOM.render(
diff --git a/src/input-mappings.js b/src/input-mappings.js
index c6ce52501b479fa5749437db3da0882659129cb5..ccf44110bc74e38ab80de143c11f2dcad50d2a5c 100644
--- a/src/input-mappings.js
+++ b/src/input-mappings.js
@@ -149,8 +149,7 @@ const config = {
m_press: "action_mute",
q_press: "snap_rotate_left",
e_press: "snap_rotate_right",
- v_press: "action_share_screen",
- b_press: "action_select_hud_item",
+ b_press: "action_share_screen",
// We can't create a keyboard behaviour with AFIM yet,
// so these will get captured by wasd-to-analog2d
diff --git a/src/network-schemas.js b/src/network-schemas.js
index e9aff09c00848a2c1ae24a39ba94fac6839d5804..cd8a0a2fa2cb0d997370d8ab938e6fcae945983c 100644
--- a/src/network-schemas.js
+++ b/src/network-schemas.js
@@ -82,7 +82,7 @@ function registerNetworkSchemas() {
});
NAF.schemas.add({
- template: "#interactable-template",
+ template: "#interactable-image",
components: [
{
component: "position",
@@ -92,12 +92,18 @@ function registerNetworkSchemas() {
component: "rotation",
requiresNetworkUpdate: vectorRequiresUpdate(0.5)
},
- "scale"
+ "scale",
+ "image-plus"
]
});
NAF.schemas.add({
- template: "#drawing-template",
+ template: "#interactable-model",
+ components: ["position", "rotation", "scale", "gltf-model-plus"]
+ });
+
+ NAF.schemas.add({
+ template: "#interactable-drawing",
components: [
{
component: "position",
diff --git a/src/react-components/2d-hud.js b/src/react-components/2d-hud.js
index 141606a83d121f0a280ac5ac6b6d997856f7fc1e..e32a02d3eca931e112eb976b3c1cdcafc55f6dff 100644
--- a/src/react-components/2d-hud.js
+++ b/src/react-components/2d-hud.js
@@ -1,10 +1,30 @@
import React from "react";
import PropTypes from "prop-types";
import cx from "classnames";
+import queryString from "query-string";
import styles from "../assets/stylesheets/2d-hud.scss";
-const TwoDHUD = ({ muted, frozen, spacebubble, onToggleMute, onToggleFreeze, onToggleSpaceBubble }) => (
+import FontAwesomeIcon from "@fortawesome/react-fontawesome";
+import faPlus from "@fortawesome/fontawesome-free-solid/faPlus";
+
+const qs = queryString.parse(location.search);
+function qsTruthy(param) {
+ const val = qs[param];
+ // if the param exists but is not set (e.g. "?foo&bar"), its value is null.
+ return val === null || /1|on|true/i.test(val);
+}
+const enableMediaTools = qsTruthy("mediaTools");
+
+const TwoDHUD = ({
+ muted,
+ frozen,
+ spacebubble,
+ onToggleMute,
+ onToggleFreeze,
+ onToggleSpaceBubble,
+ onClickAddMedia
+}) => (
<div className={styles.container}>
<div className={cx("ui-interactive", styles.panel, styles.left)}>
<div
@@ -25,6 +45,15 @@ const TwoDHUD = ({ muted, frozen, spacebubble, onToggleMute, onToggleFreeze, onT
onClick={onToggleSpaceBubble}
/>
</div>
+ {enableMediaTools ? (
+ <div
+ className={cx("ui-interactive", styles.iconButton, styles.small, styles.addMediaButton)}
+ title="Add Media"
+ onClick={onClickAddMedia}
+ >
+ <FontAwesomeIcon icon={faPlus} />
+ </div>
+ ) : null}
</div>
);
@@ -34,7 +63,8 @@ TwoDHUD.propTypes = {
spacebubble: PropTypes.bool,
onToggleMute: PropTypes.func,
onToggleFreeze: PropTypes.func,
- onToggleSpaceBubble: PropTypes.func
+ onToggleSpaceBubble: PropTypes.func,
+ onClickAddMedia: PropTypes.func
};
export default TwoDHUD;
diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js
index 7e44ce63093ad5ad3df772807794140cab9af2b9..dc10b99ac217609b07bda59422c805c5ea4f1581 100644
--- a/src/react-components/hub-create-panel.js
+++ b/src/react-components/hub-create-panel.js
@@ -85,7 +85,7 @@ class HubCreatePanel extends Component {
const hub = await res.json();
- if (process.env.NODE_ENV === "production") {
+ if (process.env.NODE_ENV === "production" || document.location.host === process.env.DEV_RETICULUM_SERVER) {
document.location = hub.url;
} else {
document.location = `/hub.html?hub_id=${hub.hub_id}`;
diff --git a/src/react-components/info-dialog.js b/src/react-components/info-dialog.js
index a04127ff74ff2b4722d0a2fbe1a99dd07568efc0..83b46b9dfee5569044581b44879566a13ec3c934 100644
--- a/src/react-components/info-dialog.js
+++ b/src/react-components/info-dialog.js
@@ -8,6 +8,8 @@ import LinkDialog from "./link-dialog.js";
// TODO i18n
+let lastAddMediaUrl = "";
+
class InfoDialog extends Component {
static dialogTypes = {
slack: Symbol("slack"),
@@ -18,12 +20,14 @@ class InfoDialog extends Component {
report: Symbol("report"),
help: Symbol("help"),
link: Symbol("link"),
- webvr_recommend: Symbol("webvr_recommend")
+ webvr_recommend: Symbol("webvr_recommend"),
+ add_media: Symbol("add_media")
};
static propTypes = {
dialogType: PropTypes.oneOf(Object.values(InfoDialog.dialogTypes)),
onCloseDialog: PropTypes.func,
onSubmittedEmail: PropTypes.func,
+ onAddMedia: PropTypes.func,
linkCode: PropTypes.string
};
@@ -34,14 +38,17 @@ class InfoDialog extends Component {
this.shareLink = `${loc.protocol}//${loc.host}${loc.pathname}`;
this.onKeyDown = this.onKeyDown.bind(this);
this.onContainerClicked = this.onContainerClicked.bind(this);
+ this.onAddMediaClicked = this.onAddMediaClicked.bind(this);
}
componentDidMount() {
window.addEventListener("keydown", this.onKeyDown);
+ this.setState({ addMediaUrl: lastAddMediaUrl });
}
componentWillUnmount() {
window.removeEventListener("keydown", this.onKeyDown);
+ lastAddMediaUrl = this.state.addMediaUrl;
}
onKeyDown(e) {
@@ -56,6 +63,11 @@ class InfoDialog extends Component {
}
}
+ onAddMediaClicked() {
+ this.props.onAddMedia(this.state.addMediaUrl);
+ this.props.onCloseDialog();
+ }
+
shareLinkClicked = () => {
navigator.share({
title: document.title,
@@ -71,7 +83,8 @@ class InfoDialog extends Component {
state = {
mailingListEmail: "",
mailingListPrivacy: false,
- copyLinkButtonText: "Copy"
+ copyLinkButtonText: "Copy",
+ addMediaUrl: ""
};
signUpForMailingList = async e => {
@@ -184,6 +197,31 @@ class InfoDialog extends Component {
</div>
);
break;
+ case InfoDialog.dialogTypes.add_media:
+ dialogTitle = "Add Media";
+ dialogBody = (
+ <div>
+ <div>Tip: You can paste media urls directly into hubs with ctrl+v</div>
+ <form onSubmit={this.onAddMediaClicked}>
+ <div className="add-media-form">
+ <input
+ type="url"
+ placeholder="Image, Video, or GLTF URL"
+ className="add-media-form__link_field"
+ value={this.state.addMediaUrl}
+ onChange={e => this.setState({ addMediaUrl: e.target.value })}
+ required
+ />
+ <div className="add-media-form__buttons">
+ <button className="add-media-form__action-button">
+ <span>Add</span>
+ </button>
+ </div>
+ </div>
+ </form>
+ </div>
+ );
+ break;
case InfoDialog.dialogTypes.updates:
dialogTitle = "";
dialogBody = (
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 9b6c10ea2149fd02899fe217a2ba89b2c33d2187..c0733064a8fa05a513b040aeeb54401aca12ef1a 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -329,7 +329,7 @@ class UIRoot extends Component {
mediaSource: "screen",
// Work around BMO 1449832 by calculating the width. This will break for multi monitors if you share anything
// other than your current monitor that has a different aspect ratio.
- width: screen.width / screen.height * 720,
+ width: 720 * screen.width / screen.height,
height: 720,
frameRate: 30
}
@@ -528,6 +528,10 @@ class UIRoot extends Component {
this.setState({ infoDialogType: null, linkCode: null, linkCodeCancel: null });
};
+ handleAddMedia = url => {
+ this.props.scene.emit("add_media", url);
+ };
+
render() {
if (this.state.exited || this.props.roomUnavailableReason || this.props.platformUnsupportedReason) {
let subtitle = null;
@@ -835,6 +839,7 @@ class UIRoot extends Component {
linkCode={this.state.linkCode}
onSubmittedEmail={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.email_submitted })}
onCloseDialog={this.handleCloseDialog}
+ onAddMedia={this.handleAddMedia}
/>
{this.state.entryStep === ENTRY_STEPS.finished && (
@@ -872,6 +877,7 @@ class UIRoot extends Component {
onToggleMute={this.toggleMute}
onToggleFreeze={this.toggleFreeze}
onToggleSpaceBubble={this.toggleSpaceBubble}
+ onClickAddMedia={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.add_media })}
/>
<Footer
hubName={this.props.hubName}
diff --git a/src/utils/media-utils.js b/src/utils/media-utils.js
new file mode 100644
index 0000000000000000000000000000000000000000..9c17813b926e5541eef96b586f8efb133e696f6c
--- /dev/null
+++ b/src/utils/media-utils.js
@@ -0,0 +1,75 @@
+const whitelistedHosts = [/^.*\.reticulum\.io$/, /^.*hubs\.mozilla\.com$/, /^hubs\.local$/];
+const isHostWhitelisted = hostname => !!whitelistedHosts.filter(r => r.test(hostname)).length;
+
+let resolveMediaUrl = "/api/v1/media";
+if (process.env.NODE_ENV === "development") {
+ resolveMediaUrl = `https://${process.env.DEV_RETICULUM_SERVER}${resolveMediaUrl}`;
+}
+
+export const resolveFarsparkUrl = async url => {
+ const parsedUrl = new URL(url);
+ if ((parsedUrl.protocol !== "http:" && parsedUrl.protocol !== "https:") || isHostWhitelisted(parsedUrl.hostname))
+ return url;
+
+ return (await fetch(resolveMediaUrl, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ media: { url } })
+ }).then(r => r.json())).raw;
+};
+
+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;
+};
+
+export const spawnNetworkedInteractable = src => {
+ const scene = AFRAME.scenes[0];
+ const model = document.createElement("a-entity");
+ model.id = "interactable-model-" + interactableId++;
+ model.setAttribute("networked", { template: "#interactable-model" });
+ model.setAttribute("offset-relative-to", {
+ on: "model-loaded",
+ target: "#player-camera",
+ offset: offset,
+ selfDestruct: true
+ });
+ model.setAttribute("gltf-model-plus", "src", src);
+ model.setAttribute("auto-box-collider", { resize: true });
+ scene.appendChild(model);
+ return model;
+};
+
+export const addMedia = async url => {
+ try {
+ const farsparkUrl = await resolveFarsparkUrl(url);
+ console.log("resolved", url, farsparkUrl);
+
+ const contentType = await fetchContentType(farsparkUrl);
+
+ if (contentType.startsWith("image/") || contentType.startsWith("video/")) {
+ spawnNetworkedImage(farsparkUrl, contentType);
+ } else if (contentType.startsWith("model/gltf") || url.endsWith(".gltf") || url.endsWith(".glb")) {
+ spawnNetworkedInteractable(farsparkUrl);
+ } else {
+ throw new Error(`Unsupported content type: ${contentType}`);
+ }
+ } catch (e) {
+ console.error("Error adding media", e);
+ spawnNetworkedImage("error");
+ }
+};
diff --git a/src/vendor/GLTFLoader.js b/src/vendor/GLTFLoader.js
index 7610044b41b6dd9956b2d84984e46671de46e494..754ae5d9460e80e176a928cc53ea75ab7a6f5212 100644
--- a/src/vendor/GLTFLoader.js
+++ b/src/vendor/GLTFLoader.js
@@ -7,8 +7,11 @@
* @author Tony Parisi / http://www.tonyparisi.com/
* @author Takahiro / https://github.com/takahirox
* @author Don McCurdy / https://www.donmccurdy.com
+ * @author netpro2k / https://github.com/netpro2k
*/
+ import { resolveFarsparkUrl } from "../utils/media-utils"
+
THREE.GLTFLoader = ( function () {
function GLTFLoader( manager ) {
@@ -25,7 +28,7 @@ THREE.GLTFLoader = ( function () {
crossOrigin: 'Anonymous',
- load: function ( url, onLoad, onProgress, onError ) {
+ load: async function ( url, onLoad, onProgress, onError ) {
var scope = this;
@@ -37,7 +40,9 @@ THREE.GLTFLoader = ( function () {
loader.setResponseType( 'arraybuffer' );
- loader.load( url, function ( data ) {
+ var farsparkURL = await resolveFarsparkUrl(url);
+
+ loader.load( farsparkURL, function ( data ) {
try {
@@ -1598,7 +1603,7 @@ THREE.GLTFLoader = ( function () {
* @param {number} bufferIndex
* @return {Promise<ArrayBuffer>}
*/
- GLTFParser.prototype.loadBuffer = function ( bufferIndex ) {
+ GLTFParser.prototype.loadBuffer = async function ( bufferIndex ) {
var bufferDef = this.json.buffers[ bufferIndex ];
var loader = this.fileLoader;
@@ -1618,9 +1623,11 @@ THREE.GLTFLoader = ( function () {
var options = this.options;
+ var farsparkURL = await resolveFarsparkUrl(resolveURL(bufferDef.uri, options.path));
+
return new Promise( function ( resolve, reject ) {
- loader.load( resolveURL( bufferDef.uri, options.path ), resolve, undefined, function () {
+ loader.load( farsparkURL, resolve, undefined, function () {
reject( new Error( 'THREE.GLTFLoader: Failed to load buffer "' + bufferDef.uri + '".' ) );
@@ -1784,7 +1791,7 @@ THREE.GLTFLoader = ( function () {
* @param {number} textureIndex
* @return {Promise<THREE.Texture>}
*/
- GLTFParser.prototype.loadTexture = function ( textureIndex ) {
+ GLTFParser.prototype.loadTexture = async function ( textureIndex ) {
var parser = this;
var json = this.json;
@@ -1798,11 +1805,12 @@ THREE.GLTFLoader = ( function () {
var sourceURI = source.uri;
var isObjectURL = false;
- if ( source.bufferView !== undefined ) {
+ var hasBufferView = source.bufferView !== undefined;
+ if ( hasBufferView ) {
// Load binary image data from bufferView, if provided.
- sourceURI = parser.getDependency( 'bufferView', source.bufferView ).then( function ( bufferView ) {
+ sourceURI = await parser.getDependency( 'bufferView', source.bufferView ).then( function ( bufferView ) {
isObjectURL = true;
var blob = new Blob( [ bufferView ], { type: source.mimeType } );
@@ -1813,6 +1821,11 @@ THREE.GLTFLoader = ( function () {
}
+ var urlToLoad = resolveURL(sourceURI, options.path);
+ if (!hasBufferView){
+ urlToLoad = await resolveFarsparkUrl(urlToLoad);
+ }
+
return Promise.resolve( sourceURI ).then( function ( sourceURI ) {
// Load Texture resource.
@@ -1821,7 +1834,7 @@ THREE.GLTFLoader = ( function () {
return new Promise( function ( resolve, reject ) {
- loader.load( resolveURL( sourceURI, options.path ), resolve, undefined, reject );
+ loader.load( urlToLoad, resolve, undefined, reject );
} );
diff --git a/src/workers/gifparsing.worker.js b/src/workers/gifparsing.worker.js
new file mode 100644
index 0000000000000000000000000000000000000000..643a95ab98e52c048ef551a6249e3ef937191389
--- /dev/null
+++ b/src/workers/gifparsing.worker.js
@@ -0,0 +1,72 @@
+/**
+ *
+ * Gif parser by @gtk2k
+ * https://github.com/gtk2k/gtk2k.github.io/tree/master/animation_gif
+ *
+ */
+
+const parseGIF = function(gif, successCB, errorCB) {
+ let pos = 0;
+ const delayTimes = [];
+ let graphicControl = null;
+ const frames = [];
+ const disposals = [];
+ let loopCnt = 0;
+ if (
+ gif[0] === 0x47 &&
+ gif[1] === 0x49 &&
+ gif[2] === 0x46 && // 'GIF'
+ gif[3] === 0x38 &&
+ gif[4] === 0x39 &&
+ gif[5] === 0x61
+ ) {
+ // '89a'
+ pos += 13 + +!!(gif[10] & 0x80) * Math.pow(2, (gif[10] & 0x07) + 1) * 3;
+ const gifHeader = gif.subarray(0, pos);
+ while (gif[pos] && gif[pos] !== 0x3b) {
+ const offset = pos,
+ blockId = gif[pos];
+ if (blockId === 0x21) {
+ const label = gif[++pos];
+ if ([0x01, 0xfe, 0xf9, 0xff].indexOf(label) !== -1) {
+ label === 0xf9 && delayTimes.push((gif[pos + 3] + (gif[pos + 4] << 8)) * 10);
+ label === 0xff && (loopCnt = gif[pos + 15] + (gif[pos + 16] << 8));
+ while (gif[++pos]) pos += gif[pos];
+ if (label === 0xf9) {
+ graphicControl = gif.subarray(offset, pos + 1);
+ disposals.push((graphicControl[3] >> 2) & 0x07);
+ }
+ } else {
+ errorCB && errorCB("parseGIF: unknown label");
+ break;
+ }
+ } else if (blockId === 0x2c) {
+ pos += 9;
+ pos += 1 + +!!(gif[pos] & 0x80) * (Math.pow(2, (gif[pos] & 0x07) + 1) * 3);
+ while (gif[++pos]) pos += gif[pos];
+ const imageData = gif.subarray(offset, pos + 1);
+ frames.push(URL.createObjectURL(new Blob([gifHeader, graphicControl, imageData])));
+ } else {
+ errorCB && errorCB("parseGIF: unknown blockId");
+ break;
+ }
+ pos++;
+ }
+ } else {
+ errorCB && errorCB("parseGIF: no GIF89a");
+ }
+ successCB && successCB(delayTimes, loopCnt, frames, disposals);
+};
+
+self.onmessage = e => {
+ parseGIF(
+ new Uint8Array(e.data),
+ (delays, loopcnt, frames, disposals) => {
+ self.postMessage([true, frames, delays, disposals]);
+ },
+ err => {
+ console.error("Error in gif parsing worker", err);
+ self.postMessage([false, err]);
+ }
+ );
+};
diff --git a/webpack.config.js b/webpack.config.js
index 7f4daa883ea1e19355c8306afb3c5d4a2e5cf39b..5f688d9bfa687d8cc517eb0b98e9d70b74fd71d2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -99,6 +99,7 @@ const config = {
useLocalIp: true,
public: "hubs.local:8080",
port: 8080,
+ headers: { "Access-Control-Allow-Origin": "*" },
before: function(app) {
// networked-aframe makes HEAD requests to the server for time syncing. Respond with an empty body.
app.head("*", function(req, res, next) {
@@ -129,6 +130,14 @@ const config = {
interpolate: "require"
}
},
+ {
+ test: /\.worker\.js$/,
+ loader: "worker-loader",
+ options: {
+ name: "assets/js/[name]-[hash].js",
+ publicPath: "/"
+ }
+ },
{
test: /\.js$/,
include: [path.resolve(__dirname, "src")],
@@ -258,7 +267,8 @@ const config = {
NODE_ENV: process.env.NODE_ENV,
JANUS_SERVER: process.env.JANUS_SERVER,
DEV_RETICULUM_SERVER: process.env.DEV_RETICULUM_SERVER,
- ASSET_BUNDLE_SERVER: process.env.ASSET_BUNDLE_SERVER
+ ASSET_BUNDLE_SERVER: process.env.ASSET_BUNDLE_SERVER,
+ BUILD_VERSION: process.env.BUILD_VERSION
})
})
]
diff --git a/yarn.lock b/yarn.lock
index 22663266a5572652e4b21a4a89850964cca3ae6a..0dc13a86aa4c0e7a671857cc211ee5934b5b12f0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -182,9 +182,9 @@ aframe-physics-extras@^0.1.3:
version "0.1.3"
resolved "https://registry.yarnpkg.com/aframe-physics-extras/-/aframe-physics-extras-0.1.3.tgz#803e2164fb96c0a80f2d1a81458f3277f262b130"
-"aframe-physics-system@github:donmccurdy/aframe-physics-system":
+"aframe-physics-system@https://github.com/mozillareality/aframe-physics-system#hubs/master":
version "3.1.2"
- resolved "https://codeload.github.com/donmccurdy/aframe-physics-system/tar.gz/c142a301e3ce76f88bab817c89daa5b3d4d97815"
+ resolved "https://github.com/mozillareality/aframe-physics-system#50f5deb1134eb0d43c0435d287eef7037818d3cc"
dependencies:
browserify "^14.3.0"
budo "^10.0.3"
@@ -4956,7 +4956,7 @@ loader-utils@^0.2.16:
json5 "^0.5.0"
object-assign "^4.0.1"
-loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
+loader-utils@^1.0.0, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
dependencies:
@@ -5266,6 +5266,10 @@ mime@1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
+mime@^2.0.3:
+ version "2.3.1"
+ resolved "https://registry.yarnpkg.com/mime/-/mime-2.3.1.tgz#b1621c54d63b97c47d3cfe7f7215f7d64517c369"
+
mime@^2.1.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/mime/-/mime-2.2.0.tgz#161e541965551d3b549fa1114391e3a3d55b923b"
@@ -7196,7 +7200,7 @@ sax@~1.2.1:
version "1.2.4"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
-schema-utils@^0.4.2, schema-utils@^0.4.3, schema-utils@^0.4.5:
+schema-utils@^0.4.0, schema-utils@^0.4.2, schema-utils@^0.4.3, schema-utils@^0.4.5:
version "0.4.5"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.5.tgz#21836f0608aac17b78f9e3e24daff14a5ca13a3e"
dependencies:
@@ -8268,6 +8272,14 @@ url-join@^2.0.2:
version "2.0.5"
resolved "https://registry.yarnpkg.com/url-join/-/url-join-2.0.5.tgz#5af22f18c052a000a48d7b82c5e9c2e2feeda728"
+url-loader@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-1.0.1.tgz#61bc53f1f184d7343da2728a1289ef8722ea45ee"
+ dependencies:
+ loader-utils "^1.1.0"
+ mime "^2.0.3"
+ schema-utils "^0.4.3"
+
url-parse-lax@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73"
@@ -8673,6 +8685,13 @@ worker-farm@^1.5.2:
errno "^0.1.4"
xtend "^4.0.1"
+worker-loader@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-2.0.0.tgz#45fda3ef76aca815771a89107399ee4119b430ac"
+ dependencies:
+ loader-utils "^1.0.0"
+ schema-utils "^0.4.0"
+
wrap-ansi@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"