feat[krpano]: autorotate

packages/krpano-cli/template/src/pages/Home/index.scss

@@ -6,6 +6,11 @@
 
 $primaryColor: coral;
 
+.active-btn {
+  color: white;
+  background-color: $primaryColor;
+}
+
 .toolbar {
   display: flex;
   gap: 10px;

packages/krpano-cli/template/src/pages/Home/index.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from "react";
 import classnames from "classnames";
 import {
+  Autorotate,
   HotSpot,
   Krpano,
   ROTATE_DIRECTION,
@@ -17,6 +18,7 @@ const URL = "https://houseoss.4dkankan.com/project/leifeng-transfer";
 export default function HomePage() {
   const [currentMenu, setCurrentMenu] = useState(0);
   const [currentScene, setCurrentScene] = useState("center1");
+  const [autorotateEnable, setAutorotateEnable] = useState(false);
   const CENTER_SCENE_LIST = useMemo<ISceneProps[]>(
     () => [
       {
@@ -188,6 +190,8 @@ export default function HomePage() {
         currentScene={currentScene}
         passQueryParameters={true}
       >
+        <Autorotate enabled={autorotateEnable} />
+
         {[...CENTER_SCENE_LIST, ...SERVICE_SCENE_LIST].map((sc) => (
           <Scene key={sc.name} {...sc} />
         ))}
@@ -252,7 +256,12 @@ export default function HomePage() {
         <MouseHoldView onHold={handleZoom.bind(undefined, ZOOM_ACTION.OUT)}>
           <button>-</button>
         </MouseHoldView>
-        <button>360°</button>
+        <button
+          className={classnames(autorotateEnable && "active-btn")}
+          onClick={() => setAutorotateEnable(!autorotateEnable)}
+        >
+          360°
+        </button>
         <button>vr</button>
       </div>
     </div>

packages/krpano/src/KrpanoActionProxy.ts

@@ -44,7 +44,7 @@ export class KrpanoActionProxy {
   }
 
   setTag(
-    tag: "scene" | "hotspot" | "layer" | "view" | "events",
+    tag: "scene" | "hotspot" | "layer" | "view" | "events" | "autorotate",
     name: string | null,
     attrs: Record<string, string | boolean | number | undefined>
   ): void {

packages/krpano/src/components/Autorotate.tsx

@@ -0,0 +1,56 @@
+import React, { useContext, useEffect } from "react";
+import { KrpanoRendererContext } from "../contexts";
+
+/**
+ * @see https://krpano.com/docu/xml/#autorotate
+ */
+export interface AutorotateProps {
+  enabled: boolean;
+  /**
+   * 用户交互后等待的时间（秒）
+   * @default 2
+   */
+  waittime?: number;
+  /**
+   * 自动旋转的速度
+   * @default 10
+   */
+  speed?: number;
+  /**
+   * 自动旋转时视角的水平位置
+   * @default 0
+   */
+  horizon?: number;
+  /**
+   * 旋转的加速度
+   * @default 1
+   */
+  accel?: number;
+  tofov?: "off" | number;
+  oneroundrange?: number;
+  /**
+   * 当用户放大或缩小（通过滚动鼠标滚轮或手势）时，启用这个属性会减缓缩放的速度
+   * @default true
+   */
+  zoomslowdown?: boolean;
+  /**
+   * 定义哪些事件可以中断全景图像的交互操作
+   * @default userviewchange|layers|keyboard
+   */
+  interruptionevents?: string;
+}
+
+export const Autorotate: React.FC<AutorotateProps> = (props) => {
+  const renderer = useContext(KrpanoRendererContext);
+
+  useEffect(() => {
+    const options = {
+      waittime: 2,
+      speed: 10,
+      ...props,
+    };
+    renderer?.setTag("autorotate", null, options);
+  }, [renderer, props]);
+
+  return <div className="autorotate" />;
+};

packages/krpano/src/components/index.ts

@@ -2,3 +2,4 @@ export * from "./Krpano";
 export * from "./Scene";
 export * from "./View";
 export * from "./HotSpot";
+export * from "./Autorotate";