Feature: Animator and Camera animations.

CHANGELOG.md

@@ -7,6 +7,8 @@ The format is based on [Keep a Changelog](https://github.com/olivierlacan/keep-a
 
 ### Added
 
+- Add camera animation for viewer with `animejs`. (https://github.com/yushiang-demo/pano-to-mesh/pull/68)
+
 ### Changed
 
 ### Fixed

apps/viewer.js

@@ -1,6 +1,7 @@
-import React, { useRef, useMemo } from "react";
-
+import React, { useRef, useMemo, useState, useCallback } from "react";
+import Animator from "@pano-to-mesh/anime";
 import {
+  Core,
   Loaders,
   ThreeCanvas,
   PanoramaProjectionMesh,
@@ -10,11 +11,17 @@ import {
 import useClick2AddWalls from "../hooks/useClick2AddWalls";
 import MediaManager from "../components/MediaManager";
 import { MEDIA_2D, MEDIA_3D } from "../components/MediaManager/types";
+import useMouseSkipDrag from "../hooks/useMouseSkipDrag";
+import ToolbarRnd from "../components/ToolbarRnd";
+import Toolbar from "../components/Toolbar";
+import Icons from "../components/Icon";
 
 const dev = process.env.NODE_ENV === "development";
 const Viewer = ({ data }) => {
   const threeRef = useRef(null);
-
+  const [isTopView, setIsTopView] = useState(true);
+  const [isCameraMoving, setIsCameraMoving] = useState(false);
+  const [baseMesh, setBaseMesh] = useState(null);
   const geometryInfo = useMemo(
     () => ({
       floorY: data.floorY,
@@ -35,22 +42,97 @@ const Viewer = ({ data }) => {
     panorama: Loaders.useTexture({ src: data.panorama }),
   };
 
-  const onLoad = (mesh) => {
+  const onLoad = useCallback((mesh) => {
     threeRef.current.cameraControls.focus(mesh);
-  };
+    setBaseMesh(mesh);
+  }, []);
 
   const media = (data.media || []).filter(
     (data) =>
       ![MEDIA_3D.PLACEHOLDER_3D, MEDIA_2D.PLACEHOLDER_2D].includes(data.type)
   );
 
+  const runAnimation = (clips, onfinish) => {
+    if (isCameraMoving) return;
+
+    const timeline = Animator.createTimeline();
+    clips.forEach(timeline.addClip);
+    timeline.play();
+    timeline.finished.then(() => {
+      setIsCameraMoving(false);
+      if (onfinish) onfinish();
+    });
+    setIsCameraMoving(true);
+  };
+
+  const goTop = () => {
+    if (isCameraMoving) return;
+
+    const { cameraControls } = threeRef.current;
+    const { animations } = cameraControls;
+    const clip = animations.moveToTop(baseMesh);
+
+    runAnimation(clip, () => setIsTopView(true));
+  };
+
+  const goDown = () => {
+    if (isCameraMoving) return;
+
+    const { cameraControls } = threeRef.current;
+    const { animations } = cameraControls;
+    const clip = animations.moveFromTop(data.panoramaOrigin);
+
+    runAnimation(clip, () => setIsTopView(false));
+  };
+
+  const eventsHandlers = useMouseSkipDrag(({ normalizedX, normalizedY }) => {
+    const { cameraControls } = threeRef.current;
+    const { animations } = cameraControls;
+
+    const intersections = Core.raycastMeshFromScreen(
+      [normalizedX, normalizedY],
+      cameraControls.getCamera(),
+      baseMesh
+    );
+
+    const firstIntersections = intersections[0];
+
+    if (!firstIntersections) return;
+
+    const { faceNormal, point } = firstIntersections;
+    const cameraHeight = data.panoramaOrigin[1];
+    const target = [
+      point[0] + faceNormal[0] * cameraHeight,
+      cameraHeight,
+      point[2] + faceNormal[2] * cameraHeight,
+    ];
+
+    runAnimation(
+      (isTopView ? animations.moveFromTop : animations.moveTo)(target),
+      () => setIsTopView(false)
+    );
+  });
+
   return (
-    <ThreeCanvas dev={dev} ref={threeRef}>
-      <BackgroundPanel />
-      <Light />
-      <PanoramaProjectionMesh {...textureMeshProps} onLoad={onLoad} />
-      <MediaManager data={media} />
-    </ThreeCanvas>
+    <>
+      <ThreeCanvas dev={dev} ref={threeRef} {...eventsHandlers}>
+        <BackgroundPanel />
+        <Light />
+        <PanoramaProjectionMesh {...textureMeshProps} onLoad={onLoad} />
+        <MediaManager data={media} />
+      </ThreeCanvas>
+      {!isCameraMoving && (
+        <ToolbarRnd>
+          <Toolbar>
+            {isTopView ? (
+              <Icons.arrowToDown onClick={goDown} />
+            ) : (
+              <Icons.arrowToTop onClick={goTop} />
+            )}
+          </Toolbar>
+        </ToolbarRnd>
+      )}
+    </>
   );
 };
 

components/Icon/index.js

@@ -38,6 +38,8 @@ const Icon = ({ src, onClick, ...props }) => {
 // all svg resources is download from https://www.svgrepo.com/vectors/cursor/
 const IconFolder = `/icons`;
 const files = {
+  arrowToDown: `${IconFolder}/arrowToDown.svg`,
+  arrowToTop: `${IconFolder}/arrowToTop.svg`,
   download: `${IconFolder}/download.svg`,
   panorama: `${IconFolder}/panorama.svg`,
   camera: `${IconFolder}/camera.svg`,

hooks/useMouseSkipDrag.js

@@ -0,0 +1,36 @@
+import { useState } from "react";
+
+const MOUSE_UP_THRESHOLD = 5;
+
+const useMouseSkipDrag = (handleMouseUp) => {
+  const [cursorPosition, setCursorPosition] = useState(null);
+  const [cumulativeDelta, setCumulativeDelta] = useState(0);
+
+  const onMouseDown = ({ offsetX, offsetY }) => {
+    setCursorPosition({ offsetX, offsetY });
+    setCumulativeDelta(0);
+  };
+  const onMouseMove = ({ offsetX, offsetY }) => {
+    if (!cursorPosition) return;
+    setCumulativeDelta(
+      (prev) =>
+        prev +
+        Math.abs(offsetX - cursorPosition.offsetX) +
+        Math.abs(offsetY - cursorPosition.offsetY)
+    );
+    setCursorPosition({ offsetX, offsetY });
+  };
+  const onMouseUp = (data) => {
+    setCursorPosition(null);
+    if (MOUSE_UP_THRESHOLD < cumulativeDelta) return;
+    handleMouseUp(data);
+  };
+
+  return {
+    onMouseDown,
+    onMouseMove,
+    onMouseUp,
+  };
+};
+
+export default useMouseSkipDrag;

package.json

@@ -15,6 +15,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@pano-to-mesh/anime": "1.0.0",
     "@pano-to-mesh/three": "1.0.0",
     "@pano-to-mesh/base64": "1.0.0",
     "next": "13.2.4",

packages/anime/index.js

@@ -0,0 +1,47 @@
+import anime from "animejs";
+
+const Animator = (() => {
+  const createTimeline = () => {
+    const animation = anime.timeline({
+      autoplay: false,
+    });
+
+    const addClip = ({
+      begin,
+      update,
+      complete,
+      duration,
+      easing,
+      timeOffset,
+    }) => {
+      animation.add(
+        {
+          duration: duration || 1e3,
+          easing: easing || "linear",
+          update: (anim) => {
+            update(anim.progress / 1e2);
+          },
+          begin: begin,
+          complete: complete,
+        },
+        timeOffset
+      );
+    };
+
+    const play = () => {
+      animation.play();
+    };
+
+    return {
+      finished: animation.finished,
+      addClip,
+      play,
+    };
+  };
+
+  return {
+    createTimeline,
+  };
+})();
+
+export default Animator;

packages/anime/package.json

@@ -0,0 +1,7 @@
+{
+  "version": "1.0.0",
+  "name": "@pano-to-mesh/anime",
+  "dependencies": {
+    "animejs": "^3.2.2"
+  }
+}

packages/three/components/ThreeCanvas/index.js

@@ -70,6 +70,7 @@ const ThreeCanvas = (
     setThree(publicProps);
 
     const cancelResizeListener = addBeforeRenderEvent(() => {
+      if (!WrapperRef.current) return;
       const { clientWidth: width, clientHeight: height } = WrapperRef.current;
       setCanvasSize(width, height);
       css3DControls.setSize(width, height);