微信小程序xr-frame GLTF

已于 2023-05-22 15:38:15 修改
阅读量1.9k 收藏 5
点赞数 1
文章标签： 微信小程序 gltf xr-frame
于 2023-05-22 15:04:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59347596/article/details/130802150
版权

前言：什么是GLTF?

原文解释是：GLTF是一种被广泛使用的文件格式，用来储存3D模型和3D场景。在xr-frame里你可以非常轻松地引入任意GLTF模型，并将其渲染出来。想要更详细的讲解：glTF -传输格式；

优势（摘自GLTF介绍 | 微信开放文档 (qq.com)）：

  •  单一文件，完整场景

使用GLTF打包后的GLB文件，可将一整个场景的所有要素包揽进去。轻松管理你的3D资源。

  •  成熟生态，海量资源

来自全世界的优秀创作者，在不同社区中分享作品。配合xr-frame的渲染能力，简直是随取随用。

1.GLTF模型需要先通过Loader加载进小程序中，才可以渲染。

<xr-asset-load type="gltf" asset-id="gltfModel" src="/assets/xxx.gltf" />

2.GLTF组件

GLTF组件可以渲染一个已经加载完成的GLTFModel资源。

使用xr-gltf标签可以为标签自动创建GLTF组件：

<xr-gltf id="myGLTF" model="gltfModel"></xr-gltf>

 3.标签属性

属性名组件.属性备注
modelGLTF.model使用的GLTFModel资源，对应xr-asset-load标签中的asset-id属性
cast-shadowGLTF.castShadowGLTF模型是否投射阴影
receive-shadowGLTF.receiveShadowGLTF模型是否接受阴影

 4.事件：

事件名描述事件回调参数备注
gltf-loadedGLTF组件将GLTFModel渲染完毕后触发。{ target: Element }-

5.修改 ：

GLTF组件提供了一系列接口来让用户操作xr-frame为GLTF模型生成的内部子树，开发者也可以用这些接口来动态修改glTF模型的颜色、纹理等材质属性。

接口名描述备注
getInternalNodeByName根据GLTFNode节点的name字段来获取xr-frame对应的Element
get meshes获取生成的所有Mesh组件
getPrimitivesByNodeName根据GLTFNode节点的name字段来获取其下的所有Mesh组件2.28.1版本加入；详见API文档
getPrimitivesByMeshName根据GLTFMesh节点的name字段来获取所有相关的Mesh组件2.28.1版本加入；详见API文档

用法：修改GLTF贴图

// gltf信息
{
    ...
    "nodes": [{
      "mesh": 0,
      "name": "Banana"
    }],
    ...
}
<xr-gltf id="myGLTF" model="gltfModel" bind:gltf-loaded="handleGLTFLoaded"></xr-gltf>
function handleGLTFLoaded({ detail }) {
    const el = detail.value.target;
    //获取名字为nana的mesh
    const gltf = el.getComponent("gltf");
    const newMat = this.scene.assets.getAsset("texture", "...texture name...");
    for (const mesh of gltf.getPrimitivesByNodeName("Banana")) {
         //更改材质
        mesh.material.setTexture("u_baseColorMap", newMat);
    }
}

6.动画

如果GLTF模型有自带的动画，就会在当前元素下自动创建一个Animator组件，并将GLTF模型内的动画片段加入到这个Animator组件中。 

如果GLTF组件所在的元素本来已经拥有Animator组件，就不会新建，而是直接使用这个Animator组件。 在标签上添加anim-autoplay属性可以自动播放GLTF模型内的动画，会播放GLTF内的所有动画片段：

  •  自身就有动画直接加 anim-autoplay

<xr-gltf id="myGLTF" model="gltfModel" anim-autoplay></xr-gltf>
  • 使用animator实现动画

1） 设置动画json

