index.wxml 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <xr-scene id="xr-scene" bind:ready="handleReady">
  2. <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
  3. </xr-assets>
  4. <xr-node>
  5. <xr-node node-id="center" position="0 2 0" ></xr-node>
  6. <xr-mesh node-id="mesh-plane" position="0 0 0" rotation="0 0 0" scale="20 1 20" geometry="plane" uniforms="u_baseColorFactor:0 0 0 1"></xr-mesh>
  7. <!-- 用于默认缩放的容器 -->
  8. <xr-node scale="0.1 0.1 0.1" position="0 2 0">
  9. <!-- 示例1 对齐 -->
  10. <xr-node position="-10 11 0">
  11. <xr-mesh position="0 0 -0.01" rotation="90 0 0" scale="8 1 8" geometry="plane" states="renderQueue: 2009, alphaMode: BLEND, cullOn: false" uniforms="u_baseColorFactor:0.2 0.6 0.2 0.8"></xr-mesh>
  12. <xr-text
  13. value="居中"
  14. position="0 0 0" never-cull
  15. size="2" anchor="0.5 0.5" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
  16. ></xr-text>
  17. </xr-node>
  18. <xr-node position="0 11 0">
  19. <xr-mesh position="0 0 -0.01" rotation="90 0 0" scale="8 1 8" geometry="plane" states="renderQueue: 2009, alphaMode: BLEND, cullOn: false" uniforms="u_baseColorFactor:0.2 0.6 0.2 0.8"></xr-mesh>
  20. <xr-text
  21. value="居左上"
  22. position="-4 4 0" never-cull
  23. size="2" anchor="0 1" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
  24. ></xr-text>
  25. </xr-node>
  26. <xr-node position="10 11 0">
  27. <xr-mesh position="0 0 -0.01" rotation="90 0 0" scale="8 1 8" geometry="plane" states="renderQueue: 2009, alphaMode: BLEND, cullOn: false" uniforms="u_baseColorFactor:0.2 0.6 0.2 0.8"></xr-mesh>
  28. <xr-text
  29. value="居右下"
  30. position="4 -4 0" never-cull
  31. size="2" anchor="1 0" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
  32. ></xr-text>
  33. </xr-node>
  34. <!-- 示例2 多行 -->
  35. <xr-node position="-10 0 0">
  36. <xr-mesh position="0 0 -0.01" rotation="90 0 0" scale="8 1 8" geometry="plane" states="renderQueue: 2009, alphaMode: BLEND, cullOn: false" uniforms="u_baseColorFactor:0.2 0.2 0.6 0.8"></xr-mesh>
  37. <xr-text
  38. value="多行文本,基于宽度进行自动换行"
  39. position="-4 4 0" never-cull
  40. width="8"
  41. size="1.5" anchor="0 1" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
  42. ></xr-text>
  43. </xr-node>
  44. <xr-node position="-1.5 0 0">
  45. <xr-mesh position="0 0 -0.01" rotation="90 0 0" scale="8 1 8" geometry="plane" states="renderQueue: 2009, alphaMode: BLEND, cullOn: false" uniforms="u_baseColorFactor:0.2 0.2 0.6 0.8"></xr-mesh>
  46. <xr-text
  47. value="右下文本,基于宽度自动换行"
  48. position="-4 4 0" never-cull
  49. horzAlign="right" vertAlign="bottom"
  50. width="8" height="8"
  51. size="1.5" anchor="0 1" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
  52. ></xr-text>
  53. </xr-node>
  54. <xr-node position="4 0 0">
  55. <xr-mesh position="0 0 -0.01" rotation="90 0 0" scale="2 1 8" geometry="plane" states="renderQueue: 2009, alphaMode: BLEND, cullOn: false" uniforms="u_baseColorFactor:0.2 0.2 0.6 0.8"></xr-mesh>
  56. <xr-text
  57. value="实现竖排"
  58. position="-1 4 0" never-cull
  59. width="2"
  60. size="2" anchor="0 1" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
  61. ></xr-text>
  62. </xr-node>
  63. <xr-node position="10 0 0">
  64. <xr-mesh position="0 0 -0.01" rotation="90 0 0" scale="8 1 8" geometry="plane" states="renderQueue: 2009, alphaMode: BLEND, cullOn: false" uniforms="u_baseColorFactor:0.2 0.2 0.6 0.8"></xr-mesh>
  65. <xr-text
  66. value="换行符\n行二\n行三\n"
  67. position="-4 4 0" never-cull
  68. size="2" anchor="0 1" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
  69. ></xr-text>
  70. </xr-node>
  71. <!-- 示例3 变化 -->
  72. <xr-node position="-10 -11 0">
  73. <xr-mesh position="0 0 -0.01" rotation="90 0 0" scale="8 1 8" geometry="plane" states="renderQueue: 2009, alphaMode: BLEND, cullOn: false" uniforms="u_baseColorFactor:0.6 0.2 0.2 0.8"></xr-mesh>
  74. <xr-text
  75. value="变化数字: {{words}}"
  76. position="0 0 0" never-cull
  77. horzAlign="center"
  78. width="8"
  79. lineHeight="2"
  80. size="1" anchor="0.5 0.5" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
  81. ></xr-text>
  82. </xr-node>
  83. <xr-node position="0 -11 0">
  84. <xr-mesh position="0 0 -0.01" rotation="90 0 0" scale="8 1 8" geometry="plane" states="renderQueue: 2009, alphaMode: BLEND, cullOn: false" uniforms="u_baseColorFactor:0.6 0.2 0.2 0.8"></xr-mesh>
  85. <xr-text
  86. value="变色文本"
  87. position="0 0 0" never-cull
  88. horzAlign="center"
  89. size="1" anchor="0.5 0.5" uniforms="u_baseColorFactor:{{fontColor}} 1"
  90. ></xr-text>
  91. </xr-node>
  92. <xr-node position="10 -11 0">
  93. <xr-mesh position="0 0 -0.01" rotation="90 0 0" scale="8 1 8" geometry="plane" states="renderQueue: 2009, alphaMode: BLEND, cullOn: false" uniforms="u_baseColorFactor:0.6 0.2 0.2 0.8"></xr-mesh>
  94. <xr-text
  95. value="变化大小"
  96. position="0 0 0" never-cull
  97. horzAlign="center"
  98. size="{{fontSize}}" anchor="0.5 0.5" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
  99. ></xr-text>
  100. </xr-node>
  101. </xr-node>
  102. <xr-camera
  103. id="camera" node-id="camera" position="0 2 4" clear-color="0.8 0.8 0.8 1"
  104. target="center"
  105. camera-orbit-control=""
  106. ></xr-camera>
  107. </xr-node>
  108. <xr-node node-id="lights">
  109. <xr-light type="ambient" color="1 1 1" intensity="1" />
  110. <xr-light type="directional" rotation="40 170 0" color="1 1 1" intensity="3"/>
  111. </xr-node>
  112. </xr-scene>