@aibee/owlly 1.0.25

package/src/web/main.rpeng.mes.plane.ts

@@ -0,0 +1,161 @@
+/* eslint-disable @typescript-eslint/no-explicit-any, no-console, @typescript-eslint/camelcase */
+import * as THREE from 'three';
+import Konva from 'konva';
+// import VConsole from 'vconsole';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import {
+  Stage,
+  SetExternal,
+  BasicController,
+  Shape,
+  Block,
+  Screen,
+  GLTF,
+  OrthographicView,
+} from '../owlly';
+
+// new VConsole(); // eslint-disable-line
+
+SetExternal(THREE, { konva: Konva });
+
+let search = window.location.search;
+search = search.slice(1, search.length);
+console.log(search);
+
+
+async function start(): Promise<void> {
+  // 新建 Stage
+  const stage = new Stage();
+  // 新建 View
+  const container = document.getElementById('container');
+  const screen = new Screen(container!);
+  const view = new OrthographicView(screen);
+
+  let faceCount = 0;
+  let meshCount = 0;
+
+
+  // const body = container?.parentElement!;
+  const body = document.body;
+  console.log(body);
+
+  const textBox = document.createElement('div');
+  textBox.textContent = `面数:${faceCount}\n模型数:${meshCount}`;
+  textBox.style.position = 'absolute';
+  textBox.style.top = '60px';
+  textBox.style.left = '30px';
+  textBox.style.width = '200px';
+  textBox.style.height = '40px';
+  textBox.style.backgroundColor = '#ffffff';
+  body.appendChild(textBox);
+
+
+  view.bindStage(stage);
+
+  console.log(stage.scene);
+  console.log(screen.renderer);
+
+  stage.setStatsEnabled(true);
+  // 新建Controller
+  const controller = new BasicController(view);
+  controller.followMouse = true;
+  controller.setRotateMode('orbit');
+  controller.setCameraPosition(new THREE.Vector3(0, 0, 300), false);
+  controller.setCameraLookAt(new THREE.Vector3(0, 0, 0), false);
+  controller.setZoomMode('zoom');
+  controller.setZoomRange(0.01, 100);
+  stage.bindController(controller);
+  // 新建Element
+  const shape = new Shape({
+    path: 'm-10,-10l10,-10l10,10l-10,10',
+    fill: '#ff7777',
+    stroke: '#ff0000',
+    strokeOpacity: 1,
+    zIndex: -10,
+    height: 20,
+  });
+  const block = new Block(shape);
+  stage.bindElement(block);
+
+  function meshSetMaterial(object: THREE.Object3D, color: number): void {
+    if (object instanceof THREE.Mesh) {
+      if (object.material) {
+        object.material.color = new THREE.Color(color);
+        faceCount += object.geometry.index.count / 3;
+        meshCount++;
+        textBox.textContent = `面数:${faceCount}\n模型数:${meshCount}`;
+        // console.log(object);
+      }
+      // object.material = material;
+      // object.frustumCulled = false;
+      // object.castShadow = true;
+    }
+    const children = object.children;
+    children.forEach((child) => {
+      meshSetMaterial(child, color);
+    });
+  }
+
+
+  const loader = new GLTFLoader();
+
+  const onLoadModel = (gltf: GLTF): void => {
+    const mesh = gltf.scene;
+    const color = Math.floor(Math.random() * 0xffffff);
+    // console.log(color);
+    // const material = new THREE.MeshStandardMaterial({
+    //   color,
+    //   transparent: true,
+    // });
+    // console.log(mesh);
+
+    mesh.rotation.set(Math.PI * 2 * Math.random(), Math.PI * 2 * Math.random(), Math.PI * 2 * Math.random());
+    mesh.position.set(200 * Math.random() - 100, 200 * Math.random() - 100, 200 * Math.random() - 100);
+    // material.needsUpdate = true;
+    meshSetMaterial(mesh, color);
+    stage.scene.add(mesh);
+    screen.renderScreen();
+  };
+
+  function loadModel(count: number): void {
+    for (let i = 0; i < count; i++) {
+      loader.load('test.glb', onLoadModel);
+    }
+  }/*  */
+
+  function createButton(index: number, modelCount: number): void {
+    const button = document.createElement('button');
+    button.textContent = `添加模型${modelCount}`;
+    button.style.position = 'absolute';
+    button.style.top = `${index * 100 + 20}px`;
+    button.style.right = '30px';
+    button.style.width = '100px';
+    button.style.height = '40px';
+    body.appendChild(button);
+    button.onclick = (): void => {
+      loadModel(modelCount);
+    };
+  }
+
+  function createButtons(modelCounts: number[]): void {
+    modelCounts.forEach((count, index) => {
+      createButton(index, count);
+    });
+  }
+
+  createButtons([1, 10, 100, 1000]);
+
+
+  // controller.dispose();
+
+  // screen.dispose();
+}
+
+
+function main(): void {
+  start();
+}
+
+(window as any).main = main;
+
+main();