{
  "keyframe": {
    "parent": {
      "0": {
        "rotation": [0, 0, 0]
      },
      "100": {
        "rotation": [0, 6.28, 0]
      }
    },
    "child": {
      "0": {
        "position.y": -0.5
      },
      "100": {
        "position.y": 1.5
      }
    }
  },
  "animation": {
    "parent": {
      "keyframe": "parent",
      "duration": 8,
      "ease": "linear",
      "loop": -1
    },
    "child": {
      "keyframe": "child",
      "duration": 4,
      "ease": "ease-in-out",
      "direction": "both",
      "loop": -1
    }
  }
}

2)加载动画资源

 <xr-asset-load asset-id="anim" type="keyframe" src="/assets/animation/miku-kawaii-animation.json"/>

3)绑定动画

  <xr-node anim-keyframe="anim" anim-autoplay="clip:parent">

4）控制动画

如果你只想播放GLTF模型里的某一个动画片段，或者想切换播放的动画片段，可以使用TS脚本来控制。

例如以下代码在GLTF模型渲染完毕后播放名为idle的动画：

// xml
<xr-gltf id="myGLTF" model="gltfModel" bind:gltf-loaded="handleGLTFLoaded"></xr-gltf>

// ts
function handleGLTFLoaded({ detail }) {
    const el = detail.value.target;
    const animator = el.getComponent("animator");
    animator.play("idle");
}

动画的名字idle，对应的是.gltf文件中animations数组节点的每一个元素的name属性（参考官方文档）。

7.Morph Target：（demo详见下篇文章）

1.什么是Morph Target？详见：静态网格体变形目标 | 虚幻引擎文档 (unrealengine.com)

xr-frame支持Morph Target动画，但是对target的数量有限制，同一个模型最多使用8个target。

这里的target概念有别于.gltf文件内的target节点：.gltf文件内的一个同时拥有POSITION和NORMAL属性的target节点，在xr-frame中算作2个target（不影响渲染效果）。

8.注意事项（gltf模型限制）

GLTF模型需要满足以下条件才能正常渲染：

  • 纹理使用的顶点UV不超过2个；
  • 使用的顶点JOINTS不超过1个；
  • 使用的顶点WEIGHTS不超过1个；
  • 不使用sparse accessor；
  • accessor的normalized属性不为true；
  • morph targets数量小于等于8个；
  • morph的属性为POSITION,NORMAL或TANGENT；
  • 图元类型不为LINE_LOOP或TRIANGLE_FAN;

经测试，只有少数模型会超出限制，大多数模型都可以正常渲染。并且随着项目迭代，未来将会解除或者放宽一些条件。

9.典型案例（多动画显示demo来源于微信开放文档）

1）wxml部分

<xr-scene id="xr-scene" bind:ready="handleReady">
  <xr-assets bind:progress="handleAssetsProgress" bind:loaded="handleAssetsLoaded">
    <xr-asset-load asset-id="anim" type="keyframe" src="/assets/animation/miku-kawaii-animation.json"/>
    <xr-asset-load type="gltf" asset-id="cloud-station" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/cloud-station/index.glb" />
    <xr-asset-load type="gltf" asset-id="miku-kawaii" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/shiteyanyo-hatsune-miku/index.glb" />
    <xr-asset-load type="gltf" asset-id="miku" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/miku.glb" />
  </xr-assets>
  <xr-node>
    <xr-node node-id="target" position="0 1 0" />
    <xr-gltf position="0 0 0" scale="1 1 1" model="cloud-station" anim-autoplay></xr-gltf>
    <xr-gltf position="1.8 -0.5 1.5" scale="0.12 0.12 0.12" rotation="0 180 0" model="miku" anim-autoplay></xr-gltf>
    <xr-node anim-keyframe="anim" anim-autoplay="clip:parent">
      <xr-node position="0 -0.5 3" rotation="0 90 0" anim-keyframe="anim" anim-autoplay="clip:child">
        <xr-gltf model="miku-kawaii" anim-keyframe="anim" anim-autoplay></xr-gltf>
      </xr-node>
    </xr-node>
    <xr-camera
      id="camera" node-id="camera" position="0 1 7" clear-color="0.925 0.925 0.925 1"
      target="target" background="default" 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 180 0" color="1 1 1" intensity="2" />
  </xr-node>
