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

什么是NVIDIA Isaac Sim WebRTC Streaming Client？

NVIDIA Isaac Sim WebRTC Streaming Client是NVIDIA为Isaac Sim打造的远程串流客户端，基于WebRTC协议，可让用户在无高性能GPU的设备上远程访问运行于云端或工作站的Isaac Sim（含无头模式），实现低延迟交互与图形化界面显示，是机器人仿真远程协作与开发的核心工具。以下从核心特性、运行条件、使用流程、关键配置与常见问题等方面详细介绍： 核心定位与优势 * 核心功能：将Isaac Sim的图形界面、物理仿真画面与交互操作远程串流至本地，支持模型编辑、场景调试、机器人控制等全流程操作，无需本地渲染能力。 * 核心优势 * 低延迟传输：WebRTC协议优化实时音视频流，适配机器人仿真的实时交互需求。 * 跨平台兼容：支持Linux、Windows、macOS客户端，适配主流桌面系统。 * 适配无头模式：完美对接Isaac Sim headless实例，适合云端/服务器部署场景。 * 高安全性：通过加密传输与端口隔离，保障远程访问安全。 运行要求 1. 服务端（Isaac Sim 侧）

CRMEB 标准版系统（PHP）- 前端多语言开发指南

一、多语言应用的典型场景 前端多语言支持通常出现在以下类型的组织或项目中：跨国公司、电商平台、跨文化交流平台、开源项目、面向全球用户的产品等等。在这些场景中，前端需要支持多种语言，如英语、中文、日语、韩语等，以更好地服务不同地区的用户。 二、什么是国际化（i18n）？ 国际化（Internationalization，简称 i18n）是指软件设计时使其能够轻松适应不同语言和地区的过程。i18n 这个缩写中，“i” 和 “n” 分别是单词的首尾字母，中间的 “18” 表示这两个字母之间的字符数。 通俗来说，i18n 就是让一个页面能够根据用户设置切换显示不同语言内容的能力。 三、实现多语言功能的常见方式 1. 多语言数据支持 提供足够的语言数据集，包含不同语言的词汇、语法规则、翻译数据等，以支持不同语言的理解和生成，这是实现多语言能力的基础。 2. 机器翻译技术 使用机器翻译技术将内容或翻译成不同语言，以支持多语言交互，这需要较强的机器翻译模型和系统。
前端八股文面经大全：MetaAPP前端一面（2026-03-03）·面经深度解析

前端八股文面经大全：MetaAPP前端一面（2026-03-03）·面经深度解析

前言 大家好，我是木斯佳。 在这个春节假期，当大家都在谈论返乡、团圆与休息时，作为一名技术人，我的思考却不由自主地转向了行业的「冬」与「春」。 相信很多人都感受到了，在AI浪潮的席卷之下，前端领域的门槛在变高，纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享，如今也沉寂了许多。但我们都知道，市场的潮水退去，留下的才是真正在踏实准备、努力沉淀的人。学习的需求，从未消失，只是变得更加务实和深入。 这个专栏的初衷很简单：拒绝过时的、流水线式的PDF引流贴，专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上，尝试从面试官的角度去拆解问题背后的逻辑，而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招，目标是中大厂还是新兴团队，只要是真实发生、有价值的面试经历，我都会在这个专栏里为你沉淀下来。 温馨提示：市面上的面经鱼龙混杂，甄别真伪、把握时效，是我们对抗内卷最有效的武器。 在这个假期，让我们一起充电，为下一个技术春天做好准备。 面经原文内容 📍面试公司：MetaAPP
百度天气：空气质量WebGIS可视化的创新实践 —— 以湖南省为例

百度天气：空气质量WebGIS可视化的创新实践 —— 以湖南省为例

目录 前言 一、空气质量展示需求 1、满城火辣味周末 2、空气质量状况 二、WebGIS展示百度天气 1、关于空气质量等级 2、数据查询实现 3、Leaflet集成百度空气质量 三、成果展示 1、整体展示 2、中、重污染地区 3、低、优质地区 4、污染严重前10区县 5、质量优前10区县 四、总结 前言         在当今数字化时代，地理信息系统（GIS）技术与网络技术的深度融合，催生了 WebGIS 这一强大的信息展示与分析平台。它能够将复杂的空间数据以直观、交互的方式呈现给用户，极大地提高了信息的可理解性和可用性。空气质量作为与人们生活息息相关的重要环境指标，其数据的可视化呈现对于公众健康、环境管理和决策支持都具有极为重要的意义。基于百度天气开展空气质量 WebGIS 可视化实践，正是这一领域创新探索的生动体现。