【征文计划】玩转 Rokid JSAR：基于 Web 技术栈的 AR 开发环境搭建、核心 API 应用与 3D 时钟等创意项目全流程解析

优质文章学习记录

— 6 min read
【征文计划】玩转 Rokid JSAR：基于 Web 技术栈的 AR 开发环境搭建、核心 API 应用与 3D 时钟等创意项目全流程解析

【征文计划】玩转 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.xsml JSAR 项目中用于定义界面结构、资源关联和 3D 场景布局的描述文件，连接项目资源与场景元素，搭建起应用的基础框架

本地服务器搭建
5、Web 浏览器运行安装 serve 工具使用 serve 工具启动静态服务器





6、浏览器地址如下显示则表示成功启动服务器



7、JSAR 演示场展示：https://jsar.netlify.app/playground?url=填写本地服务器地址

JSAR 实战项目演练：从基础到创意

交互功能实践：碰撞检测实现



动效设计实践：动画缓动实现



创意开发：3D 时钟项目全解析

在这里插入图片描述
文件路径 / 名称文件角色定位核心功能说明
lib/clock.ts核心逻辑文件封装坐标计算、时间获取、图形绘制函数，通过startClock实现模拟 + 数字时钟绘制
lib/main.ts项目入口文件获取画布、初始化时钟，每秒更新绘制与画布，实现动态走时
package-lock.json依赖配置文件管理@yodaos-jsar/types等依赖及版本，保障开发环境稳定
main.xsml3D 页面配置文件定义画布立方体样式、引入脚本、创建 3D 载体，关联逻辑与空间布局
1、clock.ts 封装了时钟绘制的核心逻辑，通过一系列函数如计算坐标的 x2、y2，获取时间的 getTime，绘制圆形、线条、文字的 drawCircle、drawLine、drawText 等，最终在 startClock 函数里实现了模拟时钟（含时针、分针、秒针及表盘）与数字时钟的绘制

2、 main.ts 则作为项目入口，获取画布并借助 startClock 初始化时钟绘制，再通过 setInterval 每秒钟调用一次 startClock 并更新画布，从而让时钟实现动态走时效果。

3、package-lock.json 配置 JSAR 3D 时钟项目的依赖树

4、main.xsml 项目页面配置核心，通过样式定义 #canvas 立方体的缩放与旋转，引入 main.ts 脚本，并以 <cube> 为载体，构建出 3D 时钟在空间展示的基础结构，关联样式与核心逻辑

总结

Rokid JSAR 最核心的价值就是帮 Web 开发者 “零门槛” 切入 AR 开发，不用学新引擎、开发流程清晰、项目架构可复用，不管是练手基础功能，还是做 3D 时钟这类创意项目都能高效落地，真正实现 Web 技术和 AR 空间场景互通，如果对这种低门槛 AR 开发感兴趣，不妨前往 Rokid 官网，获取更完整的开发文档、工具资源和场景示例，亲自体验从代码编写到空间应用落地的全流程！

✅技术门槛低：JSAR 核心是复用 Web 技术，无需学专属 AR 引擎语法，Web 开发者用 JavaScript/TypeScript、Web APIs 即可开发空间应用，且 main.xsml 场景定义、Canvas 纹理绘制等操作熟悉，大幅降低跨领域学习成本

✅开发流程清晰可复现：地球项目从工具配置、资源准备、服务器搭建到演示场验证，每步有具体操作与反馈，能快速搭环境；后续项目还提供场景模板，减少功能开发试错成本

✅项目架构可复用：3D 时钟项目的文件拆解逻辑、入口、布局等分离提供通用结构参考，契合模块化思维，可直接复用到其他 JSAR 项目

Read more

OpenClaw配置飞书机器人完整指南