</xr-scene>

2）json动画部分

{
  "keyframe": {
    "parent": {
      "0": {
        "rotation": [0, 0, 0]
      },
      "100": {
        "rotation": [0, 6.28, 0]
      }
    },
    "child": {
      "0": {
        "position.y": -0.5
      },
      "100": {
        "position.y": 1.5
      }
    }
  },
  "animation": {
    "parent": {
      "keyframe": "parent",
      "duration": 8,
      "ease": "linear",
      "loop": -1
    },
    "child": {
      "keyframe": "child",
      "duration": 4,
      "ease": "ease-in-out",
      "direction": "both",
      "loop": -1
    }
  }
}

3）js部分

Component({
  properties: {
    a: Number,
  },
  data: {
    loaded: false
  },
  lifetimes: {
    attached() {
      console.log('data.a', this.data.a) // expected 123
    }
  },
  methods: {
    handleReady: function({detail}) {
      this.scene = detail.value;
      console.log('scene', detail.value);
    },
    handleAssetsProgress: function({detail}) {
      console.log('assets progress', detail.value);
    },
    handleAssetsLoaded: function({detail}) {
      console.log('assets loaded', detail.value);
      this.setData({loaded: true});
    },
    handleRaf: function({detail}) {
      console.log('raf', detail.value);
    }
  }
})

4）效果展示

xr-frame gltf动画

