最终效果录屏

所有开关和推拉门动画.mp4

概述

多个开关与门的联动实现需要将每个开关与对应的门进行绑定。

代码实现

在每一个开关的json中添加一个对象”glassDoor”，根据研究院室内实际情况，抽象出开关与门的关系：一个开关对应着两扇门，一扇门有两个路径动画（开门路径动画、关门路径动画），每一个关门动画都有自己的定时器。
将每扇门按照左右位置和开关index编号。
将每个路径动画按照左右位置、开关动作和开关index编号。
在门的json中使用以上编号标记每一扇门和每一个路径动画。

switchJson.js

  2. /*
  3. * "glassDoor": [
  4.       {
  5.         "doorRef": "leftDoor0",
  6.         "pathRef": ["leftOpen0", "leftClose0"],
  7.         "closeTimer": null
  8.       },
  9.       {
  10.         "doorRef": "rightDoor0",
  11.         "pathRef": ["rightOpen0", "rightClose0"],
  12.         "closeTimer": null
  13.       }
  14.     ],
  15. */
  17. const switchJson = [
  18.   {
  19.     "ref": "switch0",
  20.     "glassDoor": [
  21.       {
  22.         "doorRef": "leftDoor0",  // 将每扇门按照左右位置和开关index编号
  23.         "pathRef": ["leftOpen0", "leftClose0"],  //  将每个路径动画按照左右位置、开关动作和开关index编号
  24.         "closeTimer": null
  25.       },
  26.       {
  27.         "doorRef": "rightDoor0",
  28.         "pathRef": ["rightOpen0", "rightClose0"],
  29.         "closeTimer": null
  30.       }
  31.     ],
  32.     "czmObject": {
  33.       "xbsjType": "Tileset",
  34.       "xbsjGuid": "b7a4c6d4-23f3-474e-a828-f34264e40416",
  35.       "name": "前台-开关",
  36.       "url": "...",  // 模型地址
  37.       "xbsjPosition": [
  38.         2.0444499593823284,
  39.         0.6398407227372647,
  40.         184.3798550556327
  41.       ],
  42.       "xbsjRotation": [
  43.         -0.3959951084942439,
  44.         -0.08726646259971647,
  45.         0
  46.       ],
  47.       "xbsjScale": [
  48.         0.05,
  49.         0.04,
  50.         0.048
  51.       ],
  52.       "xbsjUseOriginTransform": false,
  53.       "xbsjClippingPlanes": {},
  54.       "xbsjCustomShader": {}
  55.     }
  56.   },
  57.   {
  58.     "ref": "switch1",
  59.     "glassDoor": [
  60.       {
  61.         "doorRef": "leftDoor1",
  62.         "pathRef": ["leftOpen1", "leftClose1"],
  63.         "closeTimer": null
  64.       },
  65.       {
  66.         "doorRef": "rightDoor1",
  67.         "pathRef": ["rightOpen1", "rightClose1"],
  68.         "closeTimer": null
  69.       }
  70.     ],
  71.     "czmObject": {
  72.       "xbsjType": "Tileset",
  73.       "xbsjGuid": "f1e7c69f-dc49-4ae1-a7f4-e06de262b81a",
  74.       "name": "东走廊-北开关",
  75.       "url": "...",  // 模型地址
  76.       "xbsjPosition": [
  77.         2.0444524982375794,
  78.         0.6398415783390702,
  79.         184.60063585634657
  80.       ],
  81.       "xbsjRotation": [
  82.         -0.3959951084942439,
  83.         0.08726646259971647,
  84.         0
  85.       ],
  86.       "xbsjScale": [
  87.         0.05,
  88.         0.04,
  89.         0.048
  90.       ],
  91.       "xbsjUseOriginTransform": false,
  92.       "xbsjClippingPlanes": {},
  93.       "xbsjCustomShader": {}
  94.     }
  95.   },
  96.   {
  97.     "ref": "switch2",
  98.     "glassDoor": [
  99.       {
  100.         "doorRef": "leftDoor2",
  101.         "pathRef": ["leftOpen2", "leftClose2"],
  102.         "closeTimer": null
  103.       },
  104.       {
  105.         "doorRef": "rightDoor2",
  106.         "pathRef": ["rightOpen2", "rightClose2"],
  107.         "closeTimer": null
  108.       }
  109.     ],
  110.     "czmObject": {
  111.       "xbsjType": "Tileset",
  112.       "xbsjGuid": "a9ff6500-db41-4ac4-b625-ee1d230ca368",
  113.       "name": "东走廊-南开关",
  114.       "url": "...",  // 模型地址
  115.       "xbsjPosition": [
  116.         2.044453599997902,
  117.         0.6398394609856203,
  118.         184.641940963229
  119.       ],
  120.       "xbsjRotation": [
  121.         -0.3959951084942439,
  122.         0.08726646259971647,
  123.         0
  124.       ],
  125.       "xbsjScale": [
  126.         0.05,
  127.         0.04,
  128.         0.048
  129.       ],
  130.       "xbsjUseOriginTransform": false,
  131.       "xbsjClippingPlanes": {},
  132.       "xbsjCustomShader": {}
  133.     }
  134.   },
  135.   {
  136.     "ref": "switch3",
  137.     "glassDoor": [
  138.       {
  139.         "doorRef": "leftDoor3",
  140.         "pathRef": ["leftOpen3", "leftClose3"],
  141.         "closeTimer": null
  142.       },
  143.       {
  144.         "doorRef": "rightDoor3",
  145.         "pathRef": ["rightOpen3", "rightClose3"],
  146.         "closeTimer": null
  147.       }
  148.     ],
  149.     "czmObject": {
  150.       "xbsjType": "Tileset",
  151.       "xbsjGuid": "788772f1-7700-44fe-b88a-727125fb9574",
  152.       "name": "展厅-开关",
  153.       "url": "...",  // 模型地址
  154.       "xbsjPosition": [
  155.         2.044452536861528,
  156.         0.6398421616480751,
  157.         184.6179881832191
  158.       ],
  159.       "xbsjRotation": [
  160.         -0.3959951084942439,
  161.         0.08726646259971647,
  162.         0
  163.       ],
  164.       "xbsjScale": [
  165.         0.05,
  166.         0.04,
  167.         0.048
  168.       ],
  169.       "xbsjUseOriginTransform": false,
  170.       "xbsjClippingPlanes": {},
  171.       "xbsjCustomShader": {}
  172.     }
  173.   }
  174. ];
  176. export default switchJson;

