@realsee/five 5.0.0-alpha.11 → 5.0.0-alpha.110

package/react/hooks/useFiveWork.d.ts

@@ -1,30 +0,0 @@
-import { Work } from "@realsee/five";
-import { useFiveWorkLoader } from "../context";
-/**
- * Five React Hooks: 获取/设置当前的 Work
- *
- * @returns
- * [ work: 获取当前的 Work, loadWork: 设置 Work ]
-
-* @function loadWork
- * ```
- * 加载 Work 数据
- * // param work Work 数据
- * // param state 初始化姿态
- * //  - "inherit" 使用当前姿态
- * //  - "initial" 使用 Work 数据中的 initial 姿态
- * //  - State 自定义姿态
- * // param duration 切换时间
- * (work: Work, state?: "inherit" | "initial" | Partial<Omit<State, "offset">>, duration?: number) => void
- * ```
- *
- * @example
- * ```
- * const [ work, loadWork ] = useFiveWork;
- * ```
- */
-declare function useFiveWork(): [
-    work: Work,
-    loadWork: ReturnType<typeof useFiveWorkLoader>
-];
-export { useFiveWork };

package/react/hooks/useFiveWork.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useFiveWork=void 0;var e=require("tslib").__importStar(require("react")),r=require("../context");exports.useFiveWork=function(){var t=r.useFiveInstance(),o=r.useFiveWorkLoader(),u=e.useState((function(){return t.work})),n=u[0],i=u[1];return e.useLayoutEffect((function(){return t.on("load",(function(){return i(t.work)}))}),[t]),[n,o]};

package/react/rendererPool.d.ts

@@ -1,8 +0,0 @@
-import * as THREE from "three";
-declare function getRenderer({ backgroundColor, backgroundAlpha, pixelRatio, }?: {
-    backgroundColor?: number;
-    backgroundAlpha?: number;
-    pixelRatio?: number;
-}): THREE.WebGLRenderer;
-declare function revokeRenderer(renderer: THREE.WebGLRenderer): void;
-export { getRenderer, revokeRenderer };

package/react/rendererPool.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.revokeRenderer=exports.getRenderer=void 0;var e=require("tslib").__importStar(require("three")),r=[];exports.getRenderer=function(o){var t=void 0===o?{}:o,i=t.backgroundColor,a=void 0===i?1579548:i,n=t.backgroundAlpha,d=void 0===n?1:n,s=t.pixelRatio,l=void 0===s?1:s,u=r.shift();return u||(u=new e.WebGLRenderer({antialias:!1,alpha:!0})),u.setPixelRatio(l),u.setClearColor(a,d),u.autoClear=!0,u},exports.revokeRenderer=function(e){-1===r.indexOf(e)&&r.push(e)};

package/react/withFive.d.ts

