WavedashDocs

Three.js

Ship Three.js games to Wavedash with your existing bundler and entry HTML.

View the example on GitHub

Three.js games are already browser-native, so there is no SDK package to install. Wavedash injects WavedashJS before your code runs.

Setup

Point upload_dir in wavedash.toml at your build output. Vite, Webpack, Rollup, and esbuild all work — just emit static files with an HTML entry point.

await WavedashJS.init({ debug: true });
const user = WavedashJS.getUser();
const board = await WavedashJS.getLeaderboard("high-scores");

Entry point

For Three.js builds, entrypoint should usually be the HTML file that boots your app, relative to upload_dir — typically index.html. That file, or the module it loads, must:

  1. Render into #wavedash-target
  2. Call WavedashJS.updateLoadProgressZeroToOne(value) during loading
  3. Call WavedashJS.loadComplete() when the player can interact
(async function () {
  const target = document.getElementById("wavedash-target");
  const canvas = document.createElement("canvas");
  canvas.style.width = "100%";
  canvas.style.height = "100%";
  target.appendChild(canvas);

  WavedashJS.updateLoadProgressZeroToOne(0.4);
  await startGame(canvas);
  WavedashJS.updateLoadProgressZeroToOne(1.0);
  WavedashJS.loadComplete();
})();

wavedash.toml

game_id = "YOUR_GAME_ID_HERE"
upload_dir = "./dist"
entrypoint = "index.html"

SDK features

Once initialized, WavedashJS exposes leaderboards, achievements, stats, and user data:

const user = WavedashJS.getUser();

await WavedashJS.uploadLeaderboardScore("high-scores", score, true);

WavedashJS.setAchievement("first_win");
await WavedashJS.storeStats();