package/src/web/main.rpeng.sample.ts

@@ -0,0 +1,345 @@
+/* eslint-disable no-restricted-properties */
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable @typescript-eslint/no-explicit-any, no-console, @typescript-eslint/camelcase */
+// import axios from 'axios';
+// // import {
+// //   Vector3, Quaternion,
+// // } from 'three';
+// import * as THREE from 'three';
+// import {
+//   Stage,
+//   PerspectiveView,
+//   AlignmentUtils,
+//   FloorModel,
+//   BasicController,
+//   MouseIndicatorController,
+//   // View,
+//   // FloorModel,
+//   // PanoramaGroup,
+//   // IndicatorDisplayMode,
+//   // PanoramaTransformController,
+//   // Panorama,
+//   // Shape,
+//   // TransformController,
+//   // Element,
+//   SetExternal,
+// } from '../owlly';
+// import { TilePanoramaController } from '../owlly/controller/tile-panorama-controller';
+// // import { TileTextureInfo, TileUtil } from '../owlly/utils/tile-util';
+// import { TilePanoramaGroup } from '../owlly/element/tile-panorama-group';
+
+// SetExternal(THREE);
+
+// // import { Placeable2D } from '../owlly/element/placeable-2d';
+// // import { TrailMesh } from '../owlly/element/trail-mesh';
+// // import { pathData } from './data';
+
+// // const URL_ROOT = 'http://192.168.90.101:8086/zh_fs_standard/locate/mini';
+// // const URL_ROOT = 'https://robot-vr.aibee.cn/v1';
+// // const MODEL_ID = 'aIk2c4dxjAERnwEU';
+// // const MODEL_ID = 'd2WZpKPqkf3AiEEz';
+// const URL_ROOT = 'https://vr.aibee.cn/v1';
+// // const MODEL_ID = 'bz4nPOCUOz3BHXaH'; // DeRUCCI慕思
+// // const MODEL_ID = 'p5gY6ndCqq3kGB7m';
+// // const MODEL_ID = 'I90rv1ySpBv0QwZD'; // 佛山中海L1
+// // const MODEL_ID = 'siReIgn3BLrssAtB'; // 中海国际
+// // const MODEL_ID = 'JhABCWGCHxgN0o8j'; // 中海国际
+// // const URL_ROOT = 'https://vradmin-test.aibee.cn/v1';
+// // const MODEL_ID = 'TToGO2LjXyCKJ0AD';
+// // const MODEL_ID = 'btLc2DoLyaL2FX8M';
+// // const URL_ROOT = 'http://192.168.80.23:8096/v1';// #TiledCube#
+// // const MODEL_ID = 'FZ9qAbwEE0uUZuQG';
+// const SECRET = 'secret=U4LOTsSWEASOCXNl4lzyg0rOyGztm1so';
+// // const ACCESS_TOKEN = 'access_token=41299cfed0b333eeae7c3750da05e950';
+// const ajax = axios.create();
+// // const IMG_URL2 = 'https://krpano.com/petapixel/getimage.php?size=512&level=3&side=b&h=3&v=3&totalwidth=2048&totalheight=2048';
+// // const IMG_URL = './images/';
+// const MODEL_ID = 'oFkhDP4fzX60vk9p';
+
+// // function getImageInfo(type: string, index: number, level: number): { url: string; id: string } {
+// //   const segment = Math.pow(2, level);
+// //   const x = index % segment;
+// //   const y = Math.floor(index / segment);
+// //   let t = 0;
+// //   if (y % 2 === 0) {
+// //     if (x % 2 === 0) {
+// //       t = 1;
+// //     } else {
+// //       t = 0;
+// //     }
+// //   } else if (x % 2 === 0) {
+// //     t = 0;
+// //   } else {
+// //     t = 1;
+// //   }
+
+// //   const url = `${IMG_URL}${type}${t}.jpeg`;
+// //   const id = `${type}-${level}-${x}-${y}`;
+// //   return { id, url };
+// // }
+
+// // async function changeTexturesAsync(plane: TilePlane): Promise<void> {
+// //   const textureInfos = [];
+// //   plane.pid = Math.floor(Math.random() * 6);
+// //   const urls = [];
+// //   const cout = 16 * 16;
+// //   let id = Math.floor(Math.random() * 6);
+// //   textureInfos.push(new TileTextureInfo(id, 0, 0, 0));// 默认一个
+// //   for (let i = 1; i < cout; i++) {
+// //     id = Math.floor(Math.random() * 6);
+// //     const level = Math.floor(Math.random() * 4);
+// //     const index = Math.floor(Math.random() * Math.pow(Math.pow(2, level), 2));
+// //     textureInfos.push(new TileTextureInfo(id, Math.floor(Math.random() * 16) * 100, level, index));
+// //   }
+// //   for (let i = 0; i < 16; i++) {
+// //     const ti = textureInfos[i];
+// //     // if (ti.x === plane.pid) {
+// //     const imgInfo = TileUtil.getImageInfo(ti.pid, ti.index, ti.level, '');
+// //     urls.push(imgInfo.url);
+// //     // }
+// //   }
+
+// //   textureInfos.sort((a, b) => a.level - b.level);
+// //   await plane.updateTexturesAsync(urls, textureInfos);
+// // }
+
+// // function changeLevel(plane: TilePlane, planeTextController: TilePanoramaController): void {
+// //   const pid = Math.floor(Math.random() * 6);
+// //   const level = Math.floor(Math.random() * 2) + 2;
+// //   planeTextController.changeLevel(level);
+// // }
+
+// interface LabelInfo {
+//   id: number;
+//   label_name: string;
+//   coordinate: {
+//     id: number;
+//     label_id: number;
+//     position_x: -11.917187;
+//     position_y: 0.798334;
+//     position_z: -4.661553;
+//     direction_x: 0.99957657;
+//     direction_y: 0.0026633148;
+//     direction_z: 0.0026633148;
+//   };
+//   panorama_id: number;
+//   icon_id: number;
+//   info: number;
+// }
+
+// interface LabelIconInfo {
+//   id: number;
+//   icon: string;
+// }
+
+// async function getPanoramaInfo(
+//   sid: string,
+// ): Promise<{
+//   modelPath: string;
+//   panoramaList: object[];
+//   initialView: {
+//     roaming_direction_x: number;
+//     roaming_direction_y: number;
+//     roaming_direction_z: number;
+//     roaming_panorama_id: number;
+//   };
+//   labels: LabelInfo[];
+//   labelIcons: LabelIconInfo[];
+// }> {
+//   const { data: { data: { modelPath, panorama_list: panoramaList, initial_view: initialView } } } = await ajax({
+//     url: `${URL_ROOT}/list-panoramas?${SECRET}`,
+//     method: 'POST',
+//     data: { store_id: sid },
+//   });
+
+//   const { data: { data: { labels } } } = await ajax({
+//     url: `${URL_ROOT}/list-label-coordinates?${SECRET}`,
+//     method: 'POST',
+//     data: { store_id: sid },
+//   });
+
+//   const { data: { data: labelIcons } } = await ajax({
+//     url: `${URL_ROOT}/list-brand-label-icons?${SECRET}`,
+//     method: 'POST',
+//     data: { store_id: sid },
+//   });
+
+//   return {
+//     modelPath,
+//     panoramaList,
+//     initialView,
+//     labels,
+//     labelIcons,
+//   };
+// }
+
+// // function tileTest(stage: Stage, view: PerspectiveView): void {
+// //   const panoController: PanoramaController = new PanoramaController(view);
+// //   stage.bindController(panoController);
+// //   panoController.setMouseClickEnabled(true);
+// //   panoController.setCameraLookAt(new Vector3(0, 0, 0), new Vector3(0, 1, 0));
+// //   // view.camera.position.set(0, -4, 0);
+// //   panoController.setFOVRange(10, 90);
+// //   stage.bindView(view);
+// //   // const basicController = new BasicController(view);
+// //   // stage.bindController(basicController);
+// //   // // basicController.setMouseClickEnabled(true);
+// //   // basicController.setCameraPosition(new Vector3(0, -1, 0));
+// //   // basicController.setCameraLookAt(new Vector3(0, 1, 0), true);
+// //   // basicController.setZoomRange(0.01, 10);
+// //   const tilePanoramaController = new TilePanoramaController(view);
+// //   stage.bindController(tilePanoramaController);
+// //   TextureController.instance.isTest = true;
+// //   const panorama = new TilePanorama(213, 0, []);
+// //   panorama.mount();
+// //   stage.bindElement(panorama);
+// //   tilePanoramaController.bindPanorama(panorama);
+
+// //   // const plane = new TilePlane(2, 1);
+// //   // stage.bindElement(plane);
+// //   // plane.rotateX(Math.PI / 2);
+// //   // const tilePanoramaController = TilePanoramaController.instance;
+// //   // tilePanoramaController.bindView(view);
+// //   // stage.bindController(tilePanoramaController);
+
+// //   // changeTexturesAsync(plane);
+// //   // setInterval(() => changeTexturesAsync(plane), 10000);
+// //   // changeLevel(plane, tilePanoramaController);
+// //   // setInterval(() => changeLevel(plane, TilePanoramaController), 10000);
+// //   // const plane = createPlane(100, 100);
+
+// //   // const plane = new PanoramaIndicator();
+// //   // plane.setImage(getImage('front'));
+// //   // stage.bindElement(plane);
+// //   // plane.indicator.scale.x = 100;
+// //   // plane.indicator.scale.y = 100;
+// //   // // plane.indicator.rotation.x = Math.PI / 2;
+// //   // plane.indicator.position.y = -100;
+// // }
+
+// async function netTileTest(stage: Stage, view: PerspectiveView): Promise<void> {
+//   const { modelPath, initialView, panoramaList } = await getPanoramaInfo(MODEL_ID);
+//   // stage.setBackgroundColor('#000');
+//   stage.bindView(view);
+//   const panoData = panoramaList.map((item) => {
+//     const {
+//       panorama_images,
+//       panorama_images_low,
+//       seq_id,
+//       visible_panorama_seq_ids,
+//       coordinate: {
+//         panorama_id,
+//         direction_w,
+//         direction_x,
+//         direction_y,
+//         direction_z,
+//         position_x,
+//         position_y,
+//         position_z,
+//       },
+//       visible,
+//     } = item as any;
+//     const lowImageURLs = JSON.parse(panorama_images_low) as string[];
+//     const ret = {
+//       pid: panorama_id as number,
+//       seqID: seq_id,
+//       textureURLs: lowImageURLs,
+//       visible,
+//       highTextureURLs: JSON.parse(panorama_images) as string[],
+//       useLowTextureURLsOnly: false,
+//       neighbourPanoramaIDs: visible_panorama_seq_ids as number[],
+//       position: new THREE.Vector3(position_x, position_y, position_z),
+//       quaternion: new THREE.Quaternion(direction_x, direction_y, direction_z, direction_w),
+//     };
+//     return ret;
+//   });
+//   const basicController = new BasicController(view);
+//   stage.bindController(basicController);
+//   const panoDataMap = new Map();
+//   panoData.forEach((item) => {
+//     panoDataMap.set(item.pid, item);
+//     const neighbourPanoramaIDs = item.neighbourPanoramaIDs.map((value: number) => panoData[value].pid);
+//     item.neighbourPanoramaIDs = neighbourPanoramaIDs;
+//   });
+//   // const count = panoData.length;
+//   // const index = Math.floor(Math.random() * count);
+//   // const tItem = panoData[index];
+//   // const panoController: PanoramaController = new PanoramaController(view);
+//   // stage.bindController(panoController);
+//   // panoController.setMouseClickEnabled(true);
+//   // panoController.setCameraLookAt(new Vector3(0, 0, 0), new Vector3(0, 1, 0));
+//   // // view.camera.position.set(0, -4, 0);
+//   // panoController.setFOVRange(10, 90);
+
+//   const model = new FloorModel(modelPath);
+//   stage.bindElement(model);
+//   const panoramaGrop = new TilePanoramaGroup(panoData, {
+//     modelElement: model,
+//     groundParams: {
+//       downDirection: new THREE.Vector3(0, 0, -1),
+//     },
+//     indicatorImageURL: '/imgs/pointer.png',
+//   });
+//   stage.bindElement(panoramaGrop);
+//   const tilePanoramaController = new TilePanoramaController(view, panoramaGrop, basicController);
+//   stage.bindController(tilePanoramaController);
+//   const initialPanoramaId = initialView.roaming_panorama_id;
+//   const { roaming_direction_x: lookX, roaming_direction_y: lookY, roaming_direction_z: lookZ } = initialView;
+//   const initialViewDirection = new THREE.Vector3(lookX, -lookZ, lookY);
+//   tilePanoramaController.lookFromPanorama(
+//     initialPanoramaId,
+//     initialViewDirection,
+//     true,
+//   );
+//   const mouseIndicatorController = new MouseIndicatorController('/imgs/pointer.png');
+//   mouseIndicatorController.setTarget(model);
+//   mouseIndicatorController.bindView(view);
+//   stage.bindController(mouseIndicatorController);
+//   // const panorama = new TilePanorama(tItem.pid, tItem.seqID, tItem.highTextureURLs);
+//   // panorama.mount();
+//   // stage.bindElement(panorama);
+//   // tilePanoramaController.bindPanorama(panorama);
+
+//   // const cantainer = view.container;
+//   // const canvas = document.createElement('canvas');
+//   // canvas.width = 2048;
+//   // canvas.height = 2048;
+//   // cantainer.appendChild(canvas);
+//   // const context2d = canvas.getContext('2d');
+//   // (window as any).context2d = context2d;
+// }
+
+// async function start(): Promise<void> {
+//   const stage = new Stage();
+//   const container = document.getElementById('container');
+//   stage.setStatsEnabled(true);
+//   // stage.setAxesEnabled(true);
+//   // const model = new FloorModel(modelPath);
+//   // stage.bindElement(model);
+
+//   // const img = new Image();
+//   // img.setAttribute('crossOrigin', 'anonymous');
+//   // const testUrl = 'https://robot-vr-public.cdn.bcebos.com/5a8e65f527af4cbfa896bd4bcec1a882/010559/179_r?x-bce-process=image/crop,x_0,y_0,w_2048,h_2048/resize,m_lfit,w_512,h_512';
+//   // TextureController.instance.loadImgAsync2(testUrl);
+//   // const testUrl2 = 'https://robot-vr-public.cdn.bcebos.com/5a8e65f527af4cbfa896bd4bcec1a882/010559/179_t?x-bce-process=image/crop,x_0,y_0,w_2048,h_2048/resize,m_lfit,w_512,h_512';
+//   // TextureController.instance.loadImgAsync2(testUrl2);
+
+//   if (container) {
+//     const view = new PerspectiveView(container);
+//     // console.log('test');
+//     // tileTest(stage, view);
+//     netTileTest(stage, view);
+
+//     (window as any).view = view;
+//     (window as any).AlignmentUtils = AlignmentUtils;
+//     (window as any).stage = stage;
+//   }
+// }
+
+// function main(): void {
+//   start();
+// }
+
+// (window as any).main = main;
+
+// main();