@@ -1,239 +0,0 @@
-import * as React from "react";
-import * as THREE from "three";
-import { useFiveWorkLoader } from "./context";
-import { Five, Model } from "@realsee/five";
-declare const INJECT_SYMBOL = "$five";
-declare type DataFeature = "unsafe__fiveInstance" | "currentState" | "state" | "work" | "scene" | "cameraDirection" | "cameraRaycaster" | "modelReadyState";
-declare type ActionFeature = "loadWork" | "setState" | "on" | "off" | "intersectRaycaster" | "project2d" | "updateCamera" | "initBasisLoader" | "getPixels" | "render" | "needsRender" | "preloadPano";
-declare type Feature = DataFeature | ActionFeature;
-declare function useFiveState(five: Five, features: Feature[]): readonly [{
-    mode: import("../types/mode").Mode;
-    panoIndex: number;
-    longitude: number;
-    latitude: number;
-    fov: number;
-    offset: THREE.Vector3;
-}, symbol];
-declare function useFiveCurrentState(five: Five, features: Feature[]): readonly [import("../types/state").State, symbol];
-declare function useUnsafe__fiveInstance(five: Five, features: Feature[]): readonly [Five];
-declare function useFiveWork(five: Five, features: Feature[]): readonly [import("../work/workType").Work, symbol];
-declare function useLoadWork(loadWork: ReturnType<typeof useFiveWorkLoader>, features: Feature[]): undefined | ReturnType<typeof useFiveWorkLoader>;
-declare function useSetState(five: Five, features: Feature[]): undefined | Five["setState"];
-declare function useOn(five: Five, features: Feature[]): undefined | Five["on"];
-declare function useOnce(five: Five, features: Feature[]): undefined | Five["once"];
-declare function useOff(five: Five, features: Feature[]): undefined | Five["off"];
-declare function useModelIntersectRaycaster(five: Five, features: Feature[]): undefined | Model["intersectRaycaster"];
-declare function useProject2d(five: Five, features: Feature[]): undefined | Five["project2d"];
-declare function useUpdateCamera(five: Five, features: Feature[]): undefined | Five["updateCamera"];
-declare function useInitBasisLoader(five: Five, features: Feature[]): undefined | Five["initBasisLoader"];
-declare function useGetPixels(five: Five, features: Feature[]): undefined | Five["getPixels"];
-declare function useRender(five: Five, features: Feature[]): undefined | Five["render"];
-declare function useNeedsRender(five: Five, features: Feature[]): undefined | (() => void);
-declare function usePreloadPano(five: Five, features: Feature[]): undefined | Five["preloadPano"];
-interface InjectFive extends Record<Feature, any> {
-    /**
-     * Five React Inject: 获取 five 实例
-     * @description
-     * 不到万不得已，并不推荐直接使用。
-     * @deprecated
-     */
-    unsafe__fiveInstance: NonNullable<ReturnType<typeof useUnsafe__fiveInstance>[0]>;
-    /**
-     * Five React Inject: Five 的目标状态
-     * @description
-     * ```text
-     * five 设置了以下状态
-     *
-     * - mode: Mode
-     * - panoIndex: number
-     * - longitude: number
-     * - latitude: number
-     * - fov: number
-     * - offset: THREE.Vector3
-     *
-     * 可以通过 state, currentState 和 setState 来获取和设置。
-     * 通过 state 设置后，five 会通过合适的动画运动来达到设置的位置。
-     * 来迎合一些通过数据驱动的场景。
-     * ```
-     */
-    state: NonNullable<ReturnType<typeof useFiveState>[0]>;
-    /**
-     * Five React Inject: Five 的当前状态
-     * @description
-     * ```text
-     * five 设置了以下状态
-     *
-     * - mode: Mode
-     * - panoIndex: number
-     * - longitude: number
-     * - latitude: number
-     * - fov: number
-     * - offset: THREE.Vector3
-     *
-     * 可以通过 state, currentState 和 setState 来获取和设置。
-     * 通过 state 设置后，five 会通过合适的动画运动来达到设置的位置。
-     * 来迎合一些通过数据驱动的场景。
-     * ```
-     */
-    currentState: NonNullable<ReturnType<typeof useFiveCurrentState>[0]>;
-    /**
-     * Five React Inject: Five Work
-     */
-    work: NonNullable<ReturnType<typeof useFiveWork>[0]>;
-    /**
-     * 设置 State
-     * @description
-     * ```text
-     * five 设置了以下状态
-     *
-     * - mode: Mode
-     * - panoIndex: number
-     * - longitude: number
-     * - latitude: number
-     * - fov: number
-     * - offset: THREE.Vector3
-     *
-     * 可以通过 state, currentState 和 setState 来获取和设置。
-     * 通过 state 设置后，five 会通过合适的动画运动来达到设置的位置。
-     * 来迎合一些通过数据驱动的场景。
-     *
-     * @param state 目标状态
-     * @param immediately 是否马上转换，马上转换会尽快达到目标状态，尽量减少中间状态，更少动画。
-     */
-    setState: NonNullable<ReturnType<typeof useSetState>>;
-    /**
-     * 加载 Work 数据
-     * @param inputWork Work 数据
-     * @param state 初始化姿态
-     *  - "inherit" 使用当前姿态
-     *  - "initial" 使用 Work 数据中的 initial 姿态
-     *  - State 自定义姿态
-     * @param duration 切换时间
-     */
-    loadWork: NonNullable<ReturnType<typeof useLoadWork>>;
-    /**
-     * 监听事件
-     * @param name 事件名 具体事件列表 请查看 {@link FiveEventCallback}
-     * @param callback 回调函数
-     * @param once 是否一次触发
-     * @returns 解除事件绑定
-     * @example
-     * ```
-     * $five.on("panoArrived", () => {});
-     * ```
-     */
-    on: NonNullable<ReturnType<typeof useOn>>;
-    /**
-   * 监听事件一次触发
-   * @param name 事件名 具体事件列表 请查看 {@link FiveEventCallback}
-   * @param callback 回调函数
-   * @returns 解除事件绑定
-   * @example
-   * ```
-   * $five.once("panoArrived", () => {});
-   * ```
-   */
-    once: NonNullable<ReturnType<typeof useOnce>>;
-    /**
-     * 解除事件绑定
-     * @param name 事件名 具体事件列表 请查看 {@link FiveEventCallback}
-     * @param callback 回调函数
-     * @example
-     * ```
-     * $five.off("panoArrived", () => {});
-     * ```
-     */
-    off: NonNullable<ReturnType<typeof useOff>>;
-    /**
-     * 计算模型射线碰撞检测
-     * @param raycaster THREE 射线对象
-     * @param floors 和某一楼层做碰撞检测， 不传为和所有楼层做碰撞检测
-     * @returns 返回碰撞
-     */
-    intersectRaycaster: NonNullable<ReturnType<typeof useModelIntersectRaycaster>>;
-    /**
-     * 计算三维坐标对应到屏幕的二维坐标
-     * @description
-     * 如果三维坐标不在屏幕中，则返回 null
-     * @param vector 三维坐标
-     * @param testModel 是否计算模型遮挡
-     * @returns 二维坐标 或者 null
-     */
-    project2d: NonNullable<ReturnType<typeof useProject2d>>;
-    /**
-     * 移动相机。（不触发点位移动）
-     * @description
-     * 如果动画中途被打断（用户触发行为，或者调用 setState, load, changeMode）的等
-     * 会 Promise.reject。运动完成则 Promise.resolve
-     * @param pose 相机目标位置
-     * @param duration 动画触发的时常
-     * @returns Promise 是否移动成功
-     */
-    updateCamera: NonNullable<ReturnType<typeof useUpdateCamera>>;
-    /**
-     * 初始化 initBasisLoader
-     * @description
-     * 同初始化的 initBasisLoader 参数。用于初始化 basisLoader。
-     * basisLoader 只会初始化一次，一旦初始化则不会再修改。
-     *
-     * @param transcoderResourcePath
-     * 如果不设置，使用默认解析器 basis 解析器。
-     * 可以传入解析器的 `resourcePath`, 则使用指定的解析器
-     * @example
-     * ```
-     * // 使用默认解析器
-     * five.initialBasisLoader();
-     *
-     * // 使用指定解析器
-     * // 会调用这个目录下的 basis_transcoder.js basis_transcoder.wasm 文件作为解析器
-     * five.initialBasisLoader("https://vrlab-public.ljcdn.com/release/static/image/release/five/basis/");
-     * ```
-     */
-    initBasisLoader: NonNullable<ReturnType<typeof useInitBasisLoader>>;
-    /**
-     * 获取画面中的像素颜色
-     * @param x 获取像素区域的起始坐标 x
-     * @param y 获取像素区域的起始坐标 y
-     * @param width 获取像素区域的宽度
-     * @param height 获取像素区域的高度
-     * @param pixelRatio 获取区域的像素比
-     * @returns rgba颜色平铺的 Uint8Array
-     */
-    getPixels: NonNullable<ReturnType<typeof useGetPixels>>;
-    /**
-     * 强制渲染
-     * @description
-     * 调用 `render()` 和设置 `needsRender()` 均可在按需渲染时，使得画面渲染一次
-     * 区别在于：
-     * - `needsRender()` 为在下帧渲染画面
-     * - `render()` 在当前帧渲染画面
-     * 推荐使用 `needsRender()`, 可以更加流畅。但是如果需要截图等同步操作，可以使用 `render()`
-     *
-     * @param callback 渲染完成回调
-     */
-    render: NonNullable<ReturnType<typeof useRender>>;
-    /**
-     * 下一帧渲染
-     * @description
-     * 调用 `render()` 和设置 `needsRender()` 均可在按需渲染时，使得画面渲染一次
-     * 区别在于：
-     * - `needsRender()` 为在下帧渲染画面
-     * - `render()` 在当前帧渲染画面
-     * 推荐使用 `needsRender()`, 可以更加流畅。但是如果需要截图等同步操作，可以使用 `render()`
-     *
-     * @param callback 渲染完成回调
-     */
-    needsRender: NonNullable<ReturnType<typeof useNeedsRender>>;
-    /**
-     * 预加载点位图片资源
-     * @param panoIndex 观察点序号
-     * @param callback 加载完成回调, 并传递加载用时。
-     * @returns 加载完成的 Promise 参数同 callback
-     */
-    preloadPano: NonNullable<ReturnType<typeof usePreloadPano>>;
-}
-interface InjectFiveToProps<F extends Feature> {
-    [INJECT_SYMBOL]: Pick<InjectFive, F>;
-}
-declare function withFive<F extends Feature>(...features: F[]): <P extends InjectFiveToProps<F>, C extends React.ComponentClass<P, any>>(Component: C & React.ComponentClass<P, any>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<P, "$five">> & React.RefAttributes<Omit<InstanceType<C>, "state" | "setState" | "render" | "componentDidMount" | "shouldComponentUpdate" | "componentWillUnmount" | "componentDidCatch" | "getSnapshotBeforeUpdate" | "componentDidUpdate" | "componentWillMount" | "UNSAFE_componentWillMount" | "componentWillReceiveProps" | "UNSAFE_componentWillReceiveProps" | "componentWillUpdate" | "UNSAFE_componentWillUpdate" | "context" | "forceUpdate" | "props" | "refs">>>;
-export { withFive, InjectFiveToProps, Feature as InjectFiveFeature };

package/react/withFive.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.withFive=void 0;var e=require("tslib"),n=e.__importStar(require("react")),t=e.__importStar(require("three")),r=require("./context");function o(e,n){return n.indexOf(e)>=0}function u(e,n){for(var t=0,r=Object.keys(n);t<r.length;t++){var o=r[t];void 0!==n[o]&&(e[o]=n[o])}}function a(t,r){var u=o("state",r),a=n.useState(Symbol()),i=a[0],f=a[1],c=n.useMemo((function(){if(u)return e.__assign({},t.state)}),[t,i]);return n.useLayoutEffect((function(){if(u)return t.on("stateChange",(function(){return f(Symbol())}))}),[t]),[c,i]}function i(e,t){var r=o("currentState",t),u=n.useState(Symbol()),a=u[0],i=u[1],f=n.useMemo((function(){if(r)return e.getCurrentState()}),[e,a]);return n.useLayoutEffect((function(){if(r)return e.on("currentStateChange",(function(){return i(Symbol())}))}),[e]),[f,a]}function f(e,n){return[o("unsafe__fiveInstance",n)?e:void 0]}function c(e,t){var r=o("work",t),u=n.useState(Symbol()),a=u[0],i=u[1],f=n.useMemo((function(){if(r)return e.work}),[e,a]);return n.useLayoutEffect((function(){if(r)return e.on("load",(function(){return i(Symbol())}))}),[e]),[f,a]}function s(e,n){return[o("scene",n)?e.scene:void 0]}function l(e,r){var u=o("cameraDirection",r),a=n.useState(Symbol()),i=a[0],f=a[1],c=n.useMemo((function(){if(u)return e.camera.getWorldDirection(new t.Vector3)}),[e,i]);return n.useLayoutEffect((function(){if(u)return e.on("cameraUpdate",(function(){return f(Symbol())}))}),[e]),[c,i]}function d(e,r){var u=o("cameraRaycaster",r),a=n.useState(Symbol()),i=a[0],f=a[1],c=n.useMemo((function(){if(u){var n=e.camera.getWorldDirection(new t.Vector3);return new t.Raycaster(e.camera.position,n)}}),[e,i]);return n.useLayoutEffect((function(){if(u)return e.on("cameraUpdate",(function(){return f(Symbol())}))}),[e]),[c,i]}function m(e,t){var r=o("modelReadyState",t),u=n.useState(Symbol()),a=u[0],i=u[1],f=n.useMemo((function(){if(r)return e.model.empty?"Empty":"Loaded"}),[e,a]);return n.useLayoutEffect((function(){if(r)return e.on("modelLoaded",(function(){return i(Symbol())}))}),[e]),[f,a]}function p(e,n){if(o("loadWork",n))return e}function y(e,n){if(o("setState",n))return function(){for(var n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];return e.setState.apply(e,n)}}function v(e,n){if(o("on",n))return function(){for(var n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];return e.on.apply(e,n)}}function S(e,n){if(o("on",n))return function(){for(var n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];return e.once.apply(e,n)}}function g(e,n){if(o("off",n))return function(){for(var n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];return e.off.apply(e,n)}}function h(e,n){if(o("intersectRaycaster",n))return function(){for(var n,t=[],r=0;r<arguments.length;r++)t[r]=arguments[r];return(n=e.model).intersectRaycaster.apply(n,t)}}function _(e,n){if(o("project2d",n))return function(){for(var n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];return e.project2d.apply(e,n)}}function b(e,n){if(o("updateCamera",n))return function(){for(var n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];return e.updateCamera.apply(e,n)}}function L(e,n){if(o("initBasisLoader",n))return function(){for(var n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];return e.initBasisLoader.apply(e,n)}}function R(e,n){if(o("getPixels",n))return function(){for(var n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];return e.getPixels.apply(e,n)}}function w(e,n){if(o("render",n))return function(){for(var n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];return e.render.apply(e,n)}}function M(e,n){if(o("needsRender",n))return function(){e.needsRender=!0}}function x(e,n){if(o("preloadPano",n))return function(){for(var n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];return e.preloadPano.apply(e,n)}}exports.withFive=function(){for(var t=[],o=0;o<arguments.length;o++)t[o]=arguments[o];return function(o){return n.forwardRef((function(E,k){var P=r.useFiveInstance(),C=r.useFiveWorkLoader(),j=f(P,t)[0],W=a(P,t),q=W[0],D=W[1],F=i(P,t),B=F[0],I=F[1],O=c(P,t),U=O[0],V=O[1],$=s(P,t)[0],z=l(P,t),A=z[0],G=z[1],H=d(P,t),J=H[0],K=H[1],N=m(P,t),Q=N[0],T=N[1],X=n.useMemo((function(){var e={};return u(e,{setState:y(P,t),loadWork:p(C,t),on:v(P,t),once:S(P,t),off:g(P,t),intersectRaycaster:h(P,t),project2d:_(P,t),updateCamera:b(P,t),initBasisLoader:L(P,t),getPixels:R(P,t),render:w(P,t),needsRender:M(P,t),preloadPano:x(P,t)}),e}),[P,C]),Y=n.useMemo((function(){var n=e.__assign({},X);return u(n,{unsafe__fiveInstance:j,state:q,currentState:B,work:U,scene:$,cameraDirection:A,cameraRaycaster:J,modelReadyState:Q}),n}),[P,X,D,I,V,G,K,T]);return n.createElement(o,e.__assign({ref:k,$five:Y},E))}))}};

package/scripts/export-five-resource/fileify.js

@@ -1,192 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-const http = require("http");
-const mkdirp = require("mkdirp");
-const crypto = require("crypto");
-const formatWork = require("./format-work");
-
-const [
-  __command__,
-  __scriptPath__,
-  workPath,
-  exportPath,
-] = process.argv;
-
-const work = JSON.parse(fs.readFileSync(workPath));
-
-if (!fs.existsSync(exportPath)) fs.mkdirSync(exportPath);
-
-function md5(contents) {
-  const md5 = crypto.createHash("md5");
-  md5.update(contents);
-  return md5.digest("hex");
-}
-
-function shortPath(path) {
-  const array = path.split("/");
-  if (array.length < 3) return path;
-  const start = array.shift();
-  const end = array.pop();
-  return [start, md5(array.join("/")), end].join("/");
-}
-
-function imageURL(url, options = {}) {
-  if (typeof options.transform === "function") {
-    return options.transform(url, options);
-  }
-  if (url.indexOf("//vrlab-public.ljcdn.com") >= 0) {
-    if (/\.basis(\?|$)/.test(url) && options.basisLoaderInitialized !== true) {
-      url = url.replace(/\.basis(\?|$)/, ".jpg$1");
-    }
-    if (/\.jpg$/.test(url)) {
-      const { size, quality, format } = options;
-      if (size || quality || format) {
-        let suffix = "?imageMogr2";
-        if (quality) suffix += "/quality/" + quality;
-        if (size) suffix += "/thumbnail/" + size + "x";
-        if (format) suffix += "/format/" + format;
-        url = url.replace("//vrlab-public.ljcdn.com", "//vrlab-image4.ljcdn.com") + suffix;
-      }
-    }
-  }
-  return url
-}
-
-function downloadAsDataURL(url, filename, handleKey) {
-  filename = path.resolve(filename);
-  mkdirp.sync(path.dirname(filename));
-  return new Promise(resolve => {
-    http.get(url.replace(/^https\:/, "http:"), res => {
-      const mime = res.headers["content-type"];
-      const buffers = [];
-
-      res.on("data", chunk => buffers.push(chunk));
-      res.on("end", () => {
-        const dataURL = `data:${mime};base64,${Buffer.concat(buffers).toString("base64")}`;
-        const contents = `window[${JSON.stringify(handleKey)}] && window[${JSON.stringify(handleKey)}](${JSON.stringify(dataURL)})`;
-        fs.writeFileSync(filename, contents, "utf8");
-        resolve();
-      })
-    })
-  })
-}
-
-function traverse(json, callback, keyPath = "") {
-  json = callback(json, keyPath);
-  if (json) {
-    if (typeof json === "array") {
-      for (let i = 0; i < json.length; i++) {
-        json[i] = traverse(json[i], callback, keyPath + "." + i);
-      }
-    } else if (typeof json === "object") {
-      for (let i = 0, keys = Object.keys(json); i < keys.length; i++) {
-        const key = keys[i];
-        json[key] = traverse(json[key], callback, keyPath + "." + key);
-      }
-    }
-  }
-  return json;
-}
-
-const urlRegExp = /^https?:\/\/(?:[\w-]+\.)*[\w-]{1,63}(?:\.(?:\w+))(?:$|\/)/i;
-const fileRegExp = /\.[a-z0-9]{1,6}$/;
-
-const htmlExample = (work) => `
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<title>如视 VR SDK 调用实例</title>
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<style>
-  html, body { height: 100%; width: 100%; overflow: hidden; }
-  * { margin: 0; padding: 0 }
-  #app { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }
-  .buttons { position: fixed; top: 10px; left: 10px; }
-  .buttons button { display: block; margin-top: 10px; }
-</style>
-</head>
-<body>
-<!-- 试图渲染容器 -->
-<div id="app"></div>
-
-<!-- 简易空间按钮 -->
-<div class="buttons">
-  <!-- 点击进入相机全景模式 -->
-  <button onclick="five.changeMode(Five.Mode.Panorama)">全景模式(Panorama)</button>
-  <!-- 点击进入相机模型自由模式 -->
-  <button onclick="five.changeMode(Five.Mode.Floorplan, {latitude: Math.PI / 4, longitude: Math.PI / 4})">模型自由模式(Floorplan)</button>
-  <!-- 点击进入相机模型垂直模式 -->
-  <button onclick="five.changeMode(Five.Mode.Topview)">模型垂直模式(Topview)</button>
-  <!-- 点击进入相机VR眼睛模式 -->
-  <button onclick="five.changeMode(Five.Mode.VRPanorama)">眼睛模式(VRPanorama)</button>
-  <!-- 点击进入相机模型漫游模式 -->
-  <button onclick="five.changeMode(Five.Mode.Model)">模型漫游模式(Model)</button>
-</div>
-
-<script>${fs.readFileSync(path.join(__dirname, "../bundles/five.js"), "utf8")}</script>
-<script>
-// Five 是 如视 VR 视图渲染库的构造函数，通过 new 关键字产生实例。
-// 构造函数的具体参数见文档，这边仅配置常用的几项
-var five = new Five({
-  // 初始化为全景观测状态状态
-  mode: Five.Mode.Panorama,
-  // 初始化为摄像机位于第 0 个观测点的位置
-  panoIndex: 0,
-  // 初始化为摄像机水平角度为 0
-  longitude: 0,
-  // 初始化为摄像机俯仰角度为 0
-  latitude: 0,
-  // 取消初始化镜头过度动画
-  initWithTransition: false,
-  // 按需渲染
-  onlyRenderIfNeeds: true,
-})
-
-// 将渲染视图的 canvas 添加到 DOM 中
-five.appendTo(document.getElementById("app"))
-
-// 如果显示区域需要变动，在变动时请调用 refresh 重置显示参数
-window.addEventListener("resize", function () {
-  five.refresh()
-})
-
-five.load(${JSON.stringify(work, "", "  ")});
-</script>
-</body>
-</html>
-`;
-
-let downloadQueue = Promise.resolve();
-
-function main(work, exportPath) {
-
-  // 生成输出目录
-  mkdirp(path.resolve(exportPath));
-
-  // 修改work
-  traverse(work, (value, keyPath) => {
-    if (typeof value === "string" && urlRegExp.test(value) && fileRegExp.test(value)) {
-      const handleKey = "jsonp_" + md5(value);
-      const relativeValue = value.replace(urlRegExp, match => "downloads/" + md5(match) + "/") + "." + handleKey;
-      const filename = shortPath(path.resolve(exportPath, relativeValue));
-      downloadQueue = downloadQueue.then(() => {
-        if (keyPath.indexOf("model.material_textures") >= 0) {
-          value = imageURL(value, { size: 512 });
-        }
-        return downloadAsDataURL(value, filename, handleKey)
-          .then(() => console.log(`success ${value} => ${filename}`))
-          .catch(() => console.log(`error ${value} => ${filename}`));
-      })
-      return relativeValue;
-    }
-    return value;
-  })
-
-  work.base_url = "./";
-
-  // 输出 html
-  fs.writeFileSync(path.resolve(exportPath, "index.html"), htmlExample(work), "utf-8");
-}
-
-main(formatWork(work), exportPath);

package/scripts/export-five-resource/format-work.js

@@ -1,71 +0,0 @@
-function objectGet(obj, pathArray, defaultValue) {
-  try {
-    for (let i = 0; i < pathArray.length; i++) {
-      obj = obj[pathArray[i]];
-    }
-    return obj === undefined ? defaultValue : obj;
-  } catch (error) {
-    return defaultValue;
-  }
-}
-
-module.exports = function parse(input) {
-
-  const work = {};
-
-  const base_url = objectGet(input, "base_url", "");
-
-  work.project_id = objectGet(input, ["project_id"]);
-  work.work_code = objectGet(input, ["work_code"]);
-
-  work.initial = {
-    pano_index: objectGet(input, ["initial", "pano_index"], objectGet(input, ["initial", "pano"], 0)),
-    latitude: objectGet(input, ["initial", "latitude"], 0),
-    longitude: objectGet(input, ["initial", "longitude"], 0),
-  };
-
-  work.model = {
-    file_url: base_url + objectGet(input, ["model", "file_url"], ""),
-    material_textures: objectGet(input, ["model", "material_textures"], []).map(url => {
-      if (/^https?:/.test(url)) return url;
-      return base_url + url;
-    }),
-  };
-
-  work.observers = objectGet(input, ["observers"], []).map(one => {
-    return {
-      visible_nodes: one.visible_nodes,
-      accessible_nodes: one.accessible_nodes,
-      index: one.index,
-      quaternion: one.quaternion,
-      standing_position: one.standing_position,
-      position: one.position,
-      floor_index: one.floor_index,
-    };
-  });
-
-  work.panorama = {
-    count: objectGet(input, ["panorama", "count"], 0),
-    list: objectGet(input, ["panorama", "list"], []).map((_, index) => {
-      const parseURL = (url) => {
-        const panoCubeBaseURL = objectGet(input, ["panorama", "base_url"], "");
-        const panoCubePath = objectGet(input, ["panorama", "pano_high_cube_base_url"], "");
-        if (panoCubePath || panoCubeBaseURL) {
-          return base_url + panoCubeBaseURL + panoCubePath + index + "/" + url;
-        } else {
-          return base_url + url;
-        }
-      }
-      return {
-        index: objectGet(input, ["panorama", "list", index, "index"], 0),
-        up: parseURL(objectGet(input, ["panorama", "list", index, "up"], objectGet(input, ["panorama", "info", index, "up"], ""))),
-        down: parseURL(objectGet(input, ["panorama", "list", index, "down"], objectGet(input, ["panorama", "info", index, "down"], ""))),
-        left: parseURL(objectGet(input, ["panorama", "list", index, "left"], objectGet(input, ["panorama", "info", index, "left"], ""))),
-        right: parseURL(objectGet(input, ["panorama", "list", index, "right"], objectGet(input, ["panorama", "info", index, "right"], ""))),
-        front: parseURL(objectGet(input, ["panorama", "list", index, "front"], objectGet(input, ["panorama", "info", index, "front"], ""))),
-        back: parseURL(objectGet(input, ["panorama", "list", index, "back"], objectGet(input, ["panorama", "info", index, "back"], ""))),
-      };
-    }),
-  }
-  return work;
-};