glassDoorJson.js

  2. // 前台接待处
  3. const reception = [
  4.   {
  5.     "ref": "leftDoor0",
  6.     "czmObject": {
  7.       "xbsjType": "Tileset",
  8.       "xbsjGuid": "73ed68f3-1dc4-40e7-bddb-50a3e7be4bed",
  9.       "name": "前台-左侧门",
  10.       "url": "...",  // 模型地址
  11.       "xbsjPosition": [
  12.         2.044449816295,
  13.         0.6398410391053218,
  14.         181.25
  15.       ],
  16.       "xbsjRotation": [
  17.         -0.3969407967416281,
  18.         0.014846137946110005,
  19.         0
  20.       ],
  21.       "xbsjScale": [
  22.         0.85,
  23.         0.88,
  24.         1
  25.       ],
  26.       "xbsjUseOriginTransform": false,
  27.       "xbsjClippingPlanes": {},
  28.       "xbsjCustomShader": {}
  29.     }
  30.   },{
  31.     "ref": "leftOpen0",
  32.     "czmObject": {
  33.       "xbsjType": "Path",
  34.       "xbsjGuid": "514fa82b-97c2-4c81-b87d-9a01d953ec3e",
  35.       "name": "前台-左侧门-路径动画",
  36.       "positions": [
  37.         [
  38.           2.044449816295,
  39.           0.6398410391053218,
  40.           181.25
  41.         ],
  42.         [
  43.           2.0444497639740824,
  44.           0.6398411440696372,
  45.           181.25
  46.         ]
  47.       ],
  48.       "rotations": [
  49.         [
  50.           0,
  51.           0,
  52.           0
  53.         ],
  54.         [
  55.           0,
  56.           0,
  57.           0
  58.         ]
  59.       ],
  60.       "currentSpeed": 1,
  61.       "playing": false
  62.     }
  63.   },{
  64.     "ref": "leftClose0",
  65.     "czmObject": {
  66.       "xbsjType": "Path",
  67.       "xbsjGuid": "0a1e9f7e-18fb-4996-bd1a-1303a2fcc6cc",
  68.       "name": "前台-左侧门-路径动画",
  69.       "positions": [
  70.         [
  71.           2.0444497639740824,
  72.           0.6398411440696372,
  73.           181.25
  74.         ],
  75.         [
  76.           2.044449816295,
  77.           0.6398410391053218,
  78.           181.25
  79.         ]
  80.       ],
  81.       "rotations": [
  82.         [
  83.           0,
  84.           0,
  85.           0
  86.         ],
  87.         [
  88.           0,
  89.           0,
  90.           0
  91.         ]
  92.       ],
  93.       "currentSpeed": 1,
  94.       "playing": false
  95.     }
  96.   },
  97.   {
  98.     "ref": "rightDoor0",
  99.     "czmObject": {
  100.       "xbsjType": "Tileset",
  101.       "xbsjGuid": "293745c2-4160-488f-b785-549763654784",
  102.       "name": "前台-右侧门",
  103.       "url": "...",  // 模型地址
  104.       "xbsjPosition": [
  105.         2.044449875336235,
  106.         0.639840927184629,
  107.         181.25
  108.       ],
  109.       "xbsjRotation": [
  110.         -0.39542618159920906,
  111.         0.015707963267948967,
  112.         0
  113.       ],
  114.       "xbsjScale": [
  115.         0.85,
  116.         0.88,
  117.         1
  118.       ],
  119.       "xbsjUseOriginTransform": false,
  120.       "xbsjClippingPlanes": {},
  121.       "xbsjCustomShader": {}
  122.     }
  123.   },{
  124.     "ref": "rightOpen0",
  125.     "czmObject": {
  126.       "xbsjType": "Path",
  127.       "xbsjGuid": "791ba4ac-a022-4f04-8e36-66dff64aa24d",
  128.       "name": "前台-右侧门-路径动画",
  129.       "positions": [
  130.         [
  131.           2.044449875336235,
  132.           0.639840927184629,
  133.           181.25
  134.         ],
  135.         [
  136.           2.044449927731744,
  137.           0.639840822289407,
  138.           181.25
  139.         ]
  140.       ],
  141.       "rotations": [
  142.         [
  143.           0,
  144.           0,
  145.           0
  146.         ],
  147.         [
  148.           0,
  149.           0,
  150.           0
  151.         ]
  152.       ],
  153.       "currentSpeed": 1,
  154.       "playing": false
  155.     }
  156.   },{
  157.     "ref": "rightClose0",
  158.     "czmObject": {
  159.       "xbsjType": "Path",
  160.       "xbsjGuid": "feb278ee-7aea-448d-adf8-95078157a232",
  161.       "name": "路径动画",
  162.       "positions": [
  163.         [
  164.           2.044449927731744,
  165.           0.639840822289407,
  166.           181.25
  167.         ],
  168.         [
  169.           2.044449875336235,
  170.           0.639840927184629,
  171.           181.25
  172.         ]
  173.       ],
  174.       "rotations": [
  175.         [
  176.           0,
  177.           0,
  178.           0
  179.         ],
  180.         [
  181.           0,
  182.           0,
  183.           0
  184.         ]
  185.       ],
  186.       "currentSpeed": 1,
  187.       "playing": false
  188.     }
  189.   }
  190. ];
  192. // 走廊北
  193. const corridor_north = [
  194.   {
  195.     "ref": "leftDoor1",
  196.     "czmObject": {
  197.       "xbsjType": "Tileset",
  198.       "xbsjGuid": "86b8b0f7-903c-43b0-97f8-658f813b1721",
  199.       "name": "东走廊北-左侧门",
  200.       "url": "...",  // 模型地址
  201.       "xbsjPosition": [
  202.         2.0444523934162557,
  203.         0.6398417755615563,
  204.         181.46
  205.       ],
  206.       "xbsjRotation": [
  207.         -0.3957096034349785,
  208.         0.015707963267948967,
  209.         0
  210.       ],
  211.       "xbsjScale": [
  212.         0.85,
  213.         0.87,
  214.         1
  215.       ],
  216.       "xbsjUseOriginTransform": false,
  217.       "xbsjClippingPlanes": {},
  218.       "xbsjCustomShader": {}
  219.     }
  220.   },
  221.   {
  222.     "ref": "leftOpen1",
  223.     "czmObject": {
  224.       "xbsjType": "Path",
  225.       "xbsjGuid": "c8ebc7df-47d2-4370-ba7b-7d496ed08ab9",
  226.       "name": "东走廊北-左侧门-路径动画",
  227.       "positions": [
  228.         [
  229.           2.0444523934162557,
  230.           0.6398417755615563,
  231.           181.46
  232.         ],
  233.         [
  234.           2.04445245106097,
  235.           0.6398416725678746,
  236.           181.46
  237.         ]
  238.       ],
  239.       "rotations": [
  240.         [
  241.           0,
  242.           0,
  243.           0
  244.         ],
  245.         [
  246.           0,
  247.           0,
  248.           0
  249.         ]
  250.       ],
  251.       "currentSpeed": 1,
  252.       "playing": false
  253.     }
  254.   },
  255.   {
  256.     "ref": "leftClose1",
  257.     "czmObject": {
  258.       "xbsjType": "Path",
  259.       "xbsjGuid": "c8ebc7df-47d2-4370-ba7b-7d496ed08ab9",
  260.       "name": "东走廊北-左侧门-路径动画",
  261.       "positions": [
  262.         [
  263.           2.04445245106097,
  264.           0.6398416725678746,
  265.           181.46
  266.         ],
  267.         [
  268.           2.0444523934162557,
  269.           0.6398417755615563,
  270.           181.46
  271.         ]
  272.       ],
  273.       "rotations": [
  274.         [
  275.           0,
  276.           0,
  277.           0
  278.         ],
  279.         [
  280.           0,
  281.           0,
  282.           0
  283.         ]
  284.       ],
  285.       "currentSpeed": 1,
  286.       "playing": false
  287.     }
  288.   },
  289.   {
  290.     "ref": "rightDoor1",
  291.     "czmObject": {
  292.       "xbsjType": "Tileset",
  293.       "xbsjGuid": "13c9e958-d197-47dd-a205-0b8fe1e5bc5a",
  294.       "name": "东走廊北-右侧门",
  295.       "url": "...",  // 模型地址
  296.       "xbsjPosition": [
  297.         2.044452336345083,
  298.         0.6398418863587736,
  299.         181.46
  300.       ],
  301.       "xbsjRotation": [
  302.         -0.3968314720420576,
  303.         0.015707963267948967,
  304.         0
  305.       ],
  306.       "xbsjScale": [
  307.         0.85,
  308.         0.87,
  309.         1
  310.       ],
  311.       "xbsjUseOriginTransform": false,
  312.       "xbsjClippingPlanes": {},
  313.       "xbsjCustomShader": {}
  314.     }
  315.   },
  316.   {
  317.     "ref": "rightOpen1",
  318.     "czmObject": {
  319.       "xbsjType": "Path",
  320.       "xbsjGuid": "e20b70e4-3e61-4a54-a26f-ab15c3eae867",
  321.       "name": "东走廊北-右侧门-路径动画",
  322.       "positions": [
  323.         [
  324.           2.044452336345083,
  325.           0.6398418863587736,
  326.           181.46
  327.         ],
  328.         [
  329.           2.044452284412869,
  330.           0.6398419926270578,
  331.           181.46
  332.         ]
  333.       ],
  334.       "rotations": [
  335.         [
  336.           0,
  337.           0,
  338.           0
  339.         ],
  340.         [
  341.           0,
  342.           0,
  343.           0
  344.         ]
  345.       ],
  346.       "currentSpeed": 1,
  347.       "playing": false
  348.     }
  349.   },
  350.   {
  351.     "ref": "rightClose1",
  352.     "czmObject": {
  353.       "xbsjType": "Path",
  354.       "xbsjGuid": "e20b70e4-3e61-4a54-a26f-ab15c3eae867",
  355.       "name": "东走廊北-右侧门-路径动画",
  356.       "positions": [
  357.         [
  358.           2.044452284412869,
  359.           0.6398419926270578,
  360.           181.46
  361.         ],
  362.         [
  363.           2.044452336345083,
  364.           0.6398418863587736,
  365.           181.46
  366.         ]
  367.       ],
  368.       "rotations": [
  369.         [
  370.           0,
  371.           0,
  372.           0
  373.         ],
  374.         [
  375.           0,
  376.           0,
  377.           0
  378.         ]
  379.       ],
  380.       "currentSpeed": 1,
  381.       "playing": false
  382.     }
  383.   }
  385. ];
  387. // 走廊南
  388. const corridor_south = [
  389.   {
  390.     "ref": "leftDoor2",
  391.     "czmObject": {
  392.       "xbsjType": "Tileset",
  393.       "xbsjGuid": "bac20974-3f5f-4adb-b67c-5a5f820da2ee",
  394.       "name": "东走廊南-左侧门",
  395.       "url": "...",  // 模型地址
  396.       "xbsjPosition": [
  397.         2.044453497691577,
  398.         0.6398396591887818,
  399.         181.5
  400.       ],
  401.       "xbsjRotation": [
  402.         -0.3949680776541822,
  403.         0.015707963267948967,
  404.         0
  405.       ],
  406.       "xbsjScale": [
  407.         0.85,
  408.         0.87,
  409.         1
  410.       ],
  411.       "xbsjUseOriginTransform": false,
  412.       "xbsjClippingPlanes": {},
  413.       "xbsjCustomShader": {}
  414.     }
  415.   },
  416.   {
  417.     "ref": "leftOpen2",
  418.     "czmObject": {
  419.       "xbsjType": "Path",
  420.       "xbsjGuid": "8cc71244-4abb-4be3-8964-31c0f48dacf6",
  421.       "name": "东走廊南-左侧门-路径动画",
  422.       "positions": [
  423.         [
  424.           2.044453497691577,
  425.           0.6398396591887818,
  426.           181.5
  427.         ],
  428.         [
  429.           2.044453551574043,
  430.           0.6398395546758482,
  431.           181.5
  432.         ]
  433.       ],
  434.       "rotations": [
  435.         [
  436.           0,
  437.           0,
  438.           0
  439.         ],
  440.         [
  441.           0,
  442.           0,
  443.           0
  444.         ]
  445.       ],
  446.       "currentSpeed": 1,
  447.       "playing": false
  448.     }
  449.   },
  450.   {
  451.     "ref": "leftClose2",
  452.     "czmObject": {
  453.       "xbsjType": "Path",
  454.       "xbsjGuid": "8cc71244-4abb-4be3-8964-31c0f48dacf5",
  455.       "name": "东走廊南-左侧门-路径动画",
  456.       "positions": [
  457.         [
  458.           2.044453551574043,
  459.           0.6398395546758482,
  460.           181.5
  461.         ],
  462.         [
  463.           2.044453497691577,
  464.           0.6398396591887818,
  465.           181.5
  466.         ]
  467.       ],
  468.       "rotations": [
  469.         [
  470.           0,
  471.           0,
  472.           0
  473.         ],
  474.         [
  475.           0,
  476.           0,
  477.           0
  478.         ]
  479.       ],
  480.       "currentSpeed": 1,
  481.       "playing": false
  482.     }
  483.   },
  484.   {
  485.     "ref": "rightDoor2",
  486.     "czmObject": {
  487.       "xbsjType": "Tileset",
  488.       "xbsjGuid": "4463f2e9-d4a8-4ce2-b8fd-e27385ec90e7",
  489.       "name": "东走廊南-右侧门",
  490.       "url": "...",  // 模型地址
  491.       "xbsjPosition": [
  492.         2.0444534406343626,
  493.         0.6398397703102854,
  494.         181.5
  495.       ],
  496.       "xbsjRotation": [
  497.         -0.39681226428802496,
  498.         0.015707963267948967,
  499.         0
  500.       ],
  501.       "xbsjScale": [
  502.         0.85,
  503.         0.87,
  504.         1
  505.       ],
  506.       "xbsjUseOriginTransform": false,
  507.       "xbsjClippingPlanes": {},
  508.       "xbsjCustomShader": {}
  509.     }
  510.   },
  511.   {
  512.     "ref": "rightOpen2",
  513.     "czmObject": {
  514.       "xbsjType": "Path",
  515.       "xbsjGuid": "411b4964-1997-4106-a8fc-6d9e4c25040d",
  516.       "name": "东走廊南-右侧门-路径动画",
  517.       "positions": [
  518.         [
  519.           2.0444534406343626,
  520.           0.6398397703102854,
  521.           181.5
  522.         ],
  523.         [
  524.           2.044453386062222,
  525.           0.6398398751956313,
  526.           181.5
  527.         ]
  528.       ],
  529.       "rotations": [
  530.         [
  531.           0,
  532.           0,
  533.           0
  534.         ],
  535.         [
  536.           0,
  537.           0,
  538.           0
  539.         ]
  540.       ],
  541.       "currentSpeed": 1,
  542.       "playing": false
  543.     }
  544.   },
  545.   {
  546.     "ref": "rightClose2",
  547.     "czmObject": {
  548.       "xbsjType": "Path",
  549.       "xbsjGuid": "411b4964-1997-4106-a8fc-6d9e4c25040v",
  550.       "name": "东走廊南-右侧门-路径动画",
  551.       "positions": [
  552.         [
  553.           2.044453386062222,
  554.           0.6398398751956313,
  555.           181.5
  556.         ],
  557.         [
  558.           2.0444534406343626,
  559.           0.6398397703102854,
  560.           181.5
  561.         ]
  562.       ],
  563.       "rotations": [
  564.         [
  565.           0,
  566.           0,
  567.           0
  568.         ],
  569.         [
  570.           0,
  571.           0,
  572.           0
  573.         ]
  574.       ],
  575.       "currentSpeed": 1,
  576.       "playing": false
  577.     }
  578.   }
  579. ];
  581. // 展厅
  582. const showroom = [
  583.   {
  584.     "ref": "leftDoor3",
  585.     "czmObject": {
  586.       "xbsjType": "Tileset",
  587.       "xbsjGuid": "dcead727-1fa2-4cdf-8914-e85e633a60a1",
  588.       "name": "展厅-左侧门",
  589.       "url": "...",  // 模型地址
  590.       "xbsjPosition": [
  591.         2.04445265845087,
  592.         0.639841866217198,
  593.         181.51049512039936
  594.       ],
  595.       "xbsjRotation": [
  596.         -0.3967670706393829,
  597.         0.015707963267948967,
  598.         0
  599.       ],
  600.       "xbsjScale": [
  601.         0.85,
  602.         0.87,
  603.         1
  604.       ],
  605.       "xbsjUseOriginTransform": false,
  606.       "xbsjClippingPlanes": {},
  607.       "xbsjCustomShader": {}
  608.     }
  609.   },
  610.   {
  611.     "ref": "leftOpen3",
  612.     "czmObject": {
  613.       "xbsjType": "Path",
  614.       "xbsjGuid": "b5352dab-5d4b-41a8-b2fd-304eb936291b",
  615.       "name": "展厅-左侧门-路径动画",
  616.       "positions": [
  617.         [
  618.           2.04445265845087,
  619.           0.639841866217198,
  620.           181.51049512039936
  621.         ],
  622.         [
  623.           2.0444527145178744,
  624.           0.6398417611322228,
  625.           181.51049512039936
  626.         ]
  627.       ],
  628.       "rotations": [
  629.         [
  630.           0,
  631.           0,
  632.           0
  633.         ],
  634.         [
  635.           0,
  636.           0,
  637.           0
  638.         ]
  639.       ],
  640.       "currentSpeed": 1,
  641.       "playing": false
  642.     }
  643.   },
  644.   {
  645.     "ref": "leftClose3",
  646.     "czmObject": {
  647.       "xbsjType": "Path",
  648.       "xbsjGuid": "b5352dab-5d4b-41a8-b2fd-304eb936291a",
  649.       "name": "展厅-左侧门-路径动画",
  650.       "positions": [
  651.         [
  652.           2.0444527145178744,
  653.           0.6398417611322228,
  654.           181.51049512039936
  655.         ],
  656.         [
  657.           2.04445265845087,
  658.           0.639841866217198,
  659.           181.51049512039936
  660.         ]
  661.       ],
  662.       "rotations": [
  663.         [
  664.           0,
  665.           0,
  666.           0
  667.         ],
  668.         [
  669.           0,
  670.           0,
  671.           0
  672.         ]
  673.       ],
  674.       "currentSpeed": 1,
  675.       "playing": false
  676.     }
  677.   },
  678.   {
  679.     "ref": "rightDoor3",
  680.     "czmObject": {
  681.       "xbsjType": "Tileset",
  682.       "xbsjGuid": "7254984f-eef8-4b32-ab0b-6b1d20b678a8",
  683.       "name": "展厅-右侧门",
  684.       "url": "...",  // 模型地址
  685.       "xbsjPosition": [
  686.         2.0444526011030795,
  687.         0.6398419770744627,
  688.         181.51200448185625
  689.       ],
  690.       "xbsjRotation": [
  691.         -0.3960921777795168,
  692.         0.015707963267948967,
  693.         0
  694.       ],
  695.       "xbsjScale": [
  696.         0.85,
  697.         0.87,
  698.         1
  699.       ],
  700.       "xbsjUseOriginTransform": false,
  701.       "xbsjClippingPlanes": {},
  702.       "xbsjCustomShader": {}
  703.     }
  704.   },
  705.   {
  706.     "ref": "rightOpen3",
  707.     "czmObject": {
  708.       "xbsjType": "Path",
  709.       "xbsjGuid": "ec90227e-0b62-4867-8f0a-7a888fdb78f3",
  710.       "name": "展厅-右侧门-路径动画",
  711.       "positions": [
  712.         [
  713.           2.0444526011030795,
  714.           0.6398419770744627,
  715.           181.51200448185625
  716.         ],
  717.         [
  718.           2.0444525492357384,
  719.           0.6398420829344057,
  720.           181.51200448185625
  721.         ]
  722.       ],
  723.       "rotations": [
  724.         [
  725.           0,
  726.           0,
  727.           0
  728.         ],
  729.         [
  730.           0,
  731.           0,
  732.           0
  733.         ]
  734.       ],
  735.       "currentSpeed": 1,
  736.       "playing": false
  737.     }
  738.   },
  739.   {
  740.     "ref": "rightClose3",
  741.     "czmObject": {
  742.       "xbsjType": "Path",
  743.       "xbsjGuid": "ec90227e-0b62-4867-8f0a-7a888fdb78f5",
  744.       "name": "展厅-右侧门-路径动画",
  745.       "positions": [
  746.         [
  747.           2.0444525492357384,
  748.           0.6398420829344057,
  749.           181.51200448185625
  750.         ],
  751.         [
  752.           2.0444526011030795,
  753.           0.6398419770744627,
  754.           181.51200448185625
  755.         ]
  756.       ],
  757.       "rotations": [
  758.         [
  759.           0,
  760.           0,
  761.           0
  762.         ],
  763.         [
  764.           0,
  765.           0,
  766.           0
  767.         ]
  768.       ],
  769.       "currentSpeed": 1,
  770.       "playing": false
  771.     }
  772.   }
  773. ];
  775. const glassDoorJson = [
  776.   ...reception,
  777.   ...corridor_north,
  778.   ...corridor_south,
  779.   ...showroom
  780. ];
  782. export default glassDoorJson;

