Krpano.1.js 4.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. import { __awaiter, __rest } from "tslib";
  2. import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  3. import { useCallback, useEffect, useState } from "react";
  4. import { KrpanoActionProxy } from "../models";
  5. import { useMounted, useEventCallback } from "../hooks";
  6. import { CurrentSceneContext, KrpanoRendererContext } from "../contexts";
  7. import { buildKrpanoAction } from "../utils";
  8. import { WebVR } from "./WebVR";
  9. import { Action } from "./Action";
  10. import { Events } from "./Events";
  11. export const Krpano = (_a) => {
  12. var { className, style, children, currentScene, target = "krpano", webvrUrl, webvrConfig, gyroUrl, onReady } = _a, rest = __rest(_a, ["className", "style", "children", "currentScene", "target", "webvrUrl", "webvrConfig", "gyroUrl", "onReady"]);
  13. const [renderer, setRenderer] = useState(null);
  14. const onReadyRef = useEventCallback(onReady);
  15. const onReadyCallback = useCallback((obj) => {
  16. const renderer = new KrpanoActionProxy(obj);
  17. window[renderer.name] = renderer;
  18. setRenderer(renderer);
  19. if (onReadyRef.current) {
  20. onReadyRef.current(renderer);
  21. }
  22. }, [onReadyRef]);
  23. useEffect(() => {
  24. if (!renderer)
  25. return;
  26. const reloadXML = () => __awaiter(void 0, void 0, void 0, function* () {
  27. if (renderer.tagAction.syncTagStack.length) {
  28. // krpano 1.21 版本以下不支持动态插入 include,只能在文本中插入后重新加载
  29. const updateXmlString = new XMLSerializer().serializeToString(yield renderer.tagAction.createSyncTags());
  30. console.log(updateXmlString);
  31. renderer.call(buildKrpanoAction("loadxml", updateXmlString));
  32. }
  33. renderer.tagAction.syncTagsLoaded = true;
  34. renderer.tagAction.queue.flushResolve(true);
  35. });
  36. reloadXML();
  37. }, [renderer]);
  38. useEffect(() => {
  39. if (!renderer || !currentScene)
  40. return;
  41. renderer.tagAction.waitIncludeLoaded(true).then(() => {
  42. renderer.loadScene(currentScene);
  43. });
  44. }, [renderer, currentScene]);
  45. const initKrpano = () => {
  46. const defaultConfig = {
  47. html5: "auto",
  48. xml: null,
  49. mobilescale: 1,
  50. };
  51. if (typeof window.embedpano === "function") {
  52. window.embedpano(Object.assign(Object.assign(Object.assign({}, defaultConfig), { target, onready: onReadyCallback }), rest));
  53. }
  54. else {
  55. throw new Error("Krpano required");
  56. }
  57. };
  58. useMounted(() => {
  59. initKrpano();
  60. });
  61. return (_jsx(KrpanoRendererContext.Provider, { value: renderer, children: _jsxs(CurrentSceneContext.Provider, { value: currentScene || null, children: [webvrUrl && _jsx(WebVR, Object.assign({ url: webvrUrl }, webvrConfig)), _jsx("div", { id: target, className: className, style: style, children: renderer ? children : null }), _jsx(Events, { onLoadComplete: () => {
  62. console.log("--");
  63. } }), _jsx(Action, { name: "skin_setup_littleplanetintro", content: `
  64. copy(lp_scene, xml.scene);
  65. copy(lp_hlookat, view.hlookat);
  66. copy(lp_vlookat, view.vlookat);
  67. copy(lp_fov, view.fov);
  68. copy(lp_fovmax, view.fovmax);
  69. copy(lp_limitview, view.limitview);
  70. set(view.fovmax, 170);
  71. set(view.limitview, lookto);
  72. set(view.vlookatmin, 90);
  73. set(view.vlookatmax, 90);
  74. lookat(calc(lp_hlookat - 180), 90, 150, 1, 0, 0);
  75. set(events[lp_events].onloadcomplete,
  76. delayedcall(0.5,
  77. if(lp_scene === xml.scene,
  78. set(control.usercontrol, off);
  79. copy(view.limitview, lp_limitview);
  80. set(view.vlookatmin, null);
  81. set(view.vlookatmax, null);
  82. tween(view.hlookat|view.vlookat|view.fov|view.distortion, calc('' + lp_hlookat + '|' + lp_vlookat + '|' + lp_fov + '|' + 0.0),
  83. 3.0, easeOutQuad,
  84. set(control.usercontrol, all);
  85. tween(view.fovmax, get(lp_fovmax));
  86. );
  87. );
  88. );
  89. );
  90. ` })] }) }));
  91. };