当前位置：首页 > news >正文

Rokid JSAR开发：开发实现小游戏语音控制

news 2025/10/11 9:16:33

部署环境
实战开发：分步骤实现：搭积木小游戏
- 搭建基础项目结构
- 积木逻辑
- 语音控制
总结

前言：Rokid JSAR 平台以其轻量化、高效率、易上手的特性，让开发者无需深入钻研复杂的底层技术，就能快速投身于 AR 应用的开发工作。尤其是在 3D 小游戏开发领域，Rokid JSAR 平台提供了丰富的 API 接口、便捷的开发工具以及完善的技术支持，极大地降低了 3D 小游戏开发的门槛，让更多开发者有机会将自己的创意转化为实际的产品。
从开发环境搭建、游戏场景设计、模型制作，到交互逻辑实现、游戏测试与优化等方面，为开发者提供全面、细致、实用的开发指导。我们希望通过这些内容，能够帮助更多开发者顺利开展 Rokid JSAR 3D 小游戏开发工作，共同推动 AR 游戏行业的繁荣与发展，为用户带来更多优质的 AR 游戏产品。

这篇文章就想记录下这次 Rokid JSAR 开发体验的全过程，如需了解更多详细的过程可前往

Rokid开发者论坛
JSAR官方手册

在上一篇介绍Rokid 与 JSAR 中通过官方网站与文档见识到了许多Rokid的许多产品，就想着能不能让我开发的JSAR 3D模型与小游戏通过与Rokid产品的联动实现一个更加便捷更加智能的一种方式增强体验，因此我就想试一试能不能通过语音来进行游戏的体验！

部署环境

部署环境的配置的话，我们在上一篇已经介绍的很详细了，在今天小游戏开发的话，我们主要是使用VSCode与JSAR DevTools进行开发，3D引擎采用Babylon.js让我们开发的程序能对接上Rokid硬件设备，实现智能操作

同时，为了实现的是的快速运行，我们同样的在VSCode 中安装好我们需要的Live Server来帮助我们快速的启动好服务，准备工作完成！

实战开发：分步骤实现：搭积木小游戏

在本次开发体验中，我们准备实现一个简易3D小游戏来帮助开发者们更深入的了解好Rokid，我们游戏的话主要是一个搭积木的操作，玩家只需要控制好上方积木块的落点和旋转方向让其落地后慢慢搭建

常规玩法：

鼠标: 旋转视角 / 缩放

方向键: 移动积木

空格键: 放置积木

R键: 旋转积木

🎙️ 语音控制: 左 / 右 / 前 / 后 / 放置 / 清空 / 旋转
🧠 键盘语音模拟: J=左, L=右, K=放置

搭建基础项目结构

然后编写index.html的基础框架，核心是 “初始化 JSAR→引入游戏逻辑”：

<body><div id="gameContainer"></div><div class="game-ui"><h3>搭积木游戏</h3><p>分数: <span id="score">0</span></p><button class="button" id="rotateBtn">旋转积木</button><button class="button" id="clearBtn">清除所有</button></div><div class="controls"><p>鼠标: 旋转视角 / 缩放<br>方向键: 移动积木<br>空格键: 放置积木<br>R键: 旋转积木<br>🎙️ 语音控制: 左 / 右 / 前 / 后 / 放置 / 清空 / 旋转</p></div><div class="ai-panel" id="aiPanel"><h4>AI 助手提示</h4><div id="aiLog">正在初始化 3D 世界...</div></div>

积木逻辑

音效播放：在 Rokid 设备上，需确保 “媒体权限” 已开启

/* ------------------------------------------🧱 积木逻辑-------------------------------------------*/function spawnNewBlock() {const blockTypes = [new THREE.BoxGeometry(2, 2, 2),new THREE.BoxGeometry(3, 1, 1),new THREE.BoxGeometry(2, 1, 2),new THREE.BoxGeometry(1, 3, 1)];const colors = [0xff6b6b, 0x4ecdc4, 0x45b7d1, 0xffa07a, 0x98d8c8, 0xf5e960];const color = colors[Math.floor(Math.random() * colors.length)];const geometry = blockTypes[Math.floor(Math.random() * blockTypes.length)];const material = new THREE.MeshStandardMaterial({ color, emissive: 0x111111, roughness: 0.6 });currentBlock = new THREE.Mesh(geometry, material);currentBlock.castShadow = true;currentBlock.position.set(0, 10, 0);currentBlock.userData.size = geometry.parameters;scene.add(currentBlock);aiLog("🧩 新积木生成，颜色代码: #" + color.toString(16));}function rotateCurrentBlock() {if (currentBlock) {currentBlock.rotation.y += Math.PI / 2;aiLog("↻ 积木旋转 90°");}}function placeBlock() {if (currentBlock) {blocks.push(currentBlock);addPlacementEffect(currentBlock.position);currentBlock = null;score += 10;document.getElementById('score').textContent = score;aiLog("✅ 成功放置积木，当前得分：" + score);setTimeout(spawnNewBlock, 500);}}function clearAllBlocks() {blocks.forEach(b => scene.remove(b));blocks = [];if (currentBlock) scene.remove(currentBlock);currentBlock = null;score = 0;document.getElementById('score').textContent = score;aiLog("🧹 所有积木已清除");spawnNewBlock();}

