【征文计划】玩转 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

【课程设计/毕业设计】基于Web的宠物领养管理系统设计与实现宠物信息管理、领养信息管理【附源码、数据库、万字文档】

【课程设计/毕业设计】基于Web的宠物领养管理系统设计与实现宠物信息管理、领养信息管理【附源码、数据库、万字文档】

博主介绍：✌️码农一枚 ，专注于大学生项目实战开发、讲解和毕业🚢文撰写修改等。全栈领域优质创作者，博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围：：小程序、SpringBoot、SSM、JSP、Vue、PHP、Java、python、爬虫、数据可视化、大数据、物联网、机器学习等设计与开发。 主要内容：免费开题报告、任务书、全bao定制+中期检查PPT、代码编写、🚢文编写和辅导、🚢文降重、长期答辩答疑辅导、一对一专业代码讲解辅导答辩、模拟答辩演练、和理解代码逻辑思路。 特色服务内容：答辩必过班 （全程一对一技术交流，帮助大家顺利完成答辩，小白必选） 全网粉丝50W+，累计帮助2000+完成优秀毕设 🍅文末获取源码🍅 感兴趣的可以先收藏起来，还有大家在毕设选题，

小白也能用！Hunyuan-MT-7B-WEBUI零基础翻译部署教程

小白也能用！Hunyuan-MT-7B-WEBUI零基础翻译部署教程 你是不是也遇到过这些情况： 想把一篇维吾尔语的政策文件快速转成中文，却卡在模型下载失败； 看到别人用AI翻译出流畅自然的西语新闻，自己照着GitHub文档配环境配了三天还报错“CUDA out of memory”； 听说有个叫“混元MT”的翻译模型很强，点开项目页第一行就是“需熟悉PyTorch、HuggingFace、Docker”，默默关掉了网页…… 别急——这次真不用懂代码，不用装依赖，不用查报错。 Hunyuan-MT-7B-WEBUI 镜像，就是专为“不会部署”的人设计的。 它把腾讯开源的最强民汉翻译模型（支持日法西葡维吾尔等38种语言互译），打包成一个“点开即用”的网页工具。你只需要三步：启动镜像 → 点个脚本 → 打开浏览器，就能开始翻译。 本文不讲原理、不列公式、不堆参数，只说你真正需要的操作步骤。全程用大白话，配真实截图逻辑（文字描述版），连Linux命令都给你写全了。哪怕你第一次听说“GPU”“Docker”“端口”

Mac上运行DeepSeek-OCR的完整方案｜基于DeepSeek-OCR-WEBUI镜像轻松部署

Mac上运行DeepSeek-OCR的完整方案｜基于DeepSeek-OCR-WEBUI镜像轻松部署 你是不是也遇到过这种情况：看到 DeepSeek-OCR 这个强大的开源OCR模型火了，想在自己的Mac上试试，结果发现官方只提供了基于CUDA和Linux的推理脚本？一通折腾后才发现根本跑不起来。别急，这不是你的问题，而是当前很多大模型默认“为NVIDIA显卡而生”的现实写照。 但好消息是——现在你完全可以在Mac上本地运行 DeepSeek-OCR，而且不需要懂太多技术细节。本文将带你通过 DeepSeek-OCR-WEBUI 镜像，实现一键部署、开箱即用的OCR体验。无论你是M1/M2/M3芯片的Apple Silicon用户，还是Intel处理器的老款Mac，都能顺利运行。 整个过程只需三步：拉取镜像 → 启动服务 → 浏览器访问。无需手动配置环境、不用修改代码、不碰命令行难题。尤其适合希望快速验证效果、保护数据隐私、或用于文档数字化、票据识别等实际场景的用户。 1. 为什么要在Mac上运行DeepSeek-OCR？ 1.1 OCR的实际价值不容忽视 光学字符识别

nodejs： 能在线编辑 Markdown 文档的 Web 服务程序，更多扩展功能

承上一篇：nodejs： 能在线编辑 Markdown 文档的 Web 服务程序 如果需要更多 Markdown 扩展（如表格、数学公式）等功能，怎样编写？ 已经采用了移除服务端 mermaid 依赖的方案，现在想要为这个 Markdown 编辑器扩展表格、数学公式等功能，继续完善代码，添加这些常用的 Markdown 扩展能力，同时保持代码的简洁和可维护性。 实现思路 1. 表格支持：marked 本身已内置 GitHub 风格的表格解析，只需确保启用相关配置 2. 数学公式支持：集成 katex 或 mathjax 来渲染 LaTeX 格式的数学公式 3. 代码高亮：添加 highlight.js 增强代码块的语法高亮效果 4.