deepblue_ani.js

由于角度加减多少度，需要在CesiumLab中尝试将模型移动、旋转后总结规律得出， 如果想所有的开关模型都使用这个方法计算角度，那么在模型制作时，必须保证模型的尺寸一致，缩放一致

  1. import switchJson from '@/constant/switchJson';
  3. let openDoor = false;
  4. let switchTimer = null;
  6. // 室内模型-玻璃门 开门 动画
  7. export function openDoorAnimation (earth, modelArr) {
  8.   modelArr.forEach((item)=>{
  9.     const model = earth.sceneTree.$refs[item.doorRef].czmObject;
  10.     const path = earth.sceneTree.$refs[item.pathRef[0]].czmObject;
  11.     if (model.xbsjPosition[1] !== path.positions[1][1] && openDoor) {
  12.       path.playing = true;
  13.       XE.MVVM.watch(path, 'currentPosition', position => {
  14.         model.xbsjPosition = [...position];
  15.       });
  16.     }
  17.   });
  18. }
  20. // 室内模型-玻璃门 关门 动画
  21. export function closeDoorAnimation (earth, modelArr) {
  22.   modelArr.forEach((item)=>{
  23.     const model = earth.sceneTree.$refs[item.doorRef].czmObject;
  24.     const path = earth.sceneTree.$refs[item.pathRef[1]].czmObject;
  25.     if(item.closeTimer) {
  26.       clearTimeout(item.closeTimer)
  27.     }
  28.     if (model.xbsjPosition[1] !== path.positions[1][1] && !openDoor) {
  29.       item.closeTimer = setTimeout(()=>{
  30.         path.playing = true;
  31.         XE.MVVM.watch(path, 'currentPosition', position => {
  32.           model.xbsjPosition = [...position];
  33.         })
  34.       }, 5000)
  35.     }
  36.   });
  37. }
  39. // 室内模型-开关 按下动画
  40. export function switchAnimation (earth) {
  41.   const switchObj = [];
  42.   let switchRef = "";
  43.   switchJson.forEach((item,index)=>{
  44.     switchRef = `switch${index}`;
  45.     switchObj.push({
  46.       switch: earth.sceneTree.$refs[switchRef].czmObject,
  47.       door: item.glassDoor
  48.     });
  49.   });
  50.   switchObj.forEach((item)=>{
  51.     /*
  52.     * 将开关模型变化之前的rotation和position拷贝一份，
  53.     * 需要将开关模型恢复原位时赋值即可
  54.     * 使用...解构赋值是因为...是浅拷贝，不受原值变化的影响
  55.     */
  56.     const oldRotation = [...item.switch.xbsjRotation];
  57.     const oldPosition = [...item.switch.xbsjPosition];  
  58.     // 弧度转角度
  59.     item.xdegree = Number((oldPosition[0] / Math.PI * 180).toFixed(7));
  60.     item.ydegree = Number((oldPosition[1] / Math.PI * 180).toFixed(8));
  61.     item.switch.onclick = () => {
  62.       if (switchTimer) {
  63.         clearTimeout(switchTimer)
  64.       }
  65.       openDoor = true;
  66.       item.switch.xbsjRotation[1] = -item.switch.xbsjRotation[1];
  67.       // 角度加减多少度，需要在CesiumLab中尝试将模型移动、旋转后总结规律得出
  68.       // 如果想所有的开关模型都使用这个方法计算角度，那么在模型制作时，必须保证模型的尺寸一致，缩放一致
  69.       if (item.switch.xbsjRotation[1] < 0) {
  70.         item.xdegree -= 0.0000002;
  71.         item.ydegree -= 0.00000006;
  72.       } else {
  73.         item.xdegree += 0.0000002;
  74.         item.ydegree += 0.00000007;
  75.       }
  76.             // 角度转弧度
  77.       item.switch.xbsjPosition[0] = item.xdegree / 180 * Math.PI;
  78.       item.switch.xbsjPosition[1] = item.ydegree / 180 * Math.PI;
  79.       openDoorAnimation(earth, item.door);
  80.       switchTimer = setTimeout(()=>{
  81.         // 开关模型恢复原位时，需要将所有变化的值赋值为初始值
  82.           item.switch.xbsjRotation = oldRotation;
  83.           item.switch.xbsjPosition = oldPosition;
  84.           item.xdegree = Number((oldPosition[0] / Math.PI * 180).toFixed(7));
  85.           item.ydegree = Number((oldPosition[1] / Math.PI * 180).toFixed(8));
  86.           openDoor = false;
  87.           closeDoorAnimation(earth, item.door);
  88.         }, 500);
  89.     }
  90.   });
  91. }

