uniApp中使用小程序XR-Frame创建3D场景（1）环境搭建

最新推荐文章于 2025-03-05 00:30:00 发布

Ltanke

最新推荐文章于 2025-03-05 00:30:00 发布

阅读量3.8k

点赞数 25

文章标签： uni-app 小程序 xr

本文链接：https://blog.csdn.net/weixin_39318421/article/details/136909787

版权

本文介绍了微信小程序官方的3D框架XR-Frame，对比了其与Three.js的性能和适用性，详细讲解了在uniApp中创建和配置XR-Frame组件的过程，包括组件结构、文件配置和使用方法，预示了后续将探讨模型加载和优化内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.XR-Frame简介

XR-Frame作为微信小程序官方推出的3D框架，是目前所有小程序平台中3D效果最好的一个，由于其本身针对微信小程序做了优化，在性能方面比其他第三方库都要高很多。

2.与Three.js的区别

做3D小程序的同学们对Three.js一定不陌生，这是个跨平台的3D前端框架，使用广泛，但是针对微信小程序的优化并不理想，而且库文件本身比较大，由于小程序的内存限制，一旦加载的3D文件过多，非常容易造成卡顿。

既然微信小程序端推出了XR-Frame，我们就应该积极的去熟悉这个框架，做出更好用的小程序。

3.在uniApp中创建XR-Frame组件

（1）新建wxcomponents文件夹

上图是我的项目目录，首先在与pages同级目录下，创建wxcomponents文件夹，这个文件夹就是要调用的xr-frame组件目录。

（2）在 wxcomponents 文件夹下创建 xr-start 目录

这个目录是我们要在其他页面调用xr-frame时需要使用的组件名称，这里我们先创建好。

（3）在 xr-start 目录下创建 index.js index.json index.wxml 三个文件

这三个文件分

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Ltanke

关注关注

25
点赞
踩
24

收藏

觉得还不错? 一键收藏
6
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uniApp使用XR-Frame创建3D场景(6)播放模型动画

3D模型素材库

03-28

1400

如果这个gltf模型本身包含动画，只需要在<xr-gltf>标签中加入anim-autoplay属性。模型中的动画就可以自动播放了。，这个小程序中的模型都是针对小程序优化后的glb格式文件，体积小，加载快，非常适合小程序使用。通过这个标签，我们将加载完的模型资源添加到场景中。通过这个标签我们可以加载模型资源.讲述了如何将XR-Frame作为。这里给大家推荐一个微信小程序。集成到uniApp中使用。这篇我们讲解播放模型动画。

uniApp中使用小程序XR-Frame创建3D场景（2）加载模型

3D模型素材库

03-26

2519

讲述了如何将XR-Frame作为子组件集成到uniApp中使用，只完成了简单的环境搭建，这篇文章讲解如何加载3D模型。

6 条评论您还未登录，请先登录后发表或查看评论

猝不及防，小程序推出XR-frame引擎，实现3D渲染，前端们学起来吧

最新发布

2401_82616673的博客

03-05

1642

XR-Frame为小程序开发者打开了轻量级XR应用的大门，特别适合快速落地营销、教育、展示类场景。尽管在复杂项目上可能需结合原生开发，但其便捷性和生态整合能力使其成为微信生态内XR开发的首选工具。随着迭代更新，未来或将进一步扩展跨平台能力和渲染效果上限。本人是 10年经验的前端开发和UI设计资深“双料”老司机，1500+项目交付经历，带您了解最新的观点、技术、干货，下方微信可以和我进一步沟通。

【uniapp】如何在uniapp中使用xr-frame及xr-frame加载并使用gltf模型

qq_39377906的博客

11-01

2506

如何在uniapp中使用微信的xr-frame，以及如何在xr-frame中导入gltf文件并进行一些具体的操作。

uniapp微信小程序3D XR-FRAME

CHENC0518的博客

09-02

1044

