fix!: upgrade mc version, simplify demo, and fix resize bug

demo/entities.js

@@ -0,0 +1,25 @@
+export const mainScene = {
+  id: "main-scene",
+  model: {
+    id: "main-scene",
+    loader: "GLTFLoader",
+    file: "https://donkey-spaces.ams3.cdn.digitaloceanspaces.com/assets/threejs-plugin/christmas-village.glb",
+  },
+  settings: {
+    position: { x: 0, y: 0, z: 0 },
+  },
+};
+
+export const man = {
+  id: "man",
+  model: {
+    id: "man",
+    loader: "GLTFLoader",
+    file: "https://donkey-spaces.ams3.cdn.digitaloceanspaces.com/assets/threejs-plugin/man.glb",
+  },
+  settings: {
+    position: { x: 4, y: 0, z: -6 },
+    rotation: { x: 0, y: -Math.PI / 2.5, z: 0 },
+    scale: { x: 0.01, y: 0.01, z: 0.01 },
+  },
+};

demo/incidents.js

@@ -0,0 +1,68 @@
+import { loadPlugin } from "@donkeyclip/motorcortex";
+import threeDef from "../src/index";
+const threejs = loadPlugin(threeDef);
+
+/* configuration and helper functions */
+export const cameraInitialPosition = { x: -50, y: 20, z: 20 };
+const cameraAnimation = (position, duration) =>
+  new threejs.ObjectAnimation(
+    {
+      animatedAttrs: {
+        targetEntity: "!#man",
+        position,
+      },
+    },
+    {
+      selector: "!#camera_1",
+      duration,
+    }
+  );
+
+/* actual incidents */
+export const animateScene = new threejs.MorphAnimation(
+  {
+    attrs: {
+      singleLoopDuration: 1000,
+      animationName: "Idle",
+    },
+    animatedAttrs: {
+      time: 10000,
+    },
+  },
+  {
+    selector: "!#main-scene",
+    duration: 10000,
+  }
+);
+export const animateMan = new threejs.MorphAnimation(
+  {
+    attrs: {
+      singleLoopDuration: 1000,
+      animationName: "armature|walk",
+    },
+    animatedAttrs: {
+      time: 10000,
+    },
+  },
+  {
+    selector: "!#man",
+    duration: 10000,
+  }
+);
+export const moveMan = new threejs.ObjectAnimation(
+  {
+    animatedAttrs: {
+      position: { x: -10, y: 0, z: -1 },
+    },
+  },
+  {
+    selector: "!#man",
+    duration: 10000,
+  }
+);
+export const cameraZoomIn = () =>
+  cameraAnimation({ x: -20, y: 20, z: 20 }, 5000);
+
+export const cameraGoDown = () => cameraAnimation({ x: -19, y: 2, z: 4 }, 2000);
+export const cameraWatchMan = () =>
+  cameraAnimation({ x: -19, y: 2, z: 4 }, 3000);

demo/index.css

@@ -0,0 +1,14 @@
+html,
+body {
+  font-size: 14px;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  background-color: #282828;
+}
+
+#clip {
+  background-color: #000;
+  width: 100%;
+  height: 100%;
+}