微信小程序xr-frame实现视频纹理

牧羊人_sj

已于 2023-05-18 17:58:14 修改

阅读量629

点赞数 3

文章标签：小程序微信小程序

于 2023-05-17 16:51:37 首次发布

本文链接：https://blog.csdn.net/qq_59347596/article/details/130729469

版权

文章展示了如何在XR场景中通过xr-assets组件加载类型为video-texture的资源，设置视频属性如自动播放和循环，并将其应用到xr-mesh的uniforms上，创建一个播放视频的3D立方体网格。代码示例详细说明了整个过程。

摘要由CSDN通过智能技术生成

1.基础知识点：
资源加载器: type="video-texture" 可以设置很多video属性

<xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
    <xr-asset-load
      type="video-texture" asset-id="cat"
      src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/videos/cat.mp4" options="autoPlay:true,loop:true,abortAudio:false,placeHolder:https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/videos/cat.jpg"
    />
  </xr-assets>

网格:

<xr-mesh
      node-id="mesh-cube" scale="1.6 0.9 0.9"
      geometry="cube" material="standard-mat"
      uniforms="u_baseColorMap:video-cat"
      cube-shape="autoFit:true"
      bind:touch-shape="handleTouchCube"
    />

注明：作为普通纹理

对mesh的uniforms设置为对应的视频即可

整体代码:

<xr-scene id="xr-scene" bind:ready="handleReady">
  <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
    <xr-asset-load
      type="video-texture" asset-id="cat"
      src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/videos/cat.mp4" options="autoPlay:true,loop:true,abortAudio:false,placeHolder:https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/videos/cat.jpg"
    />

    <xr-asset-material asset-id="standard-mat" effect="standard" />
  </xr-assets>

  <xr-node>
    <xr-node node-id="target" />
    <xr-mesh
      node-id="mesh-cube" scale="1.6 0.9 0.9"
      geometry="cube" material="standard-mat"
      uniforms="u_baseColorMap:video-cat"
      cube-shape="autoFit:true"
      bind:touch-shape="handleTouchCube"
    />
    <xr-camera
      id="camera" node-id="camera" position="0 0 3" clear-color="0.925 0.925 0.925 1"
      target="target"  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 0 0" color="1 1 1" intensity="3"/>
  </xr-node>
</xr-scene>