Rokid JSAR 实战指南：Web 技术栈 AR 开发环境搭建与 3D 时钟项目详解
随着 AR 技术在消费级场景的普及，开发者对'低门槛、高兼容'开发工具的需求愈发迫切。传统 AR 开发往往依赖专属引擎或复杂语法，导致 Web 开发者难以快速切入。Rokid 推出的 JSAR 技术打破了这一壁垒，它以'可嵌入空间的 Web 运行时'为核心，让开发者无需学习新的开发范式，仅用 JavaScript/TypeScript 等熟悉的 Web 技术栈，就能快速开发出支持 3D 物体、2D 界面的空间小程序。
本文围绕 JSAR 技术展开实战指南：从基础的开发环境搭建到核心特性原理解析，再到地球项目、碰撞检测、动画缓动等场景演练，最终以'3D 时钟'为创意案例，深入拆解文件结构、逻辑实现与空间布局关联。
什么是 Rokid JSAR
对于开发者来说，JSAR 就像是一个'技术转换器'。你不需要学新东西，用熟悉的 JavaScript、TypeScript 这些 Web 技术，就能做能放进特定空间的小程序，还能在场景里划块区域放 3D 模型、2D 界面，写的代码跟在网页里一样能跑，直接把 Web 开发经验套到空间应用上就行。
- 可嵌入空间：是指在当前场景中通过定义长宽高划定一块子空间给一个单独的应用程序使用，空间组件可以是一个 3D 物体，也可以是一个 2D 界面，当然也可以是带 GUI 的 3D 物体。
- Web 运行时：代表 JSAR 可以运行基于 Web APIs 实现的 JavaScript / TypeScript 代码，同时也可以运行 WebAssembly。
开发环境搭建：基础地球项目开发
开发工具安装
首先需要在 VS Code 中安装必要的插件来辅助开发。
- JSAR Devtools：辅助 JSAR 项目开发，提供 AR 场景调试、状态查看及性能优化等功能，提升开发效率。
- glTF Tools：处理 glTF/GLB 格式 3D 模型，支持在开发环境中预览和简单编辑，方便模型使用。
项目资源准备
准备好 icon.png 等资源后，可以通过 glTF 插件预览效果。在 JSAR 项目中，main.xsml 是用于定义界面结构、资源关联和 3D 场景布局的描述文件，它连接项目资源与场景元素，搭建起应用的基础框架。
本地服务器搭建
由于 JSAR 需要加载远程资源，我们需要启动一个本地静态服务器。
- 安装
serve工具：npm install -g serve - 在项目根目录运行
serve启动服务。 - 浏览器访问
http://localhost:3000（具体端口视配置而定）显示成功页面。 - 将地址填入 JSAR 演示场：https://jsar.netlify.app/playground 即可看到效果。
实战项目演练：从基础到创意
除了基础的地球项目，我们还需要关注交互功能实践（如碰撞检测实现）以及动效设计实践（如动画缓动实现）。这些是构建沉浸式体验的关键。
