云裂变营销网

标题: 微信小程序最新大招——xr-frame尝鲜，gltf [打印本页]

作者: 匿名 时间: 2023-3-7 21:35
标题: 微信小程序最新大招——xr-frame尝鲜，gltf
本文为系列文章，建议没看过基础讲解的同学先看看：微信小程序最新大招——xr-frame尝鲜，基础图形讲解
全文目录：微信小程序最新大招——xr-frame尝鲜
本文讲解demo：gltf案例：
官方给出的代码示例大同小异，这里统一讲解，对应官方小程序（名字：小程序示例）的交互动画/xrframe/gltf案例，代码为：
https://github.com/dtysky/xr-frame-demo/tree/master/miniprogram/pages/scene-gltf-damageHelmet
https://github.com/dtysky/xr-frame-demo/tree/master/miniprogram/pages/scene-gltf-unlit
https://github.com/dtysky/xr-frame-demo/tree/master/miniprogram/pages/scene-gltf-light-loading
https://github.com/dtysky/xr-frame-demo/tree/master/miniprogram/pages/scene-gltf-animation
https://github.com/dtysky/xr-frame-demo/tree/master/miniprogram/pages/scene-gltf-morph

1.gltf是目前使用广泛的一种3d模型文件类型，他能将节点、材质、相机、动画、纹理等一些列资源全部打包进一个文件，大大方便了使用，甚至可以在3d建模软件内将完整的场景全部创建好，直接在代码使用
2.要使用gltf模型，首先需要用asset引入

<xr-asset-load type=&#34;gltf&#34; asset-id=&#34;gltf-damageHelmet&#34; src=&#34;.../index.glb&#34; />

复制代码

之后通过xr-gltf标签来使用

<xr-gltf node-id=&#34;gltf-damageHelmet&#34; model=&#34;gltf-damageHelmet&#34;></xr-gltf>

复制代码

demo效果如下：

3.xr-gltf标签有三个属性和一个事件：
model：对应asset-id
cast-shadow：是否产生阴影
receive-shadow：是否接收阴影
gltf-loaded：渲染完毕事件

4.代码控制gltf：
gltf组件提供了两个方法，可以获取到模型内部的mesh：
getPrimitivesByNodeName：在模型内的目标node内，查找其内部的所有mesh，接受一个参数，为目标node的name属性值
getPrimitivesByMeshName：在模型内查找所有目标mesh，接受一个参数，为目标mesh的name属性值
获取到mesh之后可以修改其属性：

const gltf = el.getComponent(&#34;gltf&#34;);
for (const mesh of gltf.getPrimitivesByNodeName(&#34;...&#34;)) {
mesh.material.setTexture(&#34;u_baseColorMap&#34;, ...);
}

复制代码

5.gltf动画：
包含动画的模型，会自动在xr-gltf元素内创建一个Animator组件
可以使用代码来控制这个组件：

const gltf = el.getComponent(&#34;gltf&#34;);
el.getComponent(&#34;animator&#34;).play(&#34;idle&#34;);

复制代码

其中idle是动画名，对应 .gltf 文件中animations中的name属性
也可以xr-gltf标签上添加anim-autoplay属性，将自动播放模型内的所有动画
xr-gltf也可以被嵌套在父元素中，在父元素上添加动画，模型也会跟着父元素一起运动：

<xr-asset-load asset-id=&#34;anim&#34; type=&#34;keyframe&#34; src=&#34;.../animation.json&#34;/>
<xr-node anim-keyframe=&#34;anim&#34; anim-autoplay=&#34;clip:parent&#34;>
<xr-node anim-keyframe=&#34;anim&#34; anim-autoplay=&#34;clip:child&#34;>
<xr-gltf model=&#34;miku-kawaii&#34; anim-keyframe=&#34;anim&#34; anim-autoplay></xr-gltf>
</xr-node>
</xr-node>

复制代码

paren和child定义在animation.json中，分别为上下运动和旋转，子元素xr-gltf也会跟着一起上下、旋转运动

6. .gltf文件与.glb文件
这两种都为gltf文件格式，glb是二进制文件，是将所有数据都打包到一起的文件，可以完全独立使用
gltf是json或ascii文件，有两种情况：
1.将所有数据都打包为一个文件，则gltf将包含glTF JSON和base64之后的二进制资源文件（如图片）
2.只包含glTF JSON，其他二进制文件分开打包，则会有多个文件，这些文件需要保持相对路径不变一起使用

欢迎光临云裂变营销网 (https://www.yunliebian.com/yingxiao/)