【征文计划】玩转 Rokid JSAR：基于 Web 技术栈的 AR 开发环境搭建、核心 API 应用与 3D 时钟等创意项目全流程解析
前言
随着 AR 技术在消费级场景的普及，开发者对 '低门槛、高兼容' AR 开发工具需求愈发迫切，传统 AR 开发往往依赖专属引擎或复杂语法，导致 Web 开发者难以快速切入，而 Rokid 推出的 JSAR 技术，恰好打破了这一壁垒：以 '可嵌入空间的 Web 运行时' 为核心，让开发者无需学习新的开发范式，仅用 JavaScript/TypeScript 等熟悉的 Web 技术栈，就能快速开发出支持 3D 物体、2D 界面的空间小程序
本文正是围绕 JSAR 技术展开的实战指南：从最基础的开发环境搭建到核心特性原理解析，再到地球项目、超级马里奥复刻、碰撞检测、动画缓动等场景的实战演练，最终以 '3D 时钟' 为创意案例，深入拆解 JSAR 项目的文件结构、逻辑实现与空间布局关联。无论你是刚接触 AR 开发的 Web 工程师，还是希望拓展技术边界的开发者，都能通过本文掌握 JSAR 开发的核心流程，真正实现 '用 Web 技术玩转 AR 空间应用'。
Rokid JSAR 介绍
对开发者来说，JSAR 就是个 '技术转换器' 不用学新东西，用熟悉的 JavaScript、TypeScript 这些 Web 技术，就能做能放进特定空间的小程序，还能在场景里划块区域放 3D 模型、2D 界面，写的代码跟在网页里一样能跑，直接把 Web 开发经验套到空间应用上就行可嵌入空间：是指在当前场景中通过定义长宽高划定一块子空间给一个单独的应用程序使用，空间组件可以是一个 3D 物体，也可以是一个 2D 界面，当然也可以是带 GUI 的 3D 物体Web 运行时：代表 JSAR 可以运行基于 Web APIs 实现的 JavaScript / TypeScript 代码，同时也可以运行 WebAssembly
Rokid JSAR 开发环境搭建：基础地球项目开发
开发工具安装
1、VS Code安装插件 JSAR Devtools 和 gITF ToolsJSAR Devtools：辅助 JSAR 项目开发，提供 AR 场景调试、状态查看及性能优化等功能，提升开发效率glTF Tools：处理 glTF/GLB 格式 3D 模型，支持在开发环境中预览和简单编辑，方便模型使用
项目资源准备
2、icon.png准备
3、通过gITF插件预览效果
4、
main.xsmlJSAR 项目中用于定义界面结构、资源关联和 3D 场景布局的描述文件，连接项目资源与场景元素，搭建起应用的基础框架
本地服务器搭建
5、Web 浏览器运行安装
serve工具使用serve工具启动静态服务器6、浏览器地址如下显示则表示成功启动服务器
7、JSAR 演示场展示：https://jsar.netlify.app/playground?url=填写本地服务器地址
