XR-frame实现文字渲染

最新推荐文章于 2025-03-05 00:30:00 发布

原创最新推荐文章于 2025-03-05 00:30:00 发布 · 289 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xr #前端

XR-Frame 专栏收录该内容

9 篇文章

订阅专栏

<xr-scene id="xr-scene" bind:ready="handleReady">
  <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
  </xr-assets>
  <xr-node>
    <xr-node node-id="center" position="0 2 0" test></xr-node>
    <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>
    <!-- 用于默认缩放的容器 -->
    <xr-node scale="0.1 0.1 0.1"  position="0 2 0">
      <!-- 示例1 对齐 -->
      <xr-node position="-10 11 0">
        <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>
        <xr-text
          value="居中"
          position="0 0 0" never-cull
          size="2" anchor="0.5 0.5" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
        ></xr-text>
      </xr-node>
      <xr-node position="0 11 0">
        <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>
        <xr-text
          value="居左上"
          position="-4 4 0" never-cull
          size="2" anchor="0 1" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
        ></xr-text>
      </xr-node>
      <xr-node position="10 11 0">
        <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>
        <xr-text
          value="居右下"
          position="4 -4 0" never-cull
          size="2" anchor="1 0" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
        ></xr-text>
      </xr-node>
      <!-- 示例2 多行 -->
      <xr-node position="-10 0 0">
        <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>
        <xr-text
          value="多行文本，基于宽度进行自动换行"
          position="-4 4 0" never-cull
          width="8" line-height="1.4"
          size="1.5" anchor="0 1" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
        ></xr-text>
      </xr-node>
      <xr-node position="-1.5 0 0">
        <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>
        <xr-text
          value="右下文本，基于宽度自动换行"
          position="-4 4 0" never-cull
          horz-align="right" vert-align="bottom"
          width="8" height="8"
          size="1.5" anchor="0 1" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
        ></xr-text>
      </xr-node>
      <xr-node position="4 0 0">
        <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>
        <xr-text
          value="实现竖排"
          position="-1 4 0" never-cull
          width="2"
          size="2" anchor="0 1" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
        ></xr-text>
      </xr-node>
       <xr-node position="10 0 0">
        <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>
        <xr-text
          value="换行符\n行二\n行三\n"
          position="-4 4 0" never-cull
          size="2" anchor="0 1" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
        ></xr-text>
      </xr-node>
      <!-- 示例3 变化 -->
      <xr-node position="-10 -11 0">
        <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>
        <xr-text
          id="changeNumber"
          value="变化数字: {{words}}"
          position="0 0 0" never-cull
          horz-align="center"
          width="8"
          size="1" anchor="0.5 0.5" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
        ></xr-text>
      </xr-node>
      <xr-node position="0 -11 0">
        <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>
        <xr-text
          id="changeColor"
          value="变色文本"
          position="0 0 0" never-cull
          horz-align="center"
          size="1" anchor="0.5 0.5" uniforms="u_baseColorFactor:{{fontColor}} 1"
        ></xr-text>
      </xr-node>
      <xr-node position="10 -11 0">
        <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>
        <xr-text
          id="changeSize"
          value="变化大小"
          position="0 0 0" never-cull
          horz-align="center"
          size="{{fontSize}}" anchor="0.5 0.5" uniforms="u_baseColorFactor:1.0 1.0 1.0 1"
        ></xr-text>
      </xr-node>
    </xr-node>
    <xr-camera
      id="camera" node-id="camera" position="0 2 4" clear-color="0.8 0.8 0.8 1"
      target="center"
      camera-orbit-control=""
    ></xr-camera>
  </xr-node>
  <xr-node node-id="lights">
    <xr-light type="ambient" color="1 1 1" intensity="1" />
    <xr-light type="directional" rotation="40 170 0" color="1 1 1" intensity="3"/>
  </xr-node>
</xr-scene>

Component({
  behaviors: [require('../../common/share-behavior').default],
  properties: {
    a: Number,
  },
  data: {
    loaded: false,
    words: "文本内容",
    fontColor: "1.0 1.0 1.0",
    fontSize: 1,
  },
  lifetimes: {},
  methods: {
    handleReady({detail}) {
      const xrScene = this.scene = detail.value;
      console.log('xr-scene', xrScene);

      let number = 0;
      let fontSize = 1;
      setInterval(()=>{
        this.setData({
          words: number,
          fontSize: fontSize,
          fontColor: `${Math.random()} ${Math.random()} ${Math.random()}`
        })
        number++;
        if (fontSize > 2) {
          fontSize = 1;
        } else {
          fontSize+= 0.1;
        }
      }, 200);

    }
    
  }
})