From b7d4314da9146a4dd8f27cc0a7fbe2ab3223d75f Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Wed, 14 Nov 2018 06:59:29 +0000
Subject: [PATCH] More progress
---
src/components/follow-in-lower-fov.js | 51 +++++++++++++++++++++++++++
src/react-components/chat-message.js | 30 ++++++++++------
2 files changed, 70 insertions(+), 11 deletions(-)
create mode 100644 src/components/follow-in-lower-fov.js
diff --git a/src/components/follow-in-lower-fov.js b/src/components/follow-in-lower-fov.js
new file mode 100644
index 000000000..0700ccca2
--- /dev/null
+++ b/src/components/follow-in-lower-fov.js
@@ -0,0 +1,51 @@
+AFRAME.registerComponent("follow-in-lower-fov", {
+ schema: {
+ target: { type: "selector" },
+ offset: { type: "vec3" },
+ speed: { type: "number", default: 0.005 }
+ },
+
+ init() {
+ this.targetPos = new THREE.Vector3();
+ this.offset = new THREE.Vector3();
+ this.offset.copy(this.data.offset);
+ },
+
+ tick(t, dt) {
+ const obj = this.el.object3D;
+ const target = this.data.target.object3D;
+
+ const snappedRot = new THREE.Euler(-Math.PI / 4, target.rotation.y, 0, target.rotation.order);
+
+ const snappedQ = new THREE.Quaternion();
+ snappedQ.setFromEuler(snappedRot);
+ const snappedXForm = new THREE.Matrix4();
+ const snappedXFormWorld = new THREE.Matrix4();
+ snappedXForm.compose(
+ target.position,
+ snappedQ,
+ target.scale
+ );
+ snappedXFormWorld.multiplyMatrices(target.parent.matrixWorld, snappedXForm);
+
+ this.targetPos.copy(this.offset);
+ this.targetPos.applyMatrix4(snappedXFormWorld);
+
+ if (obj.parent) {
+ obj.parent.worldToLocal(this.targetPos);
+ }
+
+ if (!this.started) {
+ obj.position.copy(this.targetPos);
+ this.started = true;
+ } else {
+ obj.position.set(
+ obj.position.x + (this.targetPos.x - obj.position.x) * this.data.speed * dt,
+ obj.position.y + (this.targetPos.y - obj.position.y) * this.data.speed * dt,
+ obj.position.z + (this.targetPos.z - obj.position.z) * this.data.speed * dt
+ );
+ }
+
+ target.getWorldQuaternion(obj.quaternion);
+ }
+});
diff --git a/src/react-components/chat-message.js b/src/react-components/chat-message.js
index 57137fc1e..3e1014cfa 100644
--- a/src/react-components/chat-message.js
+++ b/src/react-components/chat-message.js
@@ -149,19 +149,27 @@ export async function createInWorldChatMessage(body, lowResolution) {
property: "position",
dur: 15000,
from: { x: 0, y: 0, z: 0 },
- to: { x: 0, y: 0, z: -0.05 },
+ to: { x: 0, y: 0.05, z: -0.05 },
easing: "easeOutQuad"
});
- //meshEntity.setAttribute("animation__opacity", {
- // property: "meshMaterial.opacity",
- // isRawProperty: true,
- // delay: 3000,
- // dur: 13000,
- // from: 1.0,
- // to: 0.0,
- // easing: "easeInQuad"
- //});
+ entity.setAttribute("animation__spawn", {
+ property: "scale",
+ dur: 200,
+ from: { x: 0.1, y: 0.1, z: 0.1 },
+ to: { x: 1, y: 1, z: 1 },
+ easing: "easeOutElastic"
+ });
+
+ meshEntity.setAttribute("animation__opacity", {
+ property: "meshMaterial.opacity",
+ isRawProperty: true,
+ delay: 3000,
+ dur: 13000,
+ from: 1.0,
+ to: 0.0,
+ easing: "easeInQuad"
+ });
meshEntity.addEventListener("animationcomplete__opacity", () => {
entity.parentNode.removeChild(entity);
@@ -191,7 +199,7 @@ export async function spawnChatMessage(body, lowResolution) {
return;
}
- const blob = await renderChatMessage(body, false);
+ const blob = await renderChatMessage(body, false, lowResolution);
document.querySelector("a-scene").emit("add_media", new File([blob], "message.png", { type: "image/png" }));
}
--
GitLab