牧羊人_sj
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信AR实现识别手部展示glb模型（带demo）
oneya1的博客
01-22 787
因为AR识别手部一直在识别，所以会出现闪动问题。可以将微信开发者调试基础库设置到3.3.2以上，可能要稳定一些。5.创建父组件scene-ar-germanBusiness，引入手势识别子组件。4.代码展示，在组件里先创建xr-ar-german组件。2.微信小程序手势识别只支持以下几个动作，和识别点位，3.3.代码展示，我用的是微信官方文档案例。
原生微信小程AR序实现模型动画播放只播放一次，且停留在最后一秒
oneya1的博客
01-19 715
2.微信小程序AR是2023年初发布，还有很多问提（比如glb模型不能直接播放最后一帧；index.json代码 子组件地址根据自己的路径来 xr-demo-viewer组件在官方文档demo里面有。5.在page创建父组件scene-ar-germanBusiness。先创建组件xr-ar-cameraglb。3.代码展示，我用的是微信官方文档案例。index.wxml文件代码。index.wxml代码。index.json代码。index.js代码。index.js代码。
uniApp使用XR-Frame创建3D场景(6)播放模型动画
最新发布
3D模型素材库
03-28 858
如果这个gltf模型本身包含动画，只需要在<xr-gltf>标签中加入anim-autoplay属性。模型中的动画就可以自动播放了。，这个小程序中的模型都是针对小程序优化后的glb格式文件，体积小，加载快，非常适合小程序使用。通过这个标签，我们将加载完的模型资源添加到场景中。通过这个标签我们可以加载模型资源.讲述了如何将XR-Frame作为。这里给大家推荐一个微信小程序。集成到uniApp中使用。这篇我们讲解播放模型动画。
微信小程序加载fbx模型
03-08
这个压缩包里面包含three.js在微信小程序端加载3D动画fbx模型的代码。 得到了fbx模型的http链接，使其加载在小程序端，都是适配小程序版本的代码 其中three_new.js是小程序版的3D加载库文件 FBXLoader_new是小程序版本的fbx模型的加载器 inflate.min.js是小程序版的压缩解压库 model.js里面的export函数可以直接调用，把fbx模型的http链接还有相关的dom节点传进去就可以加载啦~不懂得可以留言哦，里面的路径各位大佬可以看着改一下~如有更好的意见请留言告诉我哦~~~
gltf-pipeline:用于优化glTF资产的内容管道工具
04-28
glTF管道 由和用来优化资产的内容流水线工具。 支持常见的操作，包括： 将glTF转换为glb（并反向） 将缓冲区/纹理保存为嵌入式文件或单独的文件 将glTF 1.0模型转换为glTF 2.0（使用和扩展） 应用网格压缩 gltf-pipeline可以用作命令行工具或Node.js模块。 入门 如果尚未安装 ，请安装它，然后： npm install -g gltf-pipeline 使用gltf-pipeline作为命令行工具： 将glTF转换为glb gltf-pipeline -i model.gltf -o model.glb gltf-pipeline -i model.gltf -b 将glb转换为glTF gltf-pipeline -i model.glb -o model.gltf gltf-pipeline -i model.glb -j
【uni-app】只支持在微信小程序运行的 导入外部3d模型
09-29
博客描述：https://blog.csdn.net/qq_40558766/article/details/127109617?spm=1001.2014.3001.5502
XR-FRAME 开始
江拥羡橙的博客
07-03 3880
是一套小程序官方提供的XR/3D应用解决方案，基于混合方案实现，性能逼近原生、效果好、易用、强扩展、渐进式、遵循小程序开发标准。在这一章中，我们将会带大家从头开始，用它构建一个XR小程序。
微信小程序xr-frame图层与显示(五种方法)
微风的博客
05-19 1888
visible:作用就是控制绑定该材质的模型对象是否可见，默认值是true，LineBasicMaterial、SpriteMaterial、MeshBasicMaterial等材质都会继承基类Material的可见性；2).此属性可以在xr-node、xr-mesh、xr-light上使用，light隐藏效果为不发光。1).visible=false时node内的子节点也会被隐藏，即使其visible=true。前言：控制小程序隐藏与显示有五种方法，感兴趣的可以参考这个。但是本文只赘述两种方法。
【uniapp】如何在uniapp中使用xr-frame及xr-frame加载并使用gltf模型
qq_39377906的博客
11-01 1281
如何在uniapp中使用微信的xr-frame，以及如何在xr-frame中导入gltf文件并进行一些具体的操作。
小程序xr-frame AR与云识别的使用
wujianar的博客
11-12 479
微信小程序xr-frame已有识别图片功能，如果你的识别图片只有几张，做成本地识别非常方便。云识别的好处是是将识别数据存放在云服务器上，不需要做代码上的改到，没有本地储存限制，识别图和关联资源均储存的云端，在云端运行识别算法，识别成功后在本地使用xr-frame的算法实现跟踪的AR效果，非常适合AR相册，AR故事等需要大量识别图的场合。这里云识别使用无间科技的云识别，官方网址 http://www.wujianar.com，可以申请免费的测试库使用。
初识xr-frame识别追踪渲染3D模型
wujianar的博客
04-22 1185
初识xr-frame识别追踪渲染3D模型，微信的3D引擎xr-frame发布已经有一段时间了。 我这段时间有空，正好研究下，小程序中可以直接使用，不用另外引入引擎包，相比threejs等第三方包，可以减少不小包体积。xr-frame内置AR系统支持，AR追踪器ARTracker是AR系统的一部分，提供了一种非常简单的方式，在特定的识别模式下识别出图像或者物体，对其进行跟随。文档上没有找到使用多识别图片使用方法，所有使用云识别功能，云识别使用的无间科技的技术。
小程序使用的threejs144版本，可导入GLTF模型文件
08-10
小程序基于此可使用144版本three.js， 源文件在src下，混淆后的文件在dist文件夹下。 使用请参考 https://github.com/yannliao/threejs-example-for-miniprogram import * as THREE from '../../utils/threejs/js/...
three-platformize-demo-wechat:三平台微信小程序演示
04-05
三平台微信小程序DEMO运行请使用最新版本的微信开发工具打开，切换到自己的测试appId即可运行，打开调试模式如果需要修改代码，可按照已下步骤整合// 安装依赖> npm i// 运行构建> npm run dev// 小程序打开即可内存...
苏-27 GLTF 3D模型
03-23
苏-27 GLTF 3D模型 GLTF cesium
【微信小程序】Three.js 加载3d模型
热门推荐
牛哞哞杂记
04-11 2万+
微信小程序实现从外部加载3d模型 1.3d模型的几种格式？ 2.怎样加载3d模型？ 1.模型的格式 小程序支持从外部加载3d模型的几种格式有： a.obj格式 b.gltf格式 c.glb格式 d.fbx格式 就列举这几种 2.加载3d模型 用 gltf 格式的模型 （1）首先下载 three.js github地址 下载的文件目录里 threejs-miniprogram-master\exa...
微信小程序 通过img标签加载GIF只能播放一次问题
u013611033的博客
06-05 6127
<image :src="'../static/img/blink.gif?'+Math.random()" mode="aspectFit" class="blink" v-if="showLikeGif" @click.stop /> 加载本地gif时，就算image重新渲染了，gif也会保持在终点的状态，不会重新播放 需要效果，动态切换gif,并且每次显示都是从第一帧开始播放, 目前可以用一个随机数解决 ...
微信小程序动画执行一次问题
我是李南。我为自己代言
09-27 1979
微信小程序动画执行一次解决方法 简单总结一下微信动画的实现及执行步骤（更新data使用的方式和vue一样直接this.data=""）。 const anim = wx.createAnimation({}); anim.rotate(180).step(); this.eyeAnim = anim.export(); 起因：由于小程序动画执行是使用和第一次初始状态做diff。而不是执行每一次...
WebXR 技术调研 - 在浏览器中构建扩展现实（XR）应用
字节跳动视频云
08-11 6158
利用 WebXR Device API 可以在 Web 环境访问到 XR 设备，它主要分为 3 种模式inline、和，inline模式还是渲染在浏览器页面中，而则是访问 VR 设备，将画面渲染到 VR 设备中，整体渲染过程与普通 WebGL 程序差不多，只不过画面要渲染到 XRWebGLLayer 的 framebuffer 中，并且区分左右眼。...
微信小程序xr-frame实现交互(地月案例)
微风的博客
05-18 1641
如果想要与场景中的物体进行互动，比如说点击、拖拽物体，那么这个物体得先拥有一个。与某个物体互动，实际上是在与这个物体的轮廓进行互动，轮廓让这个物体在。创建轮廓非常简单，只要为xml标签添加上xxx-shape的属性即可。整体代码以及效果：（来源于微信开放文档demo）场景标签都可以创建轮廓。
uniapp微信小程序使用three.js导入gltf模型包
07-09
在uniapp微信小程序中使用three.js导入gltf模型包，你可以按照以下步骤进行操作： 1. 将gltf模型文件放置在uniapp项目的静态资源目录中，比如`static/models`。 2. 在uniapp页面或组件的js文件中引入three.js库和GLTFLoader。 ```javascript import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; ``` 3. 创建一个canvas元素作为渲染器的渲染目标。 ```html <template> <canvas id="canvas"></canvas> </template> ``` 4. 在mounted钩子函数中编写加载和渲染模型的代码。 ```javascript mounted() { const canvas = document.getElementById('canvas'); const renderer = new THREE.WebGLRenderer({ canvas }); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000); camera.position.z = 5; const loader = new GLTFLoader(); loader.load('../../static/models/model.gltf', (gltf) => { const model = gltf.scene; scene.add(model); // 设置模型的初始位置、旋转等属性 model.position.set(0, 0, 0); model.rotation.set(0, 0, 0); model.scale.set(1, 1, 1); }); function animate() { requestAnimationFrame(animate); // 更新模型、相机等状态 renderer.render(scene, camera); } animate(); } ``` 请确保将`../../static/models/model.gltf`替换为你实际的模型文件路径。 这样，当页面或组件加载后，就会渲染gltf模型在canvas上。 希望对你有所帮助！如有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值