index.wxml 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. <xr-scene ar-system="modes:threeDof ; planeMode: 1;" bind:ready="handleReady" bind:ar-ready="handleARReady">
  2. <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
  3. <xr-asset-load type="gltf" asset-id="gltf-kun" src="https://wx-model-1317557471.cos.ap-shanghai.myqcloud.com/WXModel/kun_0128.glb" />
  4. <xr-asset-load type="gltf" asset-id="gltf-Jiaolong" src="https://wx-model-1317557471.cos.ap-shanghai.myqcloud.com/WXModel/JiaoLong.glb" />
  5. <xr-asset-load type="gltf" asset-id="gltf-YinLong" src="https://wx-model-1317557471.cos.ap-shanghai.myqcloud.com/WXModel/YingLong_0128.glb" />
  6. <xr-asset-load type="gltf" asset-id="gltf-luanniao" src="https://wx-model-1317557471.cos.ap-shanghai.myqcloud.com/WXModel/fenghuang_0129.glb" />
  7. <xr-asset-load type="gltf" asset-id="gltf-fuzhu" src="https://wx-model-1317557471.cos.ap-shanghai.myqcloud.com/WXModel/shenlu_anim_0129.glb" />
  8. <xr-asset-load type="gltf" asset-id="gltf-qiling" src="https://wx-model-1317557471.cos.ap-shanghai.myqcloud.com/WXModel/shizi_0128.glb" />
  9. <xr-asset-load type="gltf" asset-id="gltf-denglong" src="https://wx-model-1317557471.cos.ap-shanghai.myqcloud.com/WXModel/DengLong3.glb" />
  10. <xr-asset-load type="gltf" asset-id="gltf-paopao" src="https://wx-model-1317557471.cos.ap-shanghai.myqcloud.com/WXModel/PaoPao1.glb" />
  11. <xr-asset-load type="gltf" asset-id="gltf-bubble" src="https://wx-model-1317557471.cos.ap-shanghai.myqcloud.com/WXModel/bubble.glb" />
  12. <xr-asset-load type="gltf" asset-id="gltf-birdslow" src="https://wx-model-1317557471.cos.ap-shanghai.myqcloud.com/WXModel/fenghuang_03.glb" />
  13. <xr-asset-load type="gltf" asset-id="miku-kawaii" src="https://wx-model-1317557471.cos.ap-shanghai.myqcloud.com/phoenix_bird.glb" />
  14. <xr-asset-load asset-id="anim" type="keyframe" src="/assets/animation/miku-kawaii-animation.json"/>
  15. <xr-asset-load asset-id="anim_kun_long" type="keyframe" src="/assets/animation/kun-long-animation.json"/>
  16. <xr-asset-load asset-id="anim_kun_long_ni" type="keyframe" src="/assets/animation/kun-long-ni-animation.json"/>
  17. <xr-asset-load asset-id="anim_nianshou" type="keyframe" src="/assets/animation/nianshou-animation.json"/>
  18. <xr-asset-load type="texture" asset-id="particle-texture" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/particles/point.png" />
  19. <xr-asset-load type="texture" asset-id="flarePicture" src="https://wx-model-1317557471.cos.ap-shanghai.myqcloud.com/WXModel/flare.png" />
  20. </xr-assets>
  21. <xr-env node-id="World" env-data="env1"/>
  22. <xr-node>
  23. <xr-gltf
  24. id="denglong" node-id="denglong" scale="1 1 1" position="-15 13 -15" rotation="0 -100 0" model="gltf-denglong" anim-autoplay />
  25. <xr-gltf
  26. id="denglong" node-id="denglong" scale="1 1 1" position="15 12 -20" rotation="0 -100 0" model="gltf-denglong" anim-autoplay />
  27. <xr-gltf
  28. id="denglong" node-id="denglong" scale="1 1 1" position="12 11 -30" rotation="0 -100 0" model="gltf-denglong" anim-autoplay />
  29. <xr-gltf
  30. id="denglong" node-id="denglong" scale="1 1 1" position="-5.5 10 -5" rotation="0 -100 0" model="gltf-denglong" anim-autoplay />
  31. <xr-gltf
  32. id="denglong" node-id="denglong" scale="1 1 1" position="5.5 9 8" rotation="0 -100 0" model="gltf-denglong" anim-autoplay />
  33. <!-- <xr-gltf id="kun" node-id="kun" scale="5 5 5" position="-0.3 -2 -10" rotation="0 90 0" model="gltf-kun" anim-autoplay />
  34. <xr-gltf id="Jiaolong" node-id="Jiaolong" scale="10 10 10" position="-6.3 2.5 -30" rotation="0 0 0" model="gltf-Jiaolong" anim-autoplay />
  35. <xr-gltf
  36. wx:if="{{nianshouShow}}"
  37. id="qiling" node-id="qiling" scale="0.05 0.05 0.05" position="10.3 0 0" rotation="0 -80 0" model="gltf-qiling" anim-autoplay />
  38. <xr-gltf
  39. wx:if="false"
  40. id="luanniao" node-id="luanniao" scale="5 5 5" position="-2.3 3 10" rotation="0 -80 0" model="gltf-luanniao" anim-autoplay />
  41. <xr-gltf
  42. wx:if="false"
  43. id="qiling" node-id="qiling" scale="1.3 1.3 1.3" position="8.3 3 -5" rotation="0 180 0" model="gltf-qiling" anim-autoplay />
  44. <xr-gltf
  45. wx:if="false"
  46. id="fuzhu" node-id="fuzhu" scale="10 10 10" position="-10.3 3 3" rotation="0 170 0" model="gltf-fuzhu" anim-autoplay />
  47. <xr-gltf
  48. wx:if="false"
  49. id="YinLong" node-id="YinLong" scale="0.1 0.1 0.1" position="10.3 3 10" rotation="0 170 0" model="gltf-YinLong" anim-autoplay />-->
  50. </xr-node>
  51. <xr-node position="30 17 -5" anim-keyframe="anim_nianshou" anim-autoplay="clip:parent">
  52. <xr-node position="0 0 -5" rotation="0 0 0">
  53. <xr-gltf
  54. wx:if="{{nianshouShow}}"
  55. id="qiling" node-id="qiling" scale="10 10 10" position="0 0 0" rotation="0 90 0" model="gltf-qiling" anim-autoplay />
  56. </xr-node>
  57. </xr-node>
  58. <xr-node position="-30 13 -10" anim-keyframe="anim_kun_long_ni" anim-autoplay="clip:parent4">
  59. <xr-node position="0 0 -3" rotation="0 0 0">
  60. <xr-gltf
  61. wx:if="{{fuzhuShow}}"
  62. id="fuzhu" node-id="fuzhu" scale="0.1 0.1 0.1" position="0 0 0" rotation="0 90 0" model="gltf-fuzhu" anim-autoplay />
  63. </xr-node>
  64. </xr-node>
  65. <xr-node position="0 30 0" anim-keyframe="anim_kun_long_ni" anim-autoplay="clip:parent3">
  66. <xr-node position="0 0 -20" rotation="0 0 0">
  67. <xr-gltf
  68. wx:if="{{luanniaoShow}}"
  69. id="luanniao" node-id="luanniao" scale="4 4 4" position="0 0 0" rotation="0 180 0" model="gltf-luanniao" anim-autoplay />
  70. </xr-node>
  71. </xr-node>
  72. <xr-node position="-25 40 40" anim-keyframe="anim" anim-autoplay="clip:parent">
  73. <xr-node position="0 0 -20" rotation="0 0 0" anim-keyframe="anim" anim-autoplay="clip:child">
  74. <xr-gltf
  75. wx:if="{{yinglongShow}}"
  76. id="YinLong" node-id="YinLong" scale="0.06 0.06 0.06" position="0 0 0" rotation="0 90 0" model="gltf-YinLong" anim-autoplay />
  77. </xr-node>
  78. </xr-node>
  79. <xr-node position="-40 25 -35" anim-keyframe="anim_kun_long_ni" anim-autoplay="clip:parent3">
  80. <xr-node position="0 0 10" rotation="0 0 0">
  81. <xr-gltf id="kun" node-id="kun" scale="0.02 0.02 0.02" position="0 0 0" rotation="0 -90 0" model="gltf-kun" anim-autoplay />
  82. </xr-node>
  83. </xr-node>
  84. <xr-node position="40 29 -15" anim-keyframe="anim_kun_long" anim-autoplay="clip:parent4">
  85. <xr-node position="0 0 -20" rotation="0 0 0">
  86. <xr-gltf id="Jiaolong" node-id="Jiaolong" scale="3 3 3" position="0 0 0" rotation="0 90 0" model="gltf-Jiaolong" anim-autoplay />
  87. </xr-node>
  88. </xr-node>
  89. <xr-node position="-40 25 -20" anim-keyframe="anim" anim-autoplay="clip:parent">
  90. <xr-node position="0 0 -10" rotation="0 0 0" anim-keyframe="anim" anim-autoplay="clip:child">
  91. <xr-gltf position="0 0 0" scale="0.01 0.01 0.01" rotation="0 180 0" model="gltf-birdslow" anim-keyframe="anim" anim-autoplay></xr-gltf>
  92. </xr-node>
  93. <!--
  94. <xr-gltf id="birdslow" node-id="birdslow" scale="0.01 0.01 0.01" position="-0.3 -0.5 5" rotation="0 90 0" model="gltf-birdslow" anim-autoplay />
  95. <xr-gltf id="bubble" node-id="bubble" scale="1 1 1" position="-0.3 0 2" rotation="0 0 0" model="gltf-bubble" anim-autoplay />
  96. <xr-gltf
  97. wx:if="true"
  98. id="luanniao" node-id="luanniao" scale="0.5 0.5 0.5" position="-0.3 0 2" rotation="0 -100 0" model="gltf-luanniao" anim-autoplay />
  99. <xr-gltf
  100. wx:if="true"
  101. id="qiling" node-id="qiling" scale="0.01 0.01 0.01" position="-0.3 -0.5 2" rotation="0 -180 0" model="gltf-qiling" anim-autoplay />
  102. <xr-gltf
  103. id="luanniao" node-id="luanniao" scale="1 1 1" position="-0.3 0 -5" rotation="0 100 0" model="gltf-luanniao" anim-autoplay />
  104. <xr-gltf
  105. wx:if="true"
  106. id="fuzhu" node-id="fuzhu" scale="1 1 1" position="-2.3 -0.5 -2" rotation="0 100 0" model="gltf-fuzhu" anim-autoplay />
  107. <xr-gltf id="qipao" node-id="qipao" scale="2 2 2" position="-0.3 0 -3" rotation="0 0 0" model="gltf-qipao" anim-autoplay />
  108. -->
  109. </xr-node>
  110. <!-- <xr-node node-id="target" position="0 1 0" />
  111. <xr-gltf position="1.8 -0.5 1.5" scale="0.12 0.12 0.12" rotation="0 0 0" model="miku" anim-autoplay></xr-gltf>
  112. <xr-node position="0 0 -2" rotation="0 160 0" anim-keyframe="animyu" anim-autoplay="clip:child">
  113. <xr-gltf scale="0.1 0.1 0.1" rotation="0 -90 0" model="miku-yu" anim-keyframe="animyu" anim-autoplay></xr-gltf>
  114. </xr-node>-->
  115. <xr-node>
  116. <xr-custom-particle id="firework" emitter-type="SphereShape" emitter-props="radius:1,arc:0.5" position="1 20 -30" start-color="1 1 0 1" end-color="1 0 0 1" burstCount="1" capacity="2" speed="3.4 3.8" size="0" emit-rate="2" life-time="1" angle="0"
  117. rotation="0 0 90"
  118. texture="particle-texture">
  119. </xr-custom-particle>
  120. <xr-custom-particle id="firework2" emitter-type="SphereShape" emitter-props="radius:1,arc:0.5" position="8 12 -25" start-color="1 0 0 1" end-color="1 1 0 1" burstCount="1" capacity="2" speed="3.4 3.8" size="0" emit-rate="2" life-time="1" angle="0"
  121. rotation="0 0 90"
  122. texture="particle-texture">
  123. </xr-custom-particle>
  124. <xr-custom-particle id="firework3" emitter-type="SphereShape" emitter-props="radius:1,arc:0.5" position="-8 10 -20" start-color="1 1 0 1" end-color="1 0 0 1" burstCount="1" capacity="2" speed="3.4 3.8" size="0" emit-rate="2" life-time="1" angle="0"
  125. rotation="0 0 90"
  126. texture="particle-texture">
  127. </xr-custom-particle>
  128. <xr-custom-particle id="firework4" emitter-type="SphereShape" emitter-props="radius:1,arc:0.5" position="-20 14 -15" start-color="1 0 0 1" end-color="1 1 0 1" burstCount="1" capacity="2" speed="3.4 3.8" size="0" emit-rate="2" life-time="1" angle="0"
  129. rotation="0 0 90"
  130. texture="particle-texture">
  131. </xr-custom-particle>
  132. <xr-custom-particle id="firework5" emitter-type="SphereShape" emitter-props="radius:1,arc:0.5" position="5 15 -15" start-color="1 0 0 1" end-color="1 1 0 1" burstCount="1" capacity="2" speed="3.4 3.8" size="0" emit-rate="2" life-time="1" angle="0"
  133. rotation="0 0 90"
  134. texture="particle-texture">
  135. </xr-custom-particle>
  136. <xr-custom-particle id="firework6" emitter-type="SphereShape" emitter-props="radius:1,arc:0.5" position="15 16 -5" start-color="1 1 0 1" end-color="1 0 0 1" burstCount="1" capacity="2" speed="3.4 3.8" size="0" emit-rate="2" life-time="1" angle="0"
  137. rotation="0 0 90"
  138. texture="particle-texture">
  139. </xr-custom-particle>
  140. <xr-custom-particle id="firework7" emitter-type="SphereShape" emitter-props="radius:1,arc:0.5" position="-15 18 -5" start-color="1 0 0 1" end-color="1 1 0 1" burstCount="1" capacity="2" speed="3.4 3.8" size="0" emit-rate="2" life-time="1" angle="0"
  141. rotation="0 0 90"
  142. texture="particle-texture">
  143. </xr-custom-particle>
  144. </xr-node>
  145. <xr-camera
  146. id="camera" node-id="camera" position="0 0 0" clear-color="0.925 0.925 0.925 1"
  147. background="ar" is-ar-camera
  148. >
  149. </xr-camera>
  150. <xr-node node-id="lights">
  151. <xr-light type="ambient" color="1 1 1" intensity="0.5" />
  152. <xr-light type="directional" rotation="40 170 0" color="1 1 1" intensity="5" />
  153. </xr-node>
  154. </xr-scene>