# xr-frame-demo 微信小程序`xr-frame`系统的示例集。 ## 准备工作 目前需要下载最新的[Nightly版本工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/nightly.html)，最新的客户端（安卓8.0.29，iOS8.0.29），以及基础库（2.27.1）。 ## 直接体验 二维码以及部分样例的扫描图片详见：[官方文档-示例](https://developers.weixin.qq.com/miniprogram/dev/component/xr-frame/overview/index#示例)。 https://user-images.githubusercontent.com/7337763/199401152-d3e14ca2-bcde-41aa-902c-dc0fbd6b6358.mp4 ## 快速索引 #### [常见问题QA](/qa/README.md) #### [基础库版本分布](https://developers.weixin.qq.com/miniprogram/dev/framework/client-lib/version.html) ### 基础能力 [基础案例](/miniprogram/components/xr-basic/) PBR材质下渲染的内置图形。 [透明画布](/miniprogram/components/xr-basic-alpha/) 使用透明画布能力，透出背景。 [灯光案例](/miniprogram/components/xr-basic-light/) 多种灯光作用下的四个白色图形。 [动画案例](/miniprogram/components/xr-basic-animation/) `keyframe` 动画案例。 [视频案例](/miniprogram/components/xr-basic-video/) 视频纹理，正式版本预计基础库 v2.32.0 及以上支持。 [交互案例](/miniprogram/components/xr-basic-touch/) 简单的拖拽图形旋转移动案例。 [显示与图层案例](/miniprogram/components/xr-basic-visible-layer/) 控制节点树的显示案例。 [动态节点案例](/miniprogram/components/xr-basic-shadow/) 通过 `xr-shadow` 节点，来动态在其下添加节点，以及用代码加载资源。 [渲染目标案例](/miniprogram/components/xr-basic-render-texture/) 使用 `xr-asset-render-texture` 生成渲染目标。 [粒子系统](/miniprogram/components/xr-basic-particle/) 使用`xr-particle`，控制粒子系统的显示。 [后处理系统](/miniprogram/components/xr-basic-postprocessing/) 展示了内置的几种后处理效果。 [全局环境数据与局部环境数据](/miniprogram/components/xr-basic-envData/) 动态更改 `xr-mesh` 局部环境数据的案例。 ### AR 能力 [相机渲染案例](/miniprogram/components/xr-ar-camera/) AR相机与glTF一同渲染的基础案例。 [平面识别案例](/miniprogram/components/xr-ar-basic/) 基础的平面识别案例。 [平面识别叠加Marker案例](/miniprogram/components/xr-vio-marker/) 平面识别叠加Marker案例 [相机旋转案例](/miniprogram/components/xr-ar-threeDof/) threeDof，用于在不需要SLAM的场景，支持手持相机旋转，兼容性较好。 [2DMarker案例](/miniprogram/components/xr-ar-2dmarker/) 2DMarker识别案例。 [OSDMarker案例](/miniprogram/components/xr-ar-osdmarker/) OSDMarker识别案例。 [人脸案例](/miniprogram/components/xr-ar-face/) 人脸识别案例。 [人手案例](/miniprogram/components/xr-ar-hand/) 人手识别案例。 [人体案例](/miniprogram/components/xr-ar-body/) 人体识别案例。 ### 物理 能力 [射击积木案例](/miniprogram/components/xr-physics-shoot/) 射击积木案例 [投球入筐案例](/miniprogram/components/xr-physics-throw/) 投球入筐案例 ### glTF 能力 [金属头盔案例](/miniprogram/components/xr-gltf-damageHelmet/) 包含完整MetalRougnessMap、EmissiveMap、NormalMap、OcclusionTexture 以及各类因子的 glTF 模型案例。 [动画案例](/miniprogram/components/xr-gltf-animation/) 包含 glTF 动画，以及 keyframe 动画协作的案例 [加载与多光源案例](/miniprogram/components/xr-gltf-light-loading/) 组件和页面通信实现资源加载时覆盖加载界面，以及多个动画光源案例。 [morph案例](/miniprogram/components/xr-gltf-morph/) morph targets的使用。 [无光照案例](/miniprogram/components/xr-gltf-unlit/) 应用 KHR_materials_unlit 扩展的 glTF 案例。 [扩展 - 压缩纹理](/miniprogram/components/xr-gltf-compressTextures/) [扩展 - KHR_texture_transform 贴图矩阵变换案例](/miniprogram/components/xr-gltf-textureTransform/) 应用 KHR_texture_transform 扩展的 glTF 案例，glTF 贴图矩阵变换支持（需基础库2.31.0）。 [扩展 - KHR_materials_pbrSpecularGlossiness 高光光泽度案例](/miniprogram/components/xr-gltf-specularGlossiness/) [扩展 - KHR_materials_sheen 布料与织物材质的模拟案例](/miniprogram/components/xr-gltf-sheen/) glTF Sheen 扩展，主要用于布料与织物材质的模拟。基础库 2.32.1 支持。 [扩展 - KHR_lights_punctual](/miniprogram/components/xr-gltf-lightsPunctual/) ### 高级定制 [定制组件和元素](/miniprogram/components/xr-custom-logic/) 定制组件和元素并使用。 [定制渲染资源](/miniprogram/components/xr-custom-render/) 定制Effect和Geometry并使用。 ### 通用功能模版 [ 小程序混合通信](/miniprogram/components/template/xr-template-message/) 通过小程序按钮事件，传递速度变量到 xr-frame 组件通信的案例。 [Controller 第一人称漫游](/miniprogram/components/template/xr-template-control/) 第一人称相机控制器。 [Loading 动态资源加载与使用](/miniprogram/components/template/xr-template-loading/) 点击按钮进行对应资源的加载与使用。 [Tracker 动态多Tracker切换](/miniprogram/components/template/xr-template-tracker/) 点击按钮，对应不同识别效果 Marker 的添加与删除。 [AR 模型摆放与手势控制](/miniprogram/components/template/xr-template-arPreview/) 点击屏幕摆放，然后单指拖动屏幕进行旋转，双指拖动进行放大缩小。 [AR 面向屏幕的面片与模型](/miniprogram/components/template/xr-template-lookat/) 通过脚本控制的，四个方向各有一个面向屏幕的物体。 [AR 平面模式下的 UI 面板](/miniprogram/components/template/xr-template-arui/) AR环境下，简单的UI面板 [Effect 模型切换为Toon渲染(自定义多pass)](/miniprogram/components/template/xr-template-toon/) [Geometry 定制每帧变化的Geometry](/miniprogram/components/template/xr-template-geometry/) [glTF 模型更换贴图](/miniprogram/components/template/xr-template-gltfEdit/) 加载 glTF 模型，调整 glTF 的材质的贴图 [glTF 模型动画（脚本、骨骼）](/miniprogram/components/template/xr-template-gltfAnimation/) [glTF 模型更改渲染状态，glTF设为遮挡模型](/miniprogram/components/template/xr-template-gltfOcclusion/) 使用模型做遮挡剔除，让该模型剔除其他物体 [glTF 添加模型内UV动画](/miniprogram/components/template/xr-template-gltfUVAnimation/) [Touch 点选物体与动画控制](/miniprogram/components/template/xr-template-select/) [序列帧动画（雪碧图、GIF）](/miniprogram/components/template/xr-template-frameEffect/) 使用自定义材质实现的序列帧动画案例。 [截屏与分享](/miniprogram/components/template/xr-template-share/) 通过分享系统截屏分享 [过滤黑色背景视频](/miniprogram/components/template/xr-template-removeBlack/) 通过自定义材质，过滤掉视频黑色部分的案例。 ### AR典型案例 [扫描图片模型透视案例](/miniprogram/components/xr-classic-perspect/) 基于 Stencil裁剪 实现的基本模型透视效果案例。 [传送门效果案例](/miniprogram/components/xr-classic-portal/) 基于平面识别与模版剔除实现的基本传送门效果案例。 [平面视频案例](/miniprogram/components/xr-classic-video/) 基于 2DMarker 实现，扫描工卡照片显示对应的生活场景。 [扫描物体查看信息](/miniprogram/components/xr-classic-osd/) 基于 OSD 实现的扫描 广州塔 或 虎年公仔，识别成功后会在物体右上角加上信息提示。 [扫描人脸穿戴](/miniprogram/components/xr-classic-face/) 基于 人脸识别 的穿戴。 [微信球案例](/miniprogram/components/xr-classic-wxball/) 扫描手握着的微信纪念球，会显示三维纪念球，点击三维纪念球会播放动画。 ### 扫描还原案例 [扫描渲染案例](/miniprogram/components/xr-scan-render/) 根据三维重建模型与扫描全景图还原的案例，仅使用IBL作为光源，可切换天空盒。 [卡 其 脱 离 太](/miniprogram/components/xr-scan-render/) xr-frame团队的办公区和成员三维重建，以及与小程序音频系统、2dview协作的例子。 ### 产品级案例 [边缘迷走](/miniprogram/pages/scene-beside-edge/) AR文字互动游戏。 [■■■■](/miniprogram/pages/scene-last-record/) ■■■■■■■■■■■■■■■■ ## 版权 实例中用到的所有资源： https://sketchfab.com/3d-models/borboleta-azul-butterfly-ab9192b6bc8f49e3baed63e984c7073a https://sketchfab.com/3d-models/just-a-girl-b2359160a4f54e76b5ae427a55d9594d https://sketchfab.com/3d-models/metal-table-60f8c279c7b64fce8241220178e543ec https://sketchfab.com/3d-models/fiesta-tea-8bde490c80444157b4545471d067423c https://sketchfab.com/3d-models/ship-in-clouds-c475323dc7f24e26ba2009c08c8e1941 https://sketchfab.com/3d-models/cloud-station-26f81b24d83441ba88c7e80a52adbaaf https://sketchfab.com/3d-models/shiteyanyo-hatsune-miku-0f4029ba805c4751933bba24dc72dd24 https://sketchfab.com/3d-models/miku-8b8028fa527549629b620752517812ac https://sketchfab.com/3d-models/pokemon-frlg-loreleis-arena-ce7397e95ec9458b8df3c1453e4d0b82 https://sketchfab.com/3d-models/10th-attract-genderless-attraction-fc5548bb511e45748c393184ecbad26b https://sketchfab.com/3d-models/camera-limits-demo-van-gogh-bedroom-in-arles-daefab319a584e559443e39ff05e84fa https://sketchfab.com/3d-models/night-car-landscape-be4011aeb09740948bf30d33936c875b https://sketchfab.com/models/b81008d513954189a063ff901f7abfe4 http://www.alexandre-pestana.com/pbr-textures-sponza/ https://sketchfab.com/3d-models/jokers-mask-persona-5-81669910c0b74f41a3a58febfd514794