OpenClaw配置飞书机器人完整指南 使用openclaw channels add配置飞书机器人需完成插件安装→飞书应用创建→通道配置→事件订阅→发布应用五个核心步骤，以下是可直接执行的详细流程。 文章目录 * OpenClaw配置飞书机器人完整指南 * 一、前置准备 * 二、通道配置（openclaw channels add） * 方法1：交互式向导配置（推荐） * 方法2：非交互式命令配置（适合脚本） * 方法3：手动编辑配置文件 * 三、事件订阅与发布（关键步骤） * 四、测试与验证 * 五、常见问题排查 一、前置准备 1. 飞书开放平台创建应用（获取凭证） 1. 访问飞书开放平台：https://open.feishu.cn/app 2. 创建企业自建应用，填写名称（如"

neo4j desktop2 安装与使用

1. Neo4j Desktop 2 简介 1.1 Neo4j Desktop 2 的核心功能与优势 Neo4j Desktop 2 是 Neo4j 官方推出的图形化数据库管理工具，专为开发者和数据科学家设计。 其主要优势包括： 一体化开发环境：集成了数据库实例管理、查询编辑、数据可视化和扩展管理 本地开发友好：支持在本地机器上快速创建和测试图数据库实例 多版本管理：可同时管理多个 Neo4j 数据库版本 插件生态系统：内置插件市场，轻松安装常用扩展  项目管理：以项目为单位组织数据库、查询和配置   1.2 适用场景 图数据库开发：为应用程序开发提供本地图数据库环境 本地测试：在部署到生产环境前进行数据模型测试和查询验证 项目管理：管理多个图数据库项目，保持环境隔离 教育与学习：学习 Cypher 查询语言和图数据库概念 2.

Mac Mini M4 跑 AI 模型全攻略：从 Ollama 到 Stable Diffusion 的保姆级配置指南

Mac Mini M4 本地AI模型实战：从零构建你的个人智能工作站 最近身边不少朋友都在讨论，能不能用一台小巧的Mac Mini M4，搭建一个属于自己的AI开发环境。毕竟，不是每个人都有预算去租用云端的高性能GPU，也不是所有项目都适合把数据传到云端处理。我折腾了大概两周，从Ollama到Stable Diffusion，把整个流程走了一遍，发现M4芯片的潜力远超预期。这篇文章，就是把我踩过的坑、验证过的有效配置，以及一些提升效率的小技巧，毫无保留地分享给你。无论你是想本地运行大语言模型进行对话和创作，还是想离线生成高质量的AI图像，这篇指南都能帮你把Mac Mini M4变成一个得力的AI伙伴。 1. 环境准备与基础配置 在开始安装任何AI工具之前，确保你的系统环境是干净且高效的，这能避免后续无数莫名其妙的依赖冲突。Mac Mini M4出厂预装的是较新的macOS版本，但这还不够。 首先，打开“系统设置” -> “通用” -> “软件更新”，确保你的macOS已经更新到可用的最新版本。苹果对Metal图形API和神经网络引擎的优化通常会随着系统更新而提升，这对于后续运

FPGA小白学习日志一：LED的点亮

1.工程准备 首先建立一个名为led的工程文件夹，文件夹下包含了doc、quartus_prj、rtl、sim四个子文件夹： 那么我们来分析各个文件夹包含了什么： doc：该文件夹主要包含了文档资料、数据手册、Visio波形等，相当于档案库； quartus_prj：该文件夹主要包括了使用Quartus II软件新建的工程，相当于操作台； rtl：该文件夹主要放置生成硬件电路的代码，相当于原材料； Sim：该文件夹放置对生成硬件电路代码的仿真文件，相当于质检室；     这四个文件夹各自完成不同的分工，但是它们之间有什么联系呢？答案是：他们之间通过路径关联和文件引用，形成一个完美的FPGA开发闭环。quartus_prj作为工程中枢，向上访问doc读取说明，向下访问rtl获取硬件代码，向外访问sim获取仿真脚本；sim向上访问rtl在逻辑上验证硬件代码的正确性。 2.设计过程    无论我们使用FPGA做什么类型的项目时，我们都要参照一个具体的流程，这里就介绍我自己的开发流程： 1.看手册和原理图，搞清楚我们需要实现什么功能，就像做饭时我们需要看食谱，要知道自己吃什么。