Rokid 开发空间小程序 实战

Rokid 开发空间小程序 实战

---

文章目录

• [Rokid 开发空间小程序 实战](#Rokid 开发空间小程序 实战)
• 1.登录
• [2 .登录后最后实名认证](#2 .登录后最后实名认证)
• [3.连接到 SDK https://ar.rokid.com/sdk?lang=zh](#3.连接到 SDK https://ar.rokid.com/sdk?lang=zh)
• [4. YodaOS-Master](#4. YodaOS-Master)
• • [Rokid UXR3.0 SDK](#Rokid UXR3.0 SDK)
  • [Rokid UXR2.0 SDK](#Rokid UXR2.0 SDK)
  • [XR Interaction Toolkit Plugin](#XR Interaction Toolkit Plugin)
  • MRTK3
  • JSAR
  • [Rokid Unreal OpenXR Plugin](#Rokid Unreal OpenXR Plugin)
  • [Rokid Native OpenXR SDK](#Rokid Native OpenXR SDK)
  • [5. 今天我在我说下 JSAR开发，因为这个比较简单](#5. 今天我在我说下 JSAR开发，因为这个比较简单)
• [6.创建 项目](#6.创建 项目)
• JSAR实战

---

1.登录

2 .登录后最后实名认证

3.连接到 SDK https://ar.rokid.com/sdk?lang=zh

4. YodaOS-Master

Rokid UXR3.0 SDK

UXR3.0 SDK是 Rokid 为 Unity 开发者提供的基于 OpenXR 的 AR 开发工具包,提供空间定位跟踪与手势交互等能力; UXR3.0 SDK 的运行平台为 Rokid AR Studio(lite),.该

SDK 支持 Unity2022.3的 LTS 版本。(注:获取S DK 请阅读文档)

Rokid UXR2.0 SDK

UXR2.0 SDK 是 Rokid 为 Unity 开发者提供的 AR 开发工具包，提供空间定位跟踪与手势交互等能力；UXR2.0 SDK 的运行平台为 Rokid AR Studio（Lite)。该 SDK 支持 Unity2020.3 及 Unity2021.3的 LTS 版本。(注：获取 SDK 请阅读文档）

XR Interaction Toolkit Plugin

XR Interaction Toolkit 是 Unity 官方提供的开发 VR/AR 程序的工具包（简称 XRI)，提供了移动、抓取、UI 交互等常用的功能，是游戏引擎提供给开发者的开发工具，Rokid AR Studio 设备与算法适配了 XRI，您可以使用此补充包导入到 Unity 即可使用相关能力进行开发。

MRTK3

MRTK3 是基于 Unity 的第三代混合现实工具包；这是一个开源项目，旨在加速 Unity 中跨平台的混合现实开发；MRTK3 建立在 Unity 的 XR 交互工具包 (XRI) 和 OpenXR 之上；Rokid AR Studio 设备和算法已经适配了 MRTK3，您可以参考文档中的 Unity 配置来使用相关功能进行开发。

JSAR

JSAR 是为 Master 系统构建空间"小程序"的开发工具，它支持开发者使用类似于 Web 的技术来开发可嵌入空间的空间小程序。简单来说，它可以帮助你将 Web 技术嵌入到 Master 桌面空间中独立运行。

Rokid Unreal OpenXR Plugin

Rokid Unreal OpenXR Plugin 是 Rokid 官方基于 OpenXR 标准提供的、集成在虚幻引擎上的插件，提供了对 Unreal OpenXR 相关模块的支持和额外扩展能力，使用该插件开发的应用，可以运行在支持 OpenXR 的 Rokid ARStudio 套装。

Rokid Native OpenXR SDK

OpenXR SDK v3.x 系列是底层和接口重构后的长期维护版本，支持 ARstuido 套装。

5. 今天我在我说下 JSAR开发，因为这个比较简单

开发环境步骤见

https://custom.rokid.com/prod/rokid_web/c88be4bcde4c42c0b8b53409e1fa1701/pc/cn/d2702078c3d649b4b9a34ffb25881a6a.html?documentId=5c18342855394a91a17ada6d8080e3a7

6.创建 项目

下载

https://github.com/M-CreativeLab/template-for-jsar-widget#

初始化

http://localhost:8080/main.xsml

https://jsar.netlify.app/playground?url=http://localhost:8080/main.xsml

JSAR实战

下面开发一个 JSAR 机器人：

1. 初始化场景和光照
   在开始构建3D机器人之前，我们需要先设置好基础的渲染环境。JSAR使用Babylon.js作为底层渲染引擎，通过spatialDocument对象可以直接访问到场景实例。首先我们获取场景对象，并设置天空蓝色背景，营造出科幻感的氛围。光照系统采用双光源设计：半球光提供柔和的环境光照，模拟天空散射光的效果；定向光则创造出明确的阴影和立体感。这种组合能够让机器人模型呈现出更真实的金属质感和空间层次。光照强度的精心调节确保了模型既不会过曝也不会过暗，每个零部件都能清晰可见。通过这样的场景初始化，我们为后续的3D建模工作奠定了坚实的视觉基础，使得机器人在渲染时能够展现出最佳的视觉效果。

const scene = (spatialDocument as any).scene as BABYLON.Scene;
scene.clearColor = new BABYLON.Color4(0.53, 0.81, 0.92, 1);

const light1 = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
light1.intensity = 0.8;

2. 创建材质系统
   材质是赋予3D模型真实感的关键要素。在机器人的设计中，我们采用了多种材质来区分不同的功能部件。金属灰材质用于主要的躯干和四肢，通过精心选择的RGB值（0.7, 0.75, 0.8）营造出冷峻的科技感。深灰色材质则应用在关节和手脚部位，形成视觉上的层次对比。最具特色的是发光材质的设计，蓝色LED材质不仅设置了漫反射颜色，还添加了自发光属性（emissiveColor），让眼睛和能量核心呈现出真实的发光效果。红色和黄色指示灯同样采用了发光材质，模拟出电子设备的状态指示灯效果。这种材质系统的设计不仅提升了视觉表现力，更重要的是通过颜色和光效的组合，让观众能够直观地识别机器人各个部件的功能属性，增强了整体的科幻氛围和真实感。

const metalMat = new BABYLON.StandardMaterial('metalMat', scene);
metalMat.diffuseColor = new BABYLON.Color3(0.7, 0.75, 0.8);

const blueMat = new BABYLON.StandardMaterial('blueMat', scene);
blueMat.diffuseColor = new BABYLON.Color3(0.2, 0.6, 1.0);
blueMat.emissiveColor = new BABYLON.Color3(0.1, 0.3, 0.5);

3. 构建躯干和四肢
   机器人的主体结构由躯干和四肢构成，这是整个模型的骨架部分。躯干采用长方体设计，宽度、高度和深度的比例经过精心计算，呈现出类人形的身体轮廓。使用SCALE变量作为统一的缩放因子，可以轻松调整整个机器人的大小而不破坏比例关系。四肢的建模遵循对称原则，左右腿使用相同的尺寸参数，只是通过position属性在X轴上进行镜像放置。腿部采用较细的方柱体，既符合机械结构的特征，又保持了人形的基本形态。每个部件的位置都基于统一的坐标系统，确保所有组件能够准确地组装在一起。躯干位于中心位置较高处，双腿则对称分布在两侧并向下延伸至地面。这种自下而上的构建方式符合工程学原理，也便于后期进行姿态调整和动画制作。

const body = BABYLON.MeshBuilder.CreateBox('body', {
  width: 1.2 * SCALE,
  height: 1.5 * SCALE,
  depth: 0.8 * SCALE
}, scene);
body.material = metalMat;
body.position = new BABYLON.Vector3(0, 2.15 * SCALE, 0);

const leftLeg = BABYLON.MeshBuilder.CreateBox('leftLeg', {
  width: 0.3 * SCALE,
  height: 0.8 * SCALE,
  depth: 0.3 * SCALE
}, scene);
leftLeg.position = new BABYLON.Vector3(-0.4 * SCALE, 0.7 * SCALE, 0);

4. 添加关节和细节
   关节系统是机器人设计中体现机械美学的重要元素。膝盖关节采用球体设计，不仅符合真实机械结构中万向节的形态，也增强了模型的灵活性和真实感。球形关节的直径略大于腿部宽度，在视觉上形成明显的连接点标识。使用深灰色材质的关节与金属灰的四肢形成对比，清晰地界定了不同部件的边界。关节的位置精确放置在腿部的中段，既符合人体工程学也满足机械结构的力学要求。除了膝盖，肩部和肘部也采用同样的球形关节设计，形成统一的设计语言。这些细节的添加大大提升了模型的完成度，使机器人从简单的几何体堆砌提升为具有功能性和设计感的机械角色。关节系统还为未来可能的动画和交互功能预留了接口，是整个模型设计中承上启下的关键环节。

const leftKnee = BABYLON.MeshBuilder.CreateSphere('leftKnee', {
  diameter: 0.35 * SCALE
}, scene);
leftKnee.material = darkMat;
leftKnee.position = new BABYLON.Vector3(-0.4 * SCALE, 0.65 * SCALE, 0);

5. 创建头部和发光特效
   头部是机器人最具表现力的部分，也是赋予角色个性的关键区域。方形头部设计延续了整体的硬朗机械风格，尺寸比例与躯干协调统一。最引人注目的是眼睛的设计，采用长方形发光体而非传统的圆形，强化了科技感和未来感。蓝色LED材质的眼睛不仅颜色鲜明，更重要的是通过emissiveColor属性实现的自发光效果，让眼睛在任何光照条件下都能发出幽幽蓝光，仿佛机器人正在运行中。眼睛的位置经过精确计算，略微突出于头部表面，增强了立体感和视线的指向性。除了眼睛，胸前的能量核心、状态指示灯、天线顶端都采用了同样的发光材质技术。这些发光点不仅装饰了机器人，更暗示了内部能源系统的运作状态。红色指示灯代表警戒状态，黄色背包灯则象征着能量储备，形成了一套完整的视觉语言系统，使机器人充满了生命力。