uniApp使用XR-Frame创建3D场景(5)材质贴图的运用

Ltanke2024-03-29 11:27

上一篇讲解了如何在uniApp中创建xr-frame子组件并创建简单的3D场景。

这篇我们讲解在xr-frame中如何给几何体赋予贴图材质。

先看源码

XML 复制代码

<xr-scene render-system="alpha:true" bind:ready="handleReady">
  <xr-node>
    <xr-assets>
      <xr-asset-load type="texture" asset-id="waifu" src="https://mmbiz.qpic.cn/mmbiz_png/DWsjgNA1bNiaibib33WXx0leuaiczS0InficusibtVMd9WrCwJMbLZpxkQLpDoTUZFJb0WhnNXFLF7I4XWQOR9ibunXsA/640?wx_fmt=png&amp;from=appmsg" />
    </xr-assets>
    <xr-mesh node-id="cube" cast-shadow geometry="cube" uniforms="u_baseColorMap: waifu"/>
  </xr-node>
  <xr-camera id="camera"  clear-color="0 0 0 0" position="1 1 2" target="cube" camera-orbit-control/>
 </xr-scene>

1.加载贴图资源

**<xr-asset>标签，**表示这个标签下是要加载的资源。

<xr-asset-load>标签，表示这是一个资源加载器，

type 表示资源类型，这里赋值为texture,表示要加载的是一个纹理图片

src表示图片纹理的地址。

asset-id表示这个资源的id，这个id在后面要赋值给后面的模型u_baseColorMap属性

<xr-mesh>标签， 表示要将创建的一个模型，接下来要给这个模型加入贴图纹理。就要设置这个标签中的uniforms属性

在uniforms属性中，设置u_baseColorMap: waifu

2.在微信开发者工具的模拟器中看效果

这里给大家推荐一个微信小程序 3D模型素材库，这个小程序中的模型都是针对小程序优化后的glb格式文件，体积小，加载快，非常适合小程序使用