跳到主要内容
本页面由机器自动翻译，可能包含错误。 查看英文原文

JavaScript 指南

使用我们的 JavaScript SDK，你可以将触觉功能集成到你的 JS/TS 项目中。同时也支持 TypeScript 的类型系统和 ESM。

  1. 安装软件包
  2. 设置触觉环境

要求​

  • Node.js（推荐使用最新的 LTS 版本）
  • OS: Windows 10/11 (x64), macOS (Apple Silicon)
  • 已安装并正在运行 bHaptics Player
  • 与你的项目对应的已部署 触觉应用程序
    • 触觉应用的 App ID 和 API Key
备注

tact-js 仅在浏览器中运行。请在通过 Vite 等工具打包的 Web 应用中使用它。

About haptic application

You can create and manage haptic apps in Developer Portal, a web-based tool.

If you're unfamiliar with haptic apps or haven't created one yet, please follow the Portal guide before proceeding.

Before linking a haptic app to your game project, make sure the haptic app meets the following requirements:

  • At least one haptic event must be created.
  • API Key must be generated.
    • There is no API Key by default. To generate one, go to the "API Key" tab and click "New" button.
  • Haptic app must be deployed
    • If you see "Deploy Now" button in the upper right corner, click it to deploy your haptic app. Otherwise, if you can see "Up to date", it means that the latest haptic app has already been deployed.

Also, link process requires App ID and API Key. Go to the "Settings" tab, and check the App ID and API Key.

Check app ID, API key at the settings tab in Portal

安装​

npm install tact-js

导入软件包​

import Tact from "tact-js";

排除以进行优化​

如果你使用 Vite，请在你的 Vite 配置文件中添加以下内容：

vite.config.js
export default defineConfig({
  // ...
  optimizeDeps: {
    exclude: ['tact-js'],
  },
  // ...
});

设置触觉环境​

在使用任何与触觉相关的函数之前，你需要将触觉应用关联到你的项目，并初始化触觉环境。

为此，你需要触觉应用的 App ID 和 API Key。你可以从 bHaptics Developer Portal 获取它们。

初始化​

  • 将 "your_app_id" 和 "your_api_key" 替换为你自己的 App ID 和 API Key。
  • 在启动 JavaScript 项目之前，请确保 bHaptics Player 应用程序正在你的计算机上运行。
import Tact from "tact-js";

const initTact = async () => {
  const result = await Tact.init({
    appId: "your_app_id",
    apiKey: "your_api_key",
  });

  console.log(result ? "Connection Success!" : "Connection Failed...");
}

延伸阅读​

现在你已经准备好使用 bHaptics 触觉功能了！若要在项目中播放触觉，请访问我们的 JavaScript 参考，或参考下方的完整示例代码。

如果你在使用此库时遇到问题，请查看故障排除。

完整示例代码​

由于 tact-js 在浏览器中运行，下面的示例使用了 Vite。在打开页面之前，请确保 bHaptics Player 正在运行。

index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bHaptics tact-js example</title>
  </head>
  <body>
    <button id="play">Play haptic</button>
    <pre id="log"></pre>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
src/main.js
import Tact, { PositionType } from "tact-js";

// Replace with your App ID and API Key from the bHaptics Developer Portal.
const APP_ID = "your_app_id";
const API_KEY = "your_api_key";

const logEl = document.getElementById("log");
const log = (msg) => {
  console.log(msg);
  logEl.textContent += msg + "\n";
};

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

let ready = false;

// 1. Initialize on load. bHaptics Player must already be running.
const initialize = async () => {
  log("Initializing bHaptics SDK...");
  ready = await Tact.init({ appId: APP_ID, apiKey: API_KEY });
  log(ready ? "Connected to bHaptics Player." : "Failed to connect. Is bHaptics Player running?");

  if (ready) {
    const devices = await Tact.getConnectedDevices();
    log(`Connected devices: ${JSON.stringify(devices)}`);
  }
};

// 2. Run a short haptic sequence when the button is clicked.
const runDemo = async () => {
  if (!ready) {
    log("SDK is not ready yet.");
    return;
  }

  // Play dot pattern — first 16 of the TactSuit Pro's 32 motors.
  log("- Playing dot pattern");
  const motorValues = [...Array(16).fill(50), ...Array(16).fill(0)];
  await Tact.playDot({ position: PositionType.Vest, motorValues, duration: 2000 });
  await sleep(2500);

  // Play path pattern.
  log("- Playing path pattern");
  await Tact.playPath({
    position: PositionType.Vest,
    x: [0.2, 0.4, 0.6, 0.8],
    y: [0.2, 0.8, 0.2, 0.8],
    intensity: [80, 60, 80, 60],
    duration: 3000,
  });
  await sleep(3500);

  // Play glove waveform on both hands (if connected).
  log("- Testing glove haptics");
  const motors = new Int32Array([100, 0, 0, 0, 0, 100, 0, 100]);
  const playtimes = new Int32Array([8, 0, 0, 0, 0, 1, 0, 4]);
  const shapes = new Int32Array([2, 0, 0, 0, 0, 0, 0, 0]);
  await Tact.playGlove({ position: PositionType.GloveL, motors, playtimes, shapes, repeatCount: 1 });
  await sleep(1000);
  await Tact.playGlove({ position: PositionType.GloveR, motors, playtimes, shapes, repeatCount: 1 });
  await sleep(1000);

  await Tact.stopAll();
  log("Demo completed");
};

document.getElementById("play").addEventListener("click", runDemo);

initialize();

如果你想探索更多示例，请查看我们官方 GitHub 仓库的 README。