微信小程序最新大招——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引入

1. <xr-asset-load type="gltf" asset-id="gltf-damageHelmet" src=".../index.glb" />

复制代码

以后经过xr-gltf标签来利用

1. <xr-gltf node-id="gltf-damageHelmet" model="gltf-damageHelmet"></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以后可以点窜其属性：

1. const gltf = el.getComponent("gltf");
2. for (const mesh of gltf.getPrimitivesByNodeName("...")) {
3.   mesh.material.setTexture("u_baseColorMap", ...);
4. }

复制代码

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

1. const gltf = el.getComponent("gltf");
2. el.getComponent("animator").play("idle");

复制代码

其中idle是动画名，对应 .gltf 文件中animations中的name属性
也可以xr-gltf标签上增加anim-autoplay属性，将自动播放模子内的一切动画
xr-gltf也可以被嵌套在父元素中，在父元素上增加动画，模子也会随着父元素一路活动：

1. <xr-asset-load asset-id="anim" type="keyframe" src=".../animation.json"/>
2. <xr-node anim-keyframe="anim" anim-autoplay="clip:parent">
3.   <xr-node anim-keyframe="anim" anim-autoplay="clip:child">
4.     <xr-gltf model="miku-kawaii" anim-keyframe="anim" anim-autoplay></xr-gltf>
5.   </xr-node>
6. </xr-node>

复制代码

paren和child界说在animation.json中，别离为高低活动和扭转，子元素xr-gltf也会随着一路高低、扭转活动

6. .gltf文件与.glb文件
这两种都为gltf文件格式，glb是二进制文件，是将一切数据都打包到一路的文件，可以完全自力利用
gltf是json或ascii文件，有两种情况：
1.将所稀有据都打包为一个文件，则gltf将包括glTF JSON和base64以后的二进制资本文件（如图片）
2.只包括glTF JSON，其他二进制文件分隔打包，则会有多个文件，这些文件需要连结相对途径稳定一路利用