Godot Web Bridge

A separate 3D application with a shared browser protocol

This page is a prototype for embedding a separately built Godot Web application inside HASAI 3D. Godot remains responsible for the 3D viewport and object interaction, while the website can provide controls, pricing, customer workflows, and other surrounding product logic.

Bidirectional prototype

Godot Web ↔ HASAI 3D

The Godot application owns the 3D interaction. This website owns the surrounding interface and receives structured selection messages through the browser message API.

Checking for the Godot Web export…

Website → Godot

Select an object from the parent website.

Godot → Website

Selected in Godot: Cube

Final message contract

The integration uses same-origin window.postMessage() events with a small framework-independent envelope. The parent targets window.location.origin, and both sides validate the message source, event type, and object name. The only selectable object values are Cube, Sphere, and Cylinder.

Website → Godot:


{
  "source": "website",
  "type": "select_object",
  "payload": {
    "object": "Sphere"
  }
}

Godot → Website:


{
  "source": "godot",
  "type": "selection_changed",
  "payload": {
    "object": "Sphere"
  }
}

The website sends select_object when one of its controls is clicked. Godot applies that selection in the 3D scene. When the selection changes in Godot, it sends selection_changed to window.parent; the website accepts it only from the embedded iframe and the expected origin, then updates its displayed state.

Installing the Godot export

Copy the complete Godot Web export — including index.html, JavaScript, WebAssembly, game data, and related assets — into apps/hasai3d/public/godot/primitive-objects/. The export should keep its generated relative paths intact. No Godot source files belong in this Next.js application.

The Godot source project remains separate from this Next.js application. Only its generated Web export is hosted here.