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

AI 写作（八）实战项目一：自动写作助手（8/10）

AI 写作（八）实战项目一：自动写作助手（8/10）

一、项目背景与需求分析 （一）写作需求的多样化 在互联网普及的今天，人们对写作的需求呈现出前所未有的多样化态势。无论是学术论文、新闻报道，还是社交媒体的动态更新、网络小说的创作，都离不开高质量的写作。以学术研究为例，学者们需要撰写严谨的论文来阐述自己的研究成果，这不仅要求语言准确、逻辑严密，还需要大量的文献引用和数据分析。而对于新闻工作者来说，快速、准确地报道时事新闻是他们的首要任务，这就需要在短时间内创作出简洁明了、富有吸引力的新闻稿件。此外，社交媒体的兴起使得每个人都成为了内容创作者，人们希望通过精彩的文字来展示自己的生活、观点和创意。然而，传统的写作方式往往需要耗费大量的时间和精力，从构思、收集资料到撰写、修改，每一个环节都可能面临着各种挑战。面对如此繁重的写作任务，很多人常常感到力不从心，迫切需要一种更加高效、便捷的写作方式。 （二）人工智能技术的发展 近年来，人工智能技术尤其是自然语言处理技术取得了突破性的进展，为自动写作助手的出现提供了强大的技术支持。自然语言处理技术通过对大量文本数据的深度学习，能够掌握语言的规律，理解语义、语法和语境，从而实现自动生成文章、故
文心一言开源版部署及多维度测评实例

文心一言开源版部署及多维度测评实例

文章目录 * 第一章 文心一言开源模型简介 * 第二章 模型性能深度实测 * 2.1 通用能力基准测试 * 2.1.1 文本生成质量 * 2.1.2 数学推理能力 * 2.2 极端场景压力测试 * 2.2.1 高并发性能 * 2.2.2 长上下文记忆 * 第三章 中文特色能力解析 * 3.1.2 文化特定理解 * 3.2 行业术语处理 * 3.2.1 法律文书解析 * 3.2.2 医疗报告生成 * 第四章 开源生态建设评估 * 4.1 模型可扩展性验证 * 4.

解决llama.cpp项目Vulkan后端编译难题：从环境配置到实战修复

解决llama.cpp项目Vulkan后端编译难题：从环境配置到实战修复 【免费下载链接】llama.cppPort of Facebook's LLaMA model in C/C++ 项目地址: https://gitcode.com/GitHub_Trending/ll/llama.cpp 你是否在编译llama.cpp的Vulkan后端时遇到过"找不到Vulkan库"或"编译失败"的问题？本文将系统梳理Windows、Linux和Docker环境下的完整解决方案，帮助你顺利启用GPU加速功能。读完本文后，你将掌握：Vulkan SDK的正确配置方法、常见编译错误的诊断流程、跨平台构建脚本编写，以及性能验证技巧。 Vulkan后端编译环境准备 Vulkan作为llama.cpp支持的GPU加速后端之一，需要特定的开发环境配置。官方文档docs/build.

撰写‘Stable Diffusion’文生图联动IndexTTS文生音工作流

构建“图文音”一体化生成工作流：Stable Diffusion 与 IndexTTS 的协同实践 在短视频日更、虚拟人直播带货、AI动画批量生成成为常态的今天，内容创作者面临一个看似简单却长期难以解决的问题：如何让画面里的人物“说人话”？这里的“说人话”，不只是语音通顺，更是指声音与形象匹配、情绪一致、节奏同步——真正像一个人在说话。 传统流程中，图像靠画师或文生图模型生成，配音则依赖真人录制或通用TTS合成。结果往往是：嘴型对不上发音节奏，角色前一秒温柔甜美，后一秒变成东北大叔；旁白语气平淡如机器朗读，完全无法呼应剧情张力。这些问题不仅拉低作品质感，更让自动化生产止步于“半自动”。 而如今，随着 Stable Diffusion 和 IndexTTS 2.0 这类高可控性开源模型的成熟，我们终于有机会构建一条真正意义上的“端到端视听内容生成链路”：从一段文本剧本出发，自动生成角色画面、匹配音色、驱动情感语调，并精确对齐音画时序。这条路径的核心，