HarmonyOS 6.1 空间计算初探：把电商展厅搬进“虚实融合”新世界

发布时间：2026/7/24 10:02:58

HarmonyOS 6.1 空间计算初探：把电商展厅搬进“虚实融合”新世界
系列番外·空间计算篇。终章发布后有读者留言“现在都在聊Vision Pro和空间计算鸿蒙在这方面有布局吗能不能把我们这个电商Demo弄成3D的” 答案是肯定的。HarmonyOS NEXT的ArkUI 3D和Spatial Computing Kit正是为此而生。今天作为系列的第一个番外篇我们跳出手机屏幕的限制将电商Demo升级为3D沉浸式购物空间。用户不再只是“刷列表”而是可以走进虚拟展厅“拿起”商品查看细节甚至把家具“摆放”在自己家里。全程基于API23解决3D模型加载、手势交互、虚实锚定三大核心技术点。这是通往下一代操作系统的入场券。一、前言为什么电商是空间计算的“杀手级场景”回顾我们之前的系列所有的交互都被局限在6英寸的矩形屏幕里。无论是滑动列表还是点击按钮本质上都是在操作二维平面上的像素。空间计算Spatial Computing打破了这个界限从“看图片”到“看展品”以前的详情页是几张平面图现在是一个可以720°旋转的3D模型。从“想象摆放”到“真实预览”买沙发不用凭空想象直接把虚拟沙发“放”在客厅里看看尺寸和风格是否合适。从“手指点击”到“自然交互”用手捏合来缩放商品用手抛动作来切换视角就像在现实世界一样自然。HarmOS 6.1提供了低门槛的3D开发能力。我们不需要学习OpenGL或Unity复杂的Shader语言直接用熟悉的ArkTS和类Compose的声明式语法就能构建3D场景。今天我们就来给电商Demo加一个“3D展厅”页面。二、核心概念辨析2D UI vs 3D Scene很多前端开发者对3D有畏难情绪其实只要理清这几个核心概念上手非常快概念2D UI (传统)3D Scene (空间计算)类比说明坐标系​X(横), Y(纵)X(横), Y(纵),Z(深)​从画纸变成了雕塑台基本单元​Column,Text,ImageScene,Node3D,Mesh积木块变成了3D模型位置​position({x:0, y:0})position({x:0, y:0, **z:-5**})Z轴负值表示远离镜头旋转​rotate({angle: 90})rotation({x:0, y:1, z:0, angle:90})指定绕哪个轴旋转相机​屏幕即是相机Camera组件导演的眼睛决定看哪里核心认知ArkUI 3D的本质是把3D场景当作一个特殊的UI组件来渲染。我们可以在3D场景里嵌套2D的按钮Overlay也可以在2D页面里嵌入3D视口。这种混合渲染能力是鸿蒙的独特优势。三、代码实现构建3D商品展厅3.1 环境准备与资源引入模型准备3D开发离不开模型文件。常用的格式是.glb或.gltf。我们可以从Sketchfab等网站下载免费的电商产品模型如椅子、包包放入entry/src/main/resources/rawfile/models/目录。权限配置空间计算可能需要相机权限用于虚实融合在module.json5中添加{ module: { requestPermissions: [ { name: ohos.permission.CAMERA, reason: AR空间锚定需要 } ] } }3.2 构建3D场景组件创建entry/src/main/ets/pages/SpatialShowroom.ets。这是我们的核心3D页面。import { scene } from kit.ArkGraphics3D import { abilityAccessCtrl } from kit.AbilityKit Entry Component struct SpatialShowroom { private scene: scene.Scene null! private modelNode: scene.Node3D null! State rotationY: number 0 // 控制模型Y轴旋转 State scale: number 1.0 // 控制模型缩放 aboutToAppear(): void { // 请求相机权限用于AR模式 this.requestCameraPermission() } async requestCameraPermission(): Promisevoid { let atManager abilityAccessCtrl.createAtManager() try { await atManager.requestPermissionsFromUser(getContext(this), [ohos.permission.CAMERA]) } catch (err) { console.error(相机权限申请失败:, err) } } /** * 加载3D场景 */ onSceneCreated(scene: scene.Scene): void { this.scene scene console.log(3D场景加载成功) // 1. 设置环境光让模型更清晰 const light scene.getNode(EnvLight) as scene.Light if (light) { light.intensity 20000 } // 2. 加载商品模型例如一把椅子 scene.loadModel({ path: models/chair.glb, // rawfile目录下的路径 onLoaded: (node: scene.Node3D) { this.modelNode node console.log(模型加载成功:, node.name) // 调整模型位置和大小 node.position { x: 0, y: -1, z: -5 } // 稍微下移后退 node.scale { x: 0.5, y: 0.5, z: 0.5 } // 缩小一半 }, onError: (err: Error) { console.error(模型加载失败:, err) } }) } build() { Stack() { // 3D场景视口铺满全屏 SceneView({ sceneOptions: { environment: scene.EnvironmentPreset.STUDIO // 使用工作室光照环境 }, onSceneCreated: (scene: scene.Scene) this.onSceneCreated(scene) }) .width(100%) .height(100%) // 叠加在3D场景上的2D UI操作面板 Column() { // 标题 Text(3D商品展厅) .fontSize(24) .fontColor(Color.White) .fontWeight(FontWeight.Bold) .shadow({ radius: 10, color: Color.Black }) .margin({ top: 40 }) Blank() // 底部操作栏 Row() { // 旋转按钮 Button(↻) .onClick(() { this.rotationY 45 if (this.modelNode) { this.modelNode.rotation { x: 0, y: 1, z: 0, angle: this.rotationY } } }) .width(60) .height(60) .borderRadius(30) .backgroundColor(#0A59F7) // 缩放控制 Slider({ value: this.scale, min: 0.5, max: 2.0, step: 0.1 }) .width(150) .onChange((value: number) { this.scale value if (this.modelNode) { this.modelNode.scale { x: value, y: value, z: value } } }) // AR放置按钮进阶功能 Button(AR) .onClick(() { this.enterARMode() }) .width(60) .height(60) .borderRadius(30) .backgroundColor(#4CAF50) } .width(90%) .justifyContent(FlexAlign.SpaceBetween) .margin({ bottom: 40 }) } .width(100%) .height(100%) } .width(100%) .height(100%) .backgroundColor(Color.Black) } /** * 进入AR放置模式虚实融合 */ enterARMode(): void { if (!this.scene) return // 切换到AR环境需要设备支持如Mate 60 Pro this.scene.switchEnvironment(scene.EnvironmentPreset.AR) // 提示用户点击地面放置模型 promptAction.showToast({ message: 请点击地面放置商品 }) // 监听点击事件在点击位置放置模型 this.scene.on(touch, (hitResult: scene.HitResult) { if (hitResult.type scene.HitType.PLANE) { if (this.modelNode) { // 将模型移动到点击的平面位置 this.modelNode.position hitResult.point promptAction.showToast({ message: 商品已放置 }) } } }) } }四、踩坑记录官方文档没写的5个细节模型格式陷阱一定要用.glb格式不要用.obj或.fbx。.glb是二进制格式体积小加载快且支持PBR材质金属、粗糙度鸿蒙对其支持最好。.gltf是JSON格式加载慢不推荐。坐标系手性鸿蒙3D使用的是右手坐标系Y轴向上而Unity等引擎常用左手坐标系。导入模型后如果发现上下颠倒记得在Blender等建模软件中调整坐标轴方向或者在代码里旋转90度。性能瓶颈3D渲染非常耗电耗性能。不要在列表页一次性加载多个复杂3D模型。建议只在详情页进入全屏3D模式。同时务必给模型做LOD多层次细节处理远看用低模近看用高模。AR模式的设备限制目前的EnvironmentPreset.AR主要依赖华为自研的Cyberverse技术并非所有鸿蒙设备都支持主要是旗舰机如Mate 60系列、Pura 70系列。赶稿时如果设备不支持可以用下面的浏览器模拟方案。触摸事件穿透3D场景的触摸事件默认会吃掉所有点击导致后面的2D按钮点不了。需要在SceneView上设置.hitTestBehavior(HitTestMode.None)或者在3D场景里手动转发事件给UI层。

相关新闻

STM32 SysTick定时器原理与应用实践

STM32 SysTick定时器原理与应用实践

1. STM32 SysTick定时器基础解析SysTick是ARM Cortex-M内核提供的一个24位递减计数器，作为STM32微控制器的标准外设，它主要承担操作系统节拍定时器的角色。这个看似简单的定时器在实际工程中却承担着关键任务——从最基本的延时函数到RTOS的任务调度都依…

2026/7/23 7:19:47 阅读更多 →
总纲:把不确定性从 LLM 侧转移到工程侧

总纲:把不确定性从 LLM 侧转移到工程侧

结论先说 准确率从 65% 提升到 85%,三四周,由我独立完成。 核心思路——把不确定性从 LLM 侧转移到工程侧。 这不是事后总结,是多次迭代提示词、发现收益递减后,形成的整套调优思路; 它覆盖全部 11 个模块,可拆分为四层逻辑:前置拦截 LLM、收窄 LLM 决策空间、兜底修复 LLM 异常…

2026/7/24 6:25:46 阅读更多 →
电容器动态分析：电量不变模型原理与典型例题详解

电容器动态分析：电量不变模型原理与典型例题详解

在电路分析与电子技术的学习中，电容器的动态分析往往是学生和工程师们遇到的一个难点，尤其是当电路状态发生突变时，电容器的电压和电荷量如何变化，直接关系到整个电路的工作特性。上节课我们重点讲解了电容器动态分析的基本原理和…

2026/7/22 21:21:43 阅读更多 →

最新新闻

AI意识争议：技术原理与伦理边界解析

AI意识争议：技术原理与伦理边界解析

1. 项目概述：AI意识争议的技术与伦理边界上周AI领域爆出一条重磅消息：Anthropic公司首席科学家在内部会议上表示，其开发的Claude模型"可能具有某种形式的意识"。这个表述立即在科技圈引发轩然大波，有人称之为"打开…

2026/7/25 6:28:52 阅读更多 →
WebGL 纹理完整教程：原理、场景 + 可直接运行 Demo一、WebGL 纹理核心概念1. 纹理是什么纹理就是一张图片，把像素数据贴到几何体表面（类似贴纸），WebGL 通过纹理单元、纹理对

WebGL 纹理完整教程：原理、场景 + 可直接运行 Demo一、WebGL 纹理核心概念1. 纹理是什么纹理就是一张图片，把像素数据贴到几何体表面（类似贴纸），WebGL 通过纹理单元、纹理对

WebGL 纹理完整教程：原理、场景 可直接运行 Demo一、WebGL 纹理核心概念1. 纹理是什么纹理就是一张图片，把像素数据贴到几何体表面（类似贴纸），WebGL 通过纹理单元、纹理对象、采样器、UV 坐标配合使用。 核心四要素&a…

2026/7/25 6:28:52 阅读更多 →
UE5模板序列：跨关卡复用动画与逻辑的高效解决方案

UE5模板序列：跨关卡复用动画与逻辑的高效解决方案

1. 项目概述：为什么跨关卡复用模板序列是UE开发者的必修课在虚幻引擎（UE5/UE4）的项目开发中，尤其是涉及到大型开放世界、多章节叙事或者重复性玩法机制时，我们经常会遇到一个头疼的问题：辛辛苦苦在某个关卡…

2026/7/25 6:28:52 阅读更多 →
AI图书出版系统实战：从架构设计到生产部署完整指南

AI图书出版系统实战：从架构设计到生产部署完整指南

如果你正在探索如何将AI技术真正落地到内容创作领域，特别是想了解从零搭建一个AI驱动的图书出版系统会遇到哪些实际挑战，那么这篇文章正是为你准备的。过去一年，AI内容生成技术看似成熟，但真正将其应用到严肃出版领域时&#xff0…

2026/7/25 6:28:52 阅读更多 →
智能视频创作技术：从生成式AI到神经渲染的实践

智能视频创作技术：从生成式AI到神经渲染的实践

1. 智能视频创作的技术演进脉络2026年视频创作领域正在经历一场由底层技术驱动的范式转移。过去三年间，三个关键技术突破彻底改变了行业格局：首先是神经渲染技术从实验室走向工业化，使得实时生成影视级画质成为可能；其次是多模态大…

2026/7/25 6:27:52 阅读更多 →
从零到亿级调用：非科班AI工程师的成长路线

从零到亿级调用：非科班AI工程师的成长路线

## 1. 项目概述：一个非科班程序员的逆袭之路2016年夏天，我刚从机械工程专业毕业，连最简单的Python脚本都写不利索。八年后的今天，我坐在某大厂AI Lab的工位上，负责着日均调用量过亿的多模态推理系统。这中间发生了什么…

2026/7/25 6:27:52 阅读更多 →

日新闻

突破文档下载限制：kill-doc让你看到的都能保存

突破文档下载限制：kill-doc让你看到的都能保存

突破文档下载限制：kill-doc让你看到的都能保存 【免费下载链接】kill-doc 看到经常有小伙伴们需要下载一些免费文档，但是相关网站浏览体验不好各种广告，各种登录验证，需要很多步骤才能下载文档，该脚本就是为了解决您的…

2026/7/25 0:00:35 阅读更多 →
C++ string类模拟实现：从深拷贝到内存管理的完整指南

C++ string类模拟实现：从深拷贝到内存管理的完整指南

1. 项目概述：为什么我们要“手撕”string类？在C的学习道路上，尤其是从C语言过渡到C的“初阶”阶段，string类绝对是一个绕不开的核心。标准库里的std::string用起来太方便了，、find、substr，几个操作符和函数…

2026/7/25 0:00:35 阅读更多 →
三角洲寻宝鼠工具：高效文件搜索与资源管理实战指南

三角洲寻宝鼠工具：高效文件搜索与资源管理实战指南

1. 先搞清楚“三角洲寻宝鼠”到底是什么工具从名称来看，“三角洲寻宝鼠”更像是一个资源查找或文件检索类工具，而不是游戏或娱乐软件。这类工具的核心价值在于帮助用户快速定位特定资源，比如文档、图片、压缩包或特定格式的文件。如果你经常需…

2026/7/25 0:00:35 阅读更多 →

周新闻

Go语言静态资源打包方案对比与实践指南

Go语言静态资源打包方案对比与实践指南

1. 项目背景与核心需求在Go语言开发中，我们经常需要处理静态资源文件的打包问题。无论是Web应用的模板文件、前端资源，还是配置文件、证书等，都需要随程序一起分发。传统做法是将这些文件与编译后的二进制文件放在同一目录下，但这…

2026/7/25 5:08:22 阅读更多 →
Go语言实现高性能LDAP认证服务的架构与实践

Go语言实现高性能LDAP认证服务的架构与实践

1. 项目背景与核心价值LDAP（轻量级目录访问协议）作为企业级身份认证的黄金标准，已经服务了超过80%的财富500强公司。我在金融科技领域实施统一认证体系时，发现传统Java方案存在启动慢、内存占用高等痛点。而Go语言凭借其协程并发模…

2026/7/25 5:13:53 阅读更多 →
【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

更多请点击： https://intelliparadigm.com 第一章：AI面试官实战指南的核心价值与适用场景 AI面试官并非替代人类HR的“黑箱工具”，而是以可解释、可审计、可迭代的方式，赋能招聘全链路的关键基础设施。其核心价值在于将主观经验沉…

2026/7/24 18:52:18 阅读更多 →

月新闻