package/src/web/main.rpeng.vr.ts

@@ -0,0 +1,159 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/camelcase */
+import Axios from 'axios';
+import * as THREE from 'three';
+import {
+  Stage, Screen, PerspectiveView, BasicController, FloorModel,
+} from '../owlly';
+import { SetExternal } from '../owlly/stage/externals';
+import { TilePanoramaGroup } from '../owlly/element/tile-panorama-group';
+import { TilePanoramaController } from '../owlly/controller/tile-panorama-controller';
+
+SetExternal(THREE);
+
+let stage: Stage;
+let view: PerspectiveView;
+let basicCtl: BasicController;
+const sceneDataMap = new Map<string, any>();
+const store2PanoDataMap = new Map();
+const panoDataMap = new Map();
+const intersectionsMapMap = new Map();
+
+async function getFloorModel(storeId: string): Promise<FloorModel> {
+  // if(!config.mode.show) return null;
+  const sceneData = sceneDataMap.get(storeId);
+  const model = new FloorModel(sceneData.modelPath);
+  return model;
+}
+
+async function getVRData(storeId: string): Promise<any> {
+  const data = await Axios.post(
+    'https://robot-vr.aibee.cn/v1/list-panoramas?secret=U4LOTsSWEASOCXNl4lzyg0rOyGztm1so',
+    {
+      store_id: storeId,
+    },
+  );
+
+  return data;
+}
+
+function initVR(container: HTMLElement): void {
+  stage = new Stage();
+  if (container) {
+    const screen = new Screen(container, { preserveDrawingBuffer: true });
+    view = new PerspectiveView(screen);
+    stage.bindView(view);
+    basicCtl = new BasicController(view);
+    stage.bindController(basicCtl);
+  }
+}
+
+function getPanoramaData(storeId: string, panoramaList?: any[]): any {
+  if (store2PanoDataMap.has(storeId)) {
+    return store2PanoDataMap.get(storeId);
+  }
+  if (!panoramaList) return null;
+  const panoData = panoramaList.map((item) => {
+    const {
+      panorama_images,
+      panorama_images_low,
+      tile_image_level,
+      tile_images,
+      seq_id,
+      visible_panorama_seq_ids,
+      coordinate: {
+        panorama_id,
+        direction_w,
+        direction_x,
+        direction_y,
+        direction_z,
+        position_x,
+        position_y,
+        position_z,
+      },
+      visible,
+    } = item;
+    const lowImageURLs = JSON.parse(panorama_images_low);
+    const offLineTextureUrls = JSON.parse(tile_images);
+    const offLineTextureLevel = tile_image_level;
+    const ret = {
+      storeId,
+      pid: panorama_id,
+      seqID: seq_id,
+      textureURLs: lowImageURLs,
+      visible,
+      offLineTextureUrls,
+      offLineTextureLevel,
+      highTextureURLs: JSON.parse(panorama_images),
+      useLowTextureURLsOnly: false,
+      neighbourPanoramaIDs: visible_panorama_seq_ids,
+      position: new THREE.Vector3(position_x, position_y, position_z),
+      quaternion: new THREE.Quaternion(direction_x, direction_y, direction_z, direction_w),
+    };
+    return ret;
+  });
+  store2PanoDataMap.set(storeId, panoData);
+  panoData.forEach((item) => {
+    panoDataMap.set(item.pid, item);
+    const neighbourPanoramaIDs = item.neighbourPanoramaIDs.map((value: any) => panoData[value].pid);
+    item.neighbourPanoramaIDs = neighbourPanoramaIDs;
+  });
+  return panoData;
+}
+
+async function getVRIntersectionsData(storeId: string): Promise<any> {
+  if (!intersectionsMapMap.has(storeId)) {
+    const sceneData = sceneDataMap.get(storeId);
+    const url = sceneData.intersectionsPath
+      || `https://vr.aibee.cn/robot-vr/navigation/list-ground-intersections/${storeId}`;
+    const data = await Axios.get(url);
+    const list = data.data.data;
+    const intersectionsMap = new Map();
+    list.forEach((value: any) => {
+      const {
+        panorama_id, pos_x, pos_y, pos_z,
+      } = value;
+      intersectionsMap.set(panorama_id, new THREE.Vector3(pos_x, pos_y, pos_z));
+    });
+    intersectionsMapMap.set(storeId, intersectionsMap);
+  }
+  return intersectionsMapMap.get(storeId);
+}
+
+async function initFloorVR(storeId: string, pid: number): Promise<void> {
+  const floorModel = await getFloorModel(storeId);
+  stage.bindElement(floorModel);
+  const panoData = getPanoramaData(storeId);
+  const indicatorsMap = await getVRIntersectionsData(storeId);
+
+  const panoGroup = new TilePanoramaGroup(panoData, {
+    modelElement: floorModel,
+    groundParams: {
+      downDirection: new THREE.Vector3(0, 0, -1),
+    },
+    indicatorImageURL: '/imgs/pointer.png',
+    indicatorPositionMap: indicatorsMap,
+  });
+  stage.bindElement(panoGroup);
+  const tilePanoCtl = new TilePanoramaController(view, panoGroup, basicCtl);
+  stage.bindController(tilePanoCtl);
+  await tilePanoCtl.lookFromPanorama(pid, new THREE.Vector3(1, 0, 0));
+}
+
+async function testPanorama(placeId: number): Promise<void> {
+  const container = document.getElementById('container');
+  initVR(container!);
+  const placeData = await Axios.get(
+    `https://deploy.aibee.cn/function/place-service/getPlacesInfo?place_id=${placeId}`,
+  );
+  const storeIds: string[] = placeData.data.data[0].floors.map((floor: any) => floor.vr_id);
+  const firstId = storeIds[0];
+  const storeData = await getVRData(firstId);
+  sceneDataMap.set(firstId, storeData.data.data);
+  getPanoramaData(firstId, storeData.data.data.panorama_list);
+  await initFloorVR(firstId, storeData.data.data.panorama_list[0].id);
+}
+
+window.onload = (): void => {
+  testPanorama(240);
+};