XR-frame实现文字渲染

<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);

    }
    
  }
})

在uniApp中使用XR-Frame实现交互功能,主要依赖于XR-Frame框架提供的事件绑定机制。通过这些机制,可以为3D场景中的对象添加触摸或点击事件处理函数,从而实现用户与3D内容的互动。以下是实现交互的一些关键点和示例代码。 ### 实现点击交互 为了给3D对象添加点击交互,可以利用`xr-mesh`组件上的`bind:touch-shape`属性来绑定一个处理函数。当用户点击该3D对象时,这个函数会被触发。例如,在引用[2]中展示的代码片段里,两个球体模型都绑定了`handleTouchModel`方法,用于响应用户的触摸事件。 ```html <xr-scene render-system="alpha:true" bind:ready="handleReady"> <xr-node> <xr-mesh id="1" node-id="mesh-sphere" position="-0.4 0 -0.4" scale="0.3 0.3 0.3" geometry="sphere" mesh-shape bind:touch-shape="handleTouchModel" uniforms="u_baseColorFactor:0.3 0.5 0.8 1,u_metallicRoughnessValues: 0.3 0.2"></xr-mesh> <xr-mesh id="2" node-id="mesh-sphere2" position="0.4 0 0.4" scale="0.3 0.3 0.3" geometry="sphere" mesh-shape bind:touch-shape="handleTouchModel" uniforms="u_baseColorFactor:0.5 0.4 0.6 1,u_metallicRoughnessValues: 0.3 0.7"></xr-mesh> </xr-node> <xr-camera id="camera" clear-color="0 0 0 0" position="1 1 2" target="mesh-sphere" camera-orbit-control/> </xr-scene> ``` 在这个例子中,`handleTouchModel`方法需要在页面的JavaScript部分定义,以处理具体的交互逻辑,比如改变物体的颜色或者位置等。 ### 加载和使用GLTF模型 除了基本的3D形状外,XR-Frame还支持加载复杂的3D模型,如GLTF格式的模型。这可以通过`xr-asset-load`组件加载模型文件,再通过`xr-gltf`组件将模型渲染到场景中。这种方式允许开发者将更加复杂和详细的3D模型集成到应用中,提供更丰富的视觉体验[^4]。 ```html <xr-assets> <xr-asset-load type="gltf" asset-id="gltf-damageHelmet" src="https://utl for your gltf file" /> </xr-assets> <xr-node> <xr-gltf node-id="gltf-damageHelmet" bind:gltf-loaded="handleGLTFLoaded" model="gltf-damageHelmet"></xr-gltf> </xr-node> ``` ### 页面初始化设置 对于uniApp项目,还需要对页面进行一些初始化设置,确保XR-Frame能够正确渲染。这包括设置页面的宽度和高度,以及根据设备的像素密度调整渲染尺寸。以下是一个简单的页面初始化配置示例[^3]: ```javascript export default { data() { return { width: 300, height: 300, renderWidth: 300, renderHeight: 300, }; }, onLoad(option) { this.width = uni.getWindowInfo().windowWidth; this.height = uni.getWindowInfo().windowHeight; const dpi = uni.getWindowInfo().pixelRatio; this.renderWidth = this.width * dpi; this.renderHeight = this.height * dpi; }, mounted() {}, methods: {} }; ``` 以上代码展示了如何根据设备的实际窗口大小和像素密度动态调整XR-Frame渲染尺寸,保证了不同设备上的显示效果一致性。 ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

山楂树の

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值