同时，在积木逻辑上，我们也进行了边界处理和一些碰撞处理
UI 与视觉优化
实战中不要忽略 “简单 UI 提升体验”，添加基础样式，5 分钟搞定：

<style>body { margin: 0; overflow: hidden; font-family: 'Microsoft YaHei', sans-serif; background: radial-gradient(circle at 50% 20%, #222 0%, #000 100%); }#gameContainer { width: 100vw; height: 100vh; }.game-ui {position: fixed; top: 20px; left: 20px;background: rgba(0,0,0,0.7); color: white;padding: 15px; border-radius: 8px; z-index: 100; width: 180px;box-shadow: 0 0 8px rgba(255,255,255,0.2);}.controls {position: fixed; bottom: 20px; left: 50%;transform: translateX(-50%);background: rgba(0,0,0,0.7); color: white;padding: 10px 20px; border-radius: 8px; z-index: 100;text-align: center; font-size: 14px;}.button {background: #4CAF50; border: none; color: white;padding: 8px 16px; margin: 5px; width: 100%;border-radius: 4px; cursor: pointer;}.button:hover { background: #45a049; }.ai-panel {position: fixed; top: 20px; right: 20px;background: rgba(255,255,255,0.05);border: 1px solid rgba(255,255,255,0.1);color: #9ee7ff; font-size: 13px;padding: 10px; width: 250px; height: 180px;overflow-y: auto; border-radius: 8px;}.ai-panel h4 { margin: 0 0 8px 0; font-weight: bold; }</style>

语音控制

为了测试语音控制的成功与否，我们在游戏的设计和开发上并没有使用多少很复杂的东西，重点还是强调在这么一个与Rokid相关的一个语音控制上，因为JSAR提供了rokid.voice API用于语音识别，所以我们可以直接进行一个调用

/* ------------------------------------------🗣️ Rokid 语音控制-------------------------------------------*/function setupVoiceControl() {if (typeof rokid !== 'undefined' && rokid.voice) {aiLog("🎙️ Rokid Voice API 已启用");rokid.voice.on('command', (cmd) => {const command = cmd.trim();if (!currentBlock) return;switch(command) {case '左': currentBlock.position.x -= 1; break;case '右': currentBlock.position.x += 1; break;case '前': currentBlock.position.z -= 1; break;case '后': currentBlock.position.z += 1; break;case '旋转': rotateCurrentBlock(); break;case '放置': case '放下': placeBlock(); break;case '清空':case '重置': clearAllBlocks(); break;default: aiLog("❓ 未识别指令: " + command);}});} else {aiLog("⚠️ Rokid Voice API 不可用，语音控制已禁用");}}

键盘模拟Rokid控制

/* ---------- 键盘语音模拟 ---------- */
function setupKeyboardVoiceSim() {aiLog("🎧 键盘语音模拟已启用 (J/L/K)");window.addEventListener('keydown', (event) => {if (!currentBlock) return;const key = event.key.toLowerCase();if (key === 'j') {aiLog("🎤 模拟语音: 左");currentBlock.position.x -= 1;} else if (key === 'l') {aiLog("🎤 模拟语音: 右");currentBlock.position.x += 1;} else if (key === 'k') {aiLog("🎤 模拟语音: 放置");placeBlock();}});
}

我们发现我们能使用通过模拟的方法让我们的积木进行一个移动，说明我们开发的小游戏能通过官方的API实现一个智能语音的操作，让我们的硬件设备能够进行游戏操作的控制！

从 “零基础准备” 到 “设备端可运行游戏”，Rokid JSAR 以 “轻量化 Web 技术栈” 为核心优势，让 3D AR 小游戏开发突破了传统引擎的高门槛限制。通过 “AR 空间搭积木” 的实战开发，我们不仅掌握了 JSAR 开发的完整流程，更清晰了 AR 游戏与普通 3D 游戏的核心差异 ——“虚拟内容与真实空间的融合” 与 “自然手势交互的落地” 。

总结

相比传统 3D 游戏，JSAR 3D 游戏开发需额外关注 “真实环境适配”，这也是决定用户体验的关键：

空间适配：需考虑真实场景的多样性（如桌面大小、光线强弱），通过minSize限制平面识别范围，避免模型 “悬浮” 或 “穿模”；
交互适配：放弃 “键盘 / 手柄” 依赖，转向 “手势 / 凝视” 等自然交互，需在调试中反复校准手势灵敏度（如 Rokid 设备的手势校准功能）；
性能适配：AR 眼镜算力低于电脑，需控制 “同时加载的模型数量”（如本次实战限制 3 个地鼠），且避免复杂动画效果，优先保证流畅度。

对于开发者而言，Rokid JSAR 的核心价值在于 “低门槛切入 AR 开发” —— 只需掌握 HTML/CSS/JavaScript，即可调用空间定位、3D 渲染、手势交互等核心 AR 能力，无需深入底层技术。而对于用户，基于 JSAR 开发的 3D 小游戏，能真正实现 “虚拟内容融入真实生活” 的沉浸式体验，这也是 AR 娱乐的未来方向。

每次通过官方手册进行Rokid 与 JSAR的开发总让我学到了很多东西，每一次体验都是一次全新旅程！

查看全文

http://www.hskmm.com/?act=detail&tid=28418