3.pege文件同级依次建立文件wxcomponenrs/xr-start/(index.js、index/json、index/wxml)1.在pages.json中配置展示页面（style中添加下面：）6. index.wxml(页面3d渲染内容，详情参考文档）2.manifest.json中配置mp-weixin。

uniApp使用XR-Frame创建3D场景(3)光源投影的运用。

3D模型素材库

03-28

1431

这里我们只添加了两个集合体，一个 geometry为cube，表示这是一个正方体的盒子模型，另一个 geometry为plane,表示这个几何体是一个平面。，表示一个节点，这个可有可无，因为可以通过设置这个节点的隐藏属性直接控制子节点的显示与隐藏，所以常用于控制其下一组节点的动态显示或者同意的形变。，这个小程序中的模型都是针对小程序优化后的glb格式文件，体积小，加载快，非常适合小程序使用。属性，这个属性值是场景中几何体的id，在这里表示要对准正反体。，表示要在场景中添加的几何体，文件中我们加入如下代码。

uniApp使用XR-Frame创建3D场景(4)金属度和粗糙度

3D模型素材库

03-28

915

这个属性有两个值，前面的值代表材质的金属度，后面的值代表材质的粗糙度。，这个小程序中的模型都是针对小程序优化后的glb格式文件，体积小，加载快，非常适合小程序使用。可以看到模拟器中的两个球体，设置不同的金属度和粗糙度后，其表面的光泽效果是不同的。这一篇我们讲解xr-frame中关于mesh网格材质的金属度和粗糙度的设置。讲解了如何在uniApp中创建xr-frame子组件并创建简单的3D场景。表示场景中的相机，创建相机标签后才能渲染出场景中的模型。表示场景的根元素，每个页面有且只有这一个标签。

uniApp使用XR-Frame创建3D场景(7)加入点击交互

3D模型素材库

03-28

1523

中，加入mesh-shape属性。代码中通过获取点击模型的id识别出点击的是哪个物体，然后便可以根据自己业务的需求进一步完善代码。，这个小程序中的模型都是针对小程序优化后的glb格式文件，体积小，加载快，非常适合小程序使用。当在页面中点击了这个mesh，就会触发handleTouchModel这个回调函数。我们在index.js文件中编写handleTouchModel的代码。这篇我们讲解如何与场景中的模型交互（点击识别）要实现点击物体的交互，关键就是在。这里与前几章的代码没有太大区别。

uniApp使用XR-Frame创建3D场景(8)粒子系统

3D模型素材库

03-28

1088

这个小程序中的模型都是针对小程序优化后的glb格式文件，体积小，加载快，非常适合小程序使用。emit-rate：每秒钟允许生成的最多粒子数量。本片我们详细讲解一下xr-frame的粒子系统。emitter-type：粒子发射器的类型。capacity：粒子同时出现的最大数量。texture：粒子采用的纹理贴图。讲述了如何将XR-Frame作为。size：粒子的最小值和最大值。这里给大家推荐一个微信小程序。集成到uniApp中使用。下面是一些常用的属性。

uniapp引入微信小程序XR-Frame

Pursuitdreams的博客

11-14

919

做3D小程序的同学们对Three.js一定不陌生，这是个跨平台的3D前端框架，使用广泛，但是针对微信小程序的优化并不理想，而且库文件本身比较大，由于小程序的内存限制，一旦加载的3D文件过多，非常容易造成卡顿。XR-Frame作为微信小程序官方推出的3D框架，是目前所有小程序平台中3D效果最好的一个，由于其本身针对微信小程序做了优化，在性能方面比其他第三方库都要高很多。上图是我的项目目录，首先在与pages同级目录下，创建wxcomponents文件夹，这个文件夹就是要调用的xr-frame组件目录。

基于xr-frame实现微信小程序的人脸识别3D模型叠加AR功能源码

08-28

该功能基本是使用官方的微信小程序xr-frame系统的示例集中的“人脸识别案例”(/pages/ar/scene-ar-face-3d)修改而来，组件使用了components/xr-ar-face-3d，只不过修改了识别的展示，将云上的模型资源用本地的素材...

frame 小程序例子

03-26

左边放了一个treeview，点击左边的treeview右边弹出一个新页面，然后传递view的值到右边的页面，并显示出来。

【uni-app】只支持在微信小程序运行的导入外部3d模型

09-29

博客描述：https://blog.csdn.net/qq_40558766/article/details/127109617?spm=1001.2014.3001.5502

使用XR-frame框架，实现简单AR

qq_46056472的博客

07-13

2516

注意这里我们开启的ar-system的模式为Plane，即平面识别，这种模式下相机不能被用户控制，需要将控制器、target等都删掉，同时ar-tracker的mode要和ar-system的完全一致。在index.wxml中，我们创建了一个场景xr-scene，并在其下添加了一个相机xr-camera。首先在场景中加载gltf模型，然后使用ar-system和ar-tracker,并修改一下xr-camera的i相关属性is-ar-camera和background=“ar”添加物体、颜色和灯光。

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

3D模型素材库

03-28

1341

这个小程序中的模型都是针对小程序优化后的glb格式文件，体积小，加载快，非常适合小程序使用。表示这个资源的id，这个id在后面要赋值给后面的模型u_baseColorMap属性。表示要将创建的一个模型，接下来要给这个模型加入贴图纹理。讲解了如何在uniApp中创建xr-frame子组件并创建简单的3D场景。这篇我们讲解在xr-frame中如何给几何体赋予贴图材质。属性中，设置u_baseColorMap: waifu。表示这个标签下是要加载的资源。,表示要加载的是一个纹理图片。，表示这是一个资源加载器，

XR-FRAME 开始

江拥羡橙的博客

07-03

5130

是一套小程序官方提供的XR/3D应用解决方案，基于混合方案实现，性能逼近原生、效果好、易用、强扩展、渐进式、遵循小程序开发标准。在这一章中，我们将会带大家从头开始，用它构建一个XR小程序。

微信小程序xr-frame实现人脸识别(戴面具效果)

微风的博客

05-17

1246

资源加载器模型、材质、纹理、都可在这里加载,type表示加载类型:gltf,texture等。ar-system 表示ar系统，camera表示相机(默认为后置。model：模型名字 material：材质。(注明：来源于微信开发平台)modes 表示模式,目前支持平面识别。2. 加载用到的资源，本文用到的是一个。，然后在其子级添加了一个glTF模型。1. 场景设置为ar 模式为hand。用到的时候只需要用到的标签加上。(注明：来源于微信公众平台)(来源于:微信开发平台)、2DMarker识别。

【xr-frame】微信小程序xr-frame典型案例

SpringWaterLikeMe

08-18

2998

在之前的工作中，我大量使用XR-Frame框架进行AR开发，并积累了一些案例和业务代码。其中包括2D图像识别、手部动作识别、Gltf模型加载、动态模型加载、模型动画等内容。小程序部分使用TypeScript编写，而XR-Frame组件部分则使用JavaScript编写。如果您正在学习XR-Frame，这些案例可能对您有参考价值。有些写的不对的地方欢迎批评指正。

初识xr-frame识别追踪渲染3D模型

wujianar的博客

04-22

1822

初识xr-frame识别追踪渲染3D模型，微信的3D引擎xr-frame发布已经有一段时间了。我这段时间有空，正好研究下，小程序中可以直接使用，不用另外引入引擎包，相比threejs等第三方包，可以减少不小包体积。xr-frame内置AR系统支持，AR追踪器ARTracker是AR系统的一部分，提供了一种非常简单的方式，在特定的识别模式下识别出图像或者物体，对其进行跟随。文档上没有找到使用多识别图片使用方法，所有使用云识别功能，云识别使用的无间科技的技术。