index.js

  1. /* index.js */
  3. import deepblueLeafJson from '@/constant/deepblueJson'; // 引入路径可根据实际情况调整
  4. import switchJson from '@/constant/switchJson';  // 引入路径可根据实际情况调整
  5. import glassDoorJson from '@/constant/glassDoorJson';  // 引入路径可根据实际情况调整
  6. import { switchAnimation } from '@/pages/DigitalTwin/deepblue_ani';  // 引入路径可根据实际情况调整
  8. class animationDemo extends Component{
  10.   constructor(props) {
  11.     super(props);
  12.     this.earth = null;
  13.   },
  15.   componentDidMount() {
  16.     XE.ready().then(()=>{
  17.       // 加载标绘插件 js
  18.       ...
  19.     }).then(()=>{
  20.       this.startUp();
  21.     })
  22.   },
  24.   startUp = ()=>{
  25.     // 创建 Earth实例
  26.     this.earth = new XE.Earth("earthContainer");
  27.     // 开启拾取（鼠标点击事件）
  28.     this.earth.interaction.picking.enabled = true;
  29.     // 通过JSON配置创建节点
  30.     this.earth.sceneTree.root.children.push(...deepblueLeafJson, ...switchJson, ...glassDoorJson);
  32.     switchAnimation(this.earth);
  33.   }                  
  35.   return (
  36.     <div id="earthContainer"></div>
  37.   )
  38. }
  40. export default animationDemo;