鸿蒙开发-想展示3D模型？ArkGraphics3D和SpatialRecon怎么用

想展示 3D 模型ArkGraphics 3D 和 Spatial Recon 怎么用如果你要做一个3D 模型查看器——比如让用户在手机上查看一个 3D 扫描的房间、一个 3D 建模的产品或者一个 AR 场景里的虚拟物体HarmonyOS 提供了两套 3D 能力ArkGraphics 3D通用的 3D 场景管理可以加载 glTF 模型、操作节点、设置材质和光照。Spatial Recon Kit专门做 3DGS3D Gaussian Splatting渲染适合展示空间扫描重建的结果。今天我们来看看这两个 Kit 的基本用法。ArkGraphics 3D 和 Spatial Recon Kit 的定位和能力对比标准 glTF/glb3DGS 高斯点云3D 渲染需求模型格式是什么?ArkGraphics 3DSpatial Recon KitScene.load 加载场景Node 节点操作: 位移/旋转/缩放材质/光照设置loadPlugin 加载 3DGS 插件loadGSNode 加载高斯点云模型添加视觉特效: 复古/漫画同一个场景中可混合使用ArkGraphics 3D3D 场景的基础ArkGraphics 3D 是 HarmonyOS 的 3D 图形基础模块提供了场景Scene、节点Node、资源Resources等核心概念。核心概念Scene场景整个 3D 世界的容器。你可以往里面添加模型、灯光、相机等元素。Node节点场景里的每一个东西都是一个节点。模型是节点、灯光是节点、相机也是节点。节点之间有父子关系形成一棵节点树。移动父节点子节点会跟着移动。RenderContext渲染上下文管理渲染资源和插件。加载 3D 模型、创建效果都需要通过它。加载一个 glTF 模型glTF 是 3D 模型的标准格式就像图片的 JPG 一样。ArkGraphics 3D 可以直接加载 glTF 文件import{Scene,RenderContext}fromkit.ArkGraphics3D;// 加载场景Scene.load().then(async(scene:Scene){leturiOhosRawFile://assets/gltf/model.glb;letoffset0;// 加载模型到场景根节点letnodeawaitscene.load(uri,offset,scene.root);// 设置节点位置node.position{x:0,y:0,z:-2};// 放在相机前方 2 米// 设置节点缩放node.scale{x:1,y:1,z:1};// 设置节点可见性node.visibletrue;});Scene.load()创建一个新的场景。scene.load(uri, offset, parent)加载一个 glTF 模型并把它挂到指定的父节点下。OhosRawFile://是 HarmonyOS 的资源路径协议指向项目的rawfile文件夹。节点操作加载后的节点可以自由操作// 移动node.position{x:1,y:0,z:0};// 缩放node.scale{x:2,y:2,z:2};// 旋转用四元数表示node.rotation{x:0,y:0.707,z:0,w:0.707};// 绕 Y 轴旋转 90 度// 显示/隐藏node.visiblefalse;获取渲染上下文letrenderContext:RenderContext|nullScene.getDefaultRenderContext();渲染上下文是和渲染管线交互的入口。加载插件、创建效果等操作都需要通过它。Spatial Recon Kit3DGS 渲染加载 3DGS 模型的完整流程如下是否获取 RenderContext 渲染上下文loadPlugin 加载 GSPlugin 插件Scene.load 创建场景GSPlugin.loadGSNode 加载 3DGS 模型设置节点属性position: 设置位置scale: 设置缩放visible: 设置可见性需要特效?加载特效插件RETRO 复古COMIC 漫画OBRA_DINN 黑白bit渲染显示3DGS3D Gaussian Splatting是一种新兴的 3D 重建和渲染技术。它通过大量高斯点来表示 3D 场景每个高斯点有位置、颜色、大小等属性。渲染时把这些高斯点泼洒到屏幕上就能重建出逼真的 3D 场景。和传统的三角形网格glTF相比3DGS 的优势是渲染速度快不需要光栅化三角形场景重建精度高适合扫描真实环境文件体积可能更小基本用法import{Scene,RenderContext}fromkit.ArkGraphics3D;import{spatialRender}fromkit.SpatialReconKit;// 1. 获取渲染上下文letrenderContext:RenderContext|nullScene.getDefaultRenderContext();if(renderContext!null){// 2. 加载 3DGS 插件必须renderContext.loadPlugin(spatialRender.GSPlugin.PLUGIN_ID);// 3. 加载场景Scene.load().then(async(scene:Scene){leturiOhosRawFile://assets/gltf/model.glb;letoffset0;// 4. 加载 3DGS 模型letgsNode:spatialRender.GSNodeawaitspatialRender.GSPlugin.loadGSNode(scene,{uri,offset},scene.root);// 5. 设置节点属性gsNode.position{x:3,y:0,z:0};gsNode.scale{x:1.5,y:1.5,z:1.5};gsNode.visibletrue;});}关键步骤loadPlugin必须先加载GSPlugin.PLUGIN_ID否则后续调用会出问题。loadGSNode加载 3DGS 模型返回一个GSNode对象。GSNode 继承自 Node所以可以用和普通节点一样的方式操作position、scale、visible 等。特效Spatial Recon Kit 还提供了几种视觉特效// 复古效果renderContext.loadPlugin(spatialRender.GSPlugin.RETRO_EFFECT_ID);// 漫画效果renderContext.loadPlugin(spatialRender.GSPlugin.COMIC_EFFECT_ID);// 黑白 bit 效果renderContext.loadPlugin(spatialRender.GSPlugin.OBRA_DINN_EFFECT_ID);// 颜色编辑效果renderContext.loadPlugin(spatialRender.GSPlugin.COLOR_EDITING_EFFECT_ID);这些特效可以给 3DGS 渲染结果加上不同的艺术风格。完整示例3D 模型查看器import{Scene,RenderContext}fromkit.ArkGraphics3D;import{spatialRender}fromkit.SpatialReconKit;EntryComponentstruct ModelViewer{Statestatus:string加载中...;asyncaboutToAppear(){letrenderContextScene.getDefaultRenderContext();if(renderContextnull){this.status渲染上下文不可用;return;}// 加载 3DGS 插件renderContext.loadPlugin(spatialRender.GSPlugin.PLUGIN_ID);try{letsceneawaitScene.load();leturiOhosRawFile://assets/gltf/model.glb;letgsNodeawaitspatialRender.GSPlugin.loadGSNode(scene,{uri,offset:0},scene.root);gsNode.position{x:0,y:0,z:-3};gsNode.scale{x:1,y:1,z:1};gsNode.visibletrue;this.status模型加载成功;}catch(err){this.status加载失败:${err};}}build(){Column(){Text(this.status).fontSize(18).margin(20)// 3D 渲染区域需要配合 Scene 组件}.width(100%).height(100%)}}小结能力Kit用途glTF 模型加载ArkGraphics 3D加载标准 3D 模型节点操作ArkGraphics 3D移动、旋转、缩放材质/光照ArkGraphics 3D设置外观3DGS 渲染Spatial Recon Kit空间扫描重建特效Spatial Recon Kit复古/漫画等艺术风格ArkGraphics 3D 适合通用的 3D 场景Spatial Recon Kit 适合空间扫描和 3DGS 数据。两者可以结合使用——在同一个场景里既有 glTF 模型也有 3DGS 渲染。下一篇我们来看 XEngine Kit——GPU 加速引擎看看怎么做 VRS、超分辨率和光线追踪。