@realsee/five 5.0.0-alpha.100

package/templates/react-component/examples/data.json

@@ -0,0 +1,507 @@
+{
+  "user_id": 1000000020355831,
+  "project_id": "auto3d-DJaa08PIzN4JYluXQ1j2VS",
+  "name": "贝壳·如视 | 真实，如你所视",
+  "is_active": true,
+  "title": "a62e1ebf7d013f7df117551a14af79fc",
+  "description": "",
+  "picture_url": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/screenshot\/1617181538_6\/pc0_Ta021gL8o.jpg",
+  "picture_checksum": "be869ab9ddad58a1037c9ba556d36baa",
+  "initial": {
+    "pano_index": 6,
+    "heading": 0,
+    "longitude": 2.6869287662553916,
+    "latitude": 0,
+    "fov": 95,
+    "flag_position": [
+      -6.218280029296875,
+      -1.368765398621047,
+      7.642519855499268
+    ],
+    "pano": 6
+  },
+  "machine_id": "PHBBC00293",
+  "machine_version": "3",
+  "title_picture_url": "http:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/screenshot\/1617181538_6\/pc1_dNN1OSNiN_1.jpg",
+  "title_picture_checksum": "62a4d5b155dfd7ee5765b1aafb72991a",
+  "house_layout": {
+    "bedroom_amount": 2,
+    "parlor_amount": 1,
+    "cookroom_amount": 1,
+    "toilet_amount": 1
+  },
+  "status": 1,
+  "floor_plan_type": 0,
+  "editor_type": 2,
+  "panorama_url": "",
+  "create_time": "2021-03-31 21:02:51",
+  "work_code": "2kbe37PwJOwMYqG8",
+  "house_info": {
+    "relation_id": 15245832,
+    "city_id": 330100,
+    "source": "ALLIANCE",
+    "house_id": "1815046123278",
+    "house_code": "103114128650"
+  },
+  "model": {
+    "file_url": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/model\/auto3d-DJaa08PIzN4JYluXQ1j2VS.at3d",
+    "material_base_url": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/materials\/",
+    "material_textures": [
+      "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/materials\/texture_0.jpg",
+      "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/materials\/texture_1.jpg",
+      "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/materials\/texture_2.jpg",
+      "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/materials\/texture_3.jpg",
+      "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/materials\/texture_4.jpg",
+      "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/materials\/texture_5.jpg",
+      "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/materials\/texture_6.jpg",
+      "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/materials\/texture_7.jpg",
+      "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/materials\/texture_8.jpg",
+      "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/materials\/texture_9.jpg"
+    ],
+    "score": 106.48,
+    "type": 0,
+    "work_code": "2kbe37PwJOwMYqG8"
+  },
+  "panorama": {
+    "count": 10,
+    "base_url": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/",
+    "type": 0,
+    "list": [
+      {
+        "index": 0,
+        "up": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/0\/2257f0f0b29d5b00ff01934ce51aaa35\/0_u.jpg",
+        "down": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/0\/2257f0f0b29d5b00ff01934ce51aaa35\/0_d.jpg",
+        "left": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/0\/2257f0f0b29d5b00ff01934ce51aaa35\/0_l.jpg",
+        "right": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/0\/2257f0f0b29d5b00ff01934ce51aaa35\/0_r.jpg",
+        "front": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/0\/2257f0f0b29d5b00ff01934ce51aaa35\/0_f.jpg",
+        "back": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/0\/2257f0f0b29d5b00ff01934ce51aaa35\/0_b.jpg"
+      },
+      {
+        "index": 1,
+        "up": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/1\/ecb554bb1c122fa90186d176ccfecde4\/1_u.jpg",
+        "down": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/1\/ecb554bb1c122fa90186d176ccfecde4\/1_d.jpg",
+        "left": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/1\/ecb554bb1c122fa90186d176ccfecde4\/1_l.jpg",
+        "right": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/1\/ecb554bb1c122fa90186d176ccfecde4\/1_r.jpg",
+        "front": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/1\/ecb554bb1c122fa90186d176ccfecde4\/1_f.jpg",
+        "back": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/1\/ecb554bb1c122fa90186d176ccfecde4\/1_b.jpg"
+      },
+      {
+        "index": 2,
+        "up": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/2\/9bd853b960ff837ab3dda99d80c60a3d\/2_u.jpg",
+        "down": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/2\/9bd853b960ff837ab3dda99d80c60a3d\/2_d.jpg",
+        "left": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/2\/9bd853b960ff837ab3dda99d80c60a3d\/2_l.jpg",
+        "right": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/2\/9bd853b960ff837ab3dda99d80c60a3d\/2_r.jpg",
+        "front": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/2\/9bd853b960ff837ab3dda99d80c60a3d\/2_f.jpg",
+        "back": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/2\/9bd853b960ff837ab3dda99d80c60a3d\/2_b.jpg"
+      },
+      {
+        "index": 3,
+        "up": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/3\/2ff55fa5be112fe1314cbcaf97ac27df\/3_u.jpg",
+        "down": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/3\/2ff55fa5be112fe1314cbcaf97ac27df\/3_d.jpg",
+        "left": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/3\/2ff55fa5be112fe1314cbcaf97ac27df\/3_l.jpg",
+        "right": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/3\/2ff55fa5be112fe1314cbcaf97ac27df\/3_r.jpg",
+        "front": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/3\/2ff55fa5be112fe1314cbcaf97ac27df\/3_f.jpg",
+        "back": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/3\/2ff55fa5be112fe1314cbcaf97ac27df\/3_b.jpg"
+      },
+      {
+        "index": 4,
+        "up": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/4\/bda2a018e6d4ba63cdb86aaf6bd8d295\/4_u.jpg",
+        "down": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/4\/bda2a018e6d4ba63cdb86aaf6bd8d295\/4_d.jpg",
+        "left": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/4\/bda2a018e6d4ba63cdb86aaf6bd8d295\/4_l.jpg",
+        "right": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/4\/bda2a018e6d4ba63cdb86aaf6bd8d295\/4_r.jpg",
+        "front": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/4\/bda2a018e6d4ba63cdb86aaf6bd8d295\/4_f.jpg",
+        "back": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/4\/bda2a018e6d4ba63cdb86aaf6bd8d295\/4_b.jpg"
+      },
+      {
+        "index": 5,
+        "up": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/5\/f6f2b65ecdf3618ebe79e470ed978d9f\/5_u.jpg",
+        "down": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/5\/f6f2b65ecdf3618ebe79e470ed978d9f\/5_d.jpg",
+        "left": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/5\/f6f2b65ecdf3618ebe79e470ed978d9f\/5_l.jpg",
+        "right": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/5\/f6f2b65ecdf3618ebe79e470ed978d9f\/5_r.jpg",
+        "front": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/5\/f6f2b65ecdf3618ebe79e470ed978d9f\/5_f.jpg",
+        "back": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/5\/f6f2b65ecdf3618ebe79e470ed978d9f\/5_b.jpg"
+      },
+      {
+        "index": 6,
+        "up": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/6\/f5c80eedf90fab92c3e28025e5cf1701\/6_u.jpg",
+        "down": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/6\/f5c80eedf90fab92c3e28025e5cf1701\/6_d.jpg",
+        "left": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/6\/f5c80eedf90fab92c3e28025e5cf1701\/6_l.jpg",
+        "right": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/6\/f5c80eedf90fab92c3e28025e5cf1701\/6_r.jpg",
+        "front": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/6\/f5c80eedf90fab92c3e28025e5cf1701\/6_f.jpg",
+        "back": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/6\/f5c80eedf90fab92c3e28025e5cf1701\/6_b.jpg"
+      },
+      {
+        "index": 7,
+        "up": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/7\/e7609b5109d6dce4cd3ef2c7243b32f4\/7_u.jpg",
+        "down": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/7\/e7609b5109d6dce4cd3ef2c7243b32f4\/7_d.jpg",
+        "left": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/7\/e7609b5109d6dce4cd3ef2c7243b32f4\/7_l.jpg",
+        "right": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/7\/e7609b5109d6dce4cd3ef2c7243b32f4\/7_r.jpg",
+        "front": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/7\/e7609b5109d6dce4cd3ef2c7243b32f4\/7_f.jpg",
+        "back": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/7\/e7609b5109d6dce4cd3ef2c7243b32f4\/7_b.jpg"
+      },
+      {
+        "index": 8,
+        "up": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/8\/ab3505c91eca2a2ae84ccf00b61c2d24\/8_u.jpg",
+        "down": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/8\/ab3505c91eca2a2ae84ccf00b61c2d24\/8_d.jpg",
+        "left": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/8\/ab3505c91eca2a2ae84ccf00b61c2d24\/8_l.jpg",
+        "right": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/8\/ab3505c91eca2a2ae84ccf00b61c2d24\/8_r.jpg",
+        "front": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/8\/ab3505c91eca2a2ae84ccf00b61c2d24\/8_f.jpg",
+        "back": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/8\/ab3505c91eca2a2ae84ccf00b61c2d24\/8_b.jpg"
+      },
+      {
+        "index": 9,
+        "up": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/9\/abb9cda32ccb7b2caf42020893ab0aab\/9_u.jpg",
+        "down": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/9\/abb9cda32ccb7b2caf42020893ab0aab\/9_d.jpg",
+        "left": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/9\/abb9cda32ccb7b2caf42020893ab0aab\/9_l.jpg",
+        "right": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/9\/abb9cda32ccb7b2caf42020893ab0aab\/9_r.jpg",
+        "front": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/9\/abb9cda32ccb7b2caf42020893ab0aab\/9_f.jpg",
+        "back": "https:\/\/vrlab-public.ljcdn.com\/release\/auto3dhd\/a62e1ebf7d013f7df117551a14af79fc\/images\/cube_2048\/9\/abb9cda32ccb7b2caf42020893ab0aab\/9_b.jpg"
+      }
+    ],
+    "work_code": "2kbe37PwJOwMYqG8"
+  },
+  "observers": [
+    {
+      "visible_nodes": [
+        1,
+        2
+      ],
+      "accessible_nodes": [
+        1,
+        2
+      ],
+      "index": 0,
+      "quaternion": {
+        "w": 0.45076583925142194,
+        "x": 0.010070951976936936,
+        "y": -0.8925839597148215,
+        "z": -0.0016154299986102319
+      },
+      "standing_position": [
+        -6.956049919128418,
+        -1.3924440682333898,
+        1.6591600179672241
+      ],
+      "position": [
+        -6.956049919128418,
+        -0.10312400013208389,
+        1.6591600179672241
+      ],
+      "floor_index": 0,
+      "offset_point_count": 0,
+      "device_info": null,
+      "work_code": "2kbe37PwJOwMYqG8"
+    },
+    {
+      "visible_nodes": [
+        0,
+        2,
+        4,
+        9
+      ],
+      "accessible_nodes": [
+        0,
+        2,
+        4,
+        9
+      ],
+      "index": 1,
+      "quaternion": {
+        "w": -0.9884643083591809,
+        "x": -0.0038900979633806664,
+        "y": 0.1512670435365699,
+        "z": -0.006439990839033269
+      },
+      "standing_position": [
+        -6.176340103149414,
+        -1.380554749576384,
+        2.179759979248047
+      ],
+      "position": [
+        -6.176340103149414,
+        -0.10025200247764587,
+        2.179759979248047
+      ],
+      "floor_index": 0,
+      "offset_point_count": 0,
+      "device_info": null,
+      "work_code": "2kbe37PwJOwMYqG8"
+    },
+    {
+      "visible_nodes": [
+        0,
+        1,
+        3,
+        5,
+        6,
+        7
+      ],
+      "accessible_nodes": [
+        0,
+        1,
+        3,
+        5,
+        6,
+        7
+      ],
+      "index": 2,
+      "quaternion": {
+        "w": -0.9759043268507697,
+        "x": -0.0019721373978620915,
+        "y": -0.21808668862894345,
+        "z": 0.006711333945888228
+      },
+      "standing_position": [
+        -5.437339782714844,
+        -1.383095554575539,
+        2.598710060119629
+      ],
+      "position": [
+        -5.437339782714844,
+        -0.09842800348997116,
+        2.598710060119629
+      ],
+      "floor_index": 0,
+      "offset_point_count": 0,
+      "device_info": null,
+      "work_code": "2kbe37PwJOwMYqG8"
+    },
+    {
+      "visible_nodes": [
+        2,
+        4,
+        5,
+        6,
+        7
+      ],
+      "accessible_nodes": [
+        2,
+        4,
+        5,
+        6,
+        7
+      ],
+      "index": 3,
+      "quaternion": {
+        "w": -0.029965333012015812,
+        "x": 0.004792436102214012,
+        "y": -0.9995382032440286,
+        "z": -0.0015766008368684518
+      },
+      "standing_position": [
+        -5.576590061187744,
+        -1.3838616484886683,
+        -0.6104490160942078
+      ],
+      "position": [
+        -5.576590061187744,
+        -0.09492909908294678,
+        -0.6104490160942078
+      ],
+      "floor_index": 0,
+      "offset_point_count": 0,
+      "device_info": null,
+      "work_code": "2kbe37PwJOwMYqG8"
+    },
+    {
+      "visible_nodes": [
+        1,
+        3
+      ],
+      "accessible_nodes": [
+        1,
+        3
+      ],
+      "index": 4,
+      "quaternion": {
+        "w": -0.7784191742286066,
+        "x": 0.0061470501387415315,
+        "y": -0.6276976570495352,
+        "z": 0.004634062159598484
+      },
+      "standing_position": [
+        -4.817440032958984,
+        -1.4112677188270255,
+        -0.9183740019798279
+      ],
+      "position": [
+        -4.817440032958984,
+        -0.11868900060653687,
+        -0.9183740019798279
+      ],
+      "floor_index": 0,
+      "offset_point_count": 0,
+      "device_info": null,
+      "work_code": "2kbe37PwJOwMYqG8"
+    },
+    {
+      "visible_nodes": [
+        2,
+        3,
+        6,
+        7
+      ],
+      "accessible_nodes": [
+        2,
+        3,
+        6,
+        7
+      ],
+      "index": 5,
+      "quaternion": {
+        "w": -0.008301990565287179,
+        "x": 0.0010872283475401893,
+        "y": -0.9999649444038442,
+        "z": 2.064128384382794e-5
+      },
+      "standing_position": [
+        -5.5607099533081055,
+        -1.3013700964729957,
+        -2.5796799659729004
+      ],
+      "position": [
+        -5.5607099533081055,
+        -0.013925399631261826,
+        -2.5796799659729004
+      ],
+      "floor_index": 0,
+      "offset_point_count": 0,
+      "device_info": null,
+      "work_code": "2kbe37PwJOwMYqG8"
+    },
+    {
+      "visible_nodes": [
+        2,
+        3,
+        5,
+        7,
+        8
+      ],
+      "accessible_nodes": [
+        2,
+        3,
+        5,
+        7,
+        8
+      ],
+      "index": 6,
+      "quaternion": {
+        "w": -0.9524056894064341,
+        "x": 0.003977047065914255,
+        "y": -0.30475313278605054,
+        "z": 0.005755277061564329
+      },
+      "standing_position": [
+        -5.829790115356445,
+        -1.3787892565785258,
+        4.545259952545166
+      ],
+      "position": [
+        -5.829790115356445,
+        -0.08911240100860596,
+        4.545259952545166
+      ],
+      "floor_index": 0,
+      "offset_point_count": 0,
+      "device_info": null,
+      "work_code": "2kbe37PwJOwMYqG8"
+    },
+    {
+      "visible_nodes": [
+        2,
+        3,
+        5,
+        6
+      ],
+      "accessible_nodes": [
+        2,
+        3,
+        5,
+        6
+      ],
+      "index": 7,
+      "quaternion": {
+        "w": -0.9793688239077526,
+        "x": 0.000149504411328741,
+        "y": -0.20206542477861278,
+        "z": -0.0024980745397071816
+      },
+      "standing_position": [
+        -6.018280029296875,
+        -1.368765398621047,
+        7.492519855499268
+      ],
+      "position": [
+        -6.018280029296875,
+        -0.09965620189905167,
+        7.492519855499268
+      ],
+      "floor_index": 0,
+      "offset_point_count": 0,
+      "device_info": null,
+      "work_code": "2kbe37PwJOwMYqG8"
+    },
+    {
+      "visible_nodes": [
+        6,
+        9
+      ],
+      "accessible_nodes": [
+        6,
+        9
+      ],
+      "index": 8,
+      "quaternion": {
+        "w": -0.7800473501085893,
+        "x": -0.001135920118785392,
+        "y": -0.6257123047165654,
+        "z": -0.002988083746027829
+      },
+      "standing_position": [
+        -4.782979965209961,
+        -1.3791146295179708,
+        4.005970001220703
+      ],
+      "position": [
+        -4.782979965209961,
+        -0.09461440145969391,
+        4.005970001220703
+      ],
+      "floor_index": 0,
+      "offset_point_count": 0,
+      "device_info": null,
+      "work_code": "2kbe37PwJOwMYqG8"
+    },
+    {
+      "visible_nodes": [
+        1,
+        8
+      ],
+      "accessible_nodes": [
+        1,
+        8
+      ],
+      "index": 9,
+      "quaternion": {
+        "w": -0.9990515085044664,
+        "x": 0.0014573951598469209,
+        "y": -0.04350557140644017,
+        "z": -0.001106412146558715
+      },
+      "standing_position": [
+        -4.202330112457275,
+        -1.3785217045092475,
+        5.68356990814209
+      ],
+      "position": [
+        -4.202330112457275,
+        -0.09259240329265594,
+        5.68356990814209
+      ],
+      "floor_index": 0,
+      "offset_point_count": 0,
+      "device_info": null,
+      "work_code": "2kbe37PwJOwMYqG8"
+    }
+  ]
+}

package/templates/react-component/examples/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>SAMPLE</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <style>
+    * { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent;  }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script>
+    document.write('<script src="./index.bundle.js"><\/script>')
+  </script>
+</body>
+</html>

package/templates/react-component/examples/index.tsx

@@ -0,0 +1,62 @@
+// @ts-nocheck
+
+import * as THREE from "three";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Work, parseWork } from "@realsee/five";
+import { createFiveProvider, FiveCanvas } from "@realsee/five/react";
+import { FiveTagComponent, Tag } from "../lib/index";
+
+const FiveProvider = createFiveProvider({
+  imageOptions: { size: 1024 },
+  onlyRenderIfNeeds: true,
+});
+
+const Viewport: React.FC = () => {
+  return <div style={{ position: "absolute", left: 0, top: 0 }}>
+    <FiveCanvas width={512} height={512}/>
+  </div>
+}
+
+const initialTags = [{
+  position: new THREE.Vector3(-5.442246918806951, -0.24883595764420757, 6.638120417581523),
+  label: "我是一个标签",
+}];
+
+const Addon: React.FC = () => {
+
+  const [tags, setTags] = React.useState(initialTags);
+
+  return <div style={{ position: "absolute", left: 0, top: 0, pointerEvents: "none" }}>
+    <FiveTagComponent width={512} height={512} initialTags={tags} onChange={tags => setTags(tags)}/>
+    <pre style={{padding: 10}}>
+      Tag Data <br/>{ JSON.stringify(tags, null, "  ") }
+    </pre>
+  </div>
+}
+
+const App: React.FC = () => {
+
+  const [work, setWork] = React.useState<Work>();
+
+  const loadWork = React.useCallback((url: string) => {
+    fetch(url)
+      .then(res => res.json())
+      .then(data => setWork(parseWork(data)));
+  }, []);
+
+  React.useEffect(() => {
+    loadWork("./data.json");
+  }, []);
+
+  if (work) {
+    return <FiveProvider initialWork={work}>
+      <Viewport/>
+      <Addon/>
+    </FiveProvider>;
+  }
+  return null;
+}
+
+
+ReactDOM.render(<App/>, document.getElementById("app"));