feat[krpano]: webvr

packages/krpano/package.json

@@ -13,8 +13,6 @@
     "prebuild": "rimraf dist",
     "build": "tsc --build tsconfig.build.json",
     "type-check": "tsc --noEmit",
-    "copy": "cpx \"src/lib/*\" ./dist/lib",
-    "postbuild": "npm run copy",
     "test": "jest"
   },
   "peerDependencies": {

packages/krpano/src/KrpanoActionProxy.ts

@@ -44,9 +44,16 @@ export class KrpanoActionProxy {
   }
 
   setTag(
-    tag: "scene" | "hotspot" | "layer" | "view" | "events" | "autorotate",
+    tag:
+      | "scene"
+      | "hotspot"
+      | "layer"
+      | "view"
+      | "events"
+      | "autorotate"
+      | "plugin",
     name: string | null,
-    attrs: Record<string, string | boolean | number | undefined>
+    attrs: Record<string, any>
   ): void {
     let nexttick = false;
 

packages/krpano/src/components/Krpano.tsx

@@ -4,12 +4,17 @@ import { useEventCallback } from "../hooks";
 import { IKrpanoConfig, NativeKrpanoRendererObject } from "../types";
 import { useKrpano } from "../hooks/useKrpano";
 import { CurrentSceneContext, KrpanoRendererContext } from "../contexts";
+import { WebVR } from "./WebVR";
 
 export interface KrpanoProps extends Omit<IKrpanoConfig, "onready" | "target"> {
   className?: string;
   children?: React.ReactNode;
   currentScene?: string;
   target?: string;
+  /**
+   * webvr.xml 地址，需遵循同源策略
+   */
+  webvrUrl?: string;
   onReady?: (renderer: KrpanoActionProxy) => void;
 }
 
@@ -18,6 +23,7 @@ export const Krpano: React.FC<KrpanoProps> = ({
   children,
   currentScene,
   target = "krpano",
+  webvrUrl,
   onReady,
   ...rest
 }) => {
@@ -56,6 +62,8 @@ export const Krpano: React.FC<KrpanoProps> = ({
         >
           {renderer ? children : null}
         </div>
+
+        {webvrUrl && <WebVR url={webvrUrl} />}
       </CurrentSceneContext.Provider>
     </KrpanoRendererContext.Provider>
   );

packages/krpano/src/components/WebVR/index.tsx

@@ -0,0 +1,32 @@
+import { FC, useContext, useEffect } from "react";
+import { KrpanoRendererContext } from "../../contexts";
+import { buildKrpanoAction } from "../../utils";
+
+export interface WebVRProps {
+  url: string;
+}
+
+const PLUGIN_CONFIG = {
+  keep: true,
+  devices: "html5",
+  multireslock: {
+    desktop: true,
+    "mobile.or.tablet": false,
+  },
+  mobilevr_support: true,
+  mobilevr_fake_support: true,
+};
+
+export const WebVR: FC<WebVRProps> = ({ url }) => {
+  const renderer = useContext(KrpanoRendererContext);
+
+  useEffect(() => {
+    if (url && renderer) {
+      renderer.call(buildKrpanoAction("loadpano", url, "null", "MERGE"));
+
+      renderer?.setTag("plugin", "WebVR", PLUGIN_CONFIG);
+    }
+  }, [renderer]);
+
+  return <></>;
+};

packages/krpano/src/utils.ts

@@ -5,6 +5,7 @@ type FuncName =
   | "set"
   | "loadxml"
   | "loadscene"
+  | "loadpano"
   | "tween"
   | "addhotspot"
   | "removehotspot"