Fix event handlers not registering when map is already loaded

[Copilot]

Event listeners (ObjectMouseOver, SelectedChange, etc.) only registered in map.on('load') callback. In React apps, Threebox often initializes after map is loaded, so the load event never fires and handlers never attach.

Changes

• Extract event handler setup into setupEventHandlers function bound to map context
• Check map.loaded() on init and call setup immediately if true, otherwise wait for load event
• Use map.once() instead of map.on() to auto-cleanup listener

// Before: only fires if 'load' event hasn't happened yet
this.map.on('load', function () {
  this.on('click', this.onClick);
  this.on('mousemove', this.onMouseMove);
  // ...
});

// After: runs immediately if map already loaded
const setupEventHandlers = function () {
  this.on('click', this.onClick);
  this.on('mousemove', this.onMouseMove);
  // ...
}.bind(this.map);

if (this.map.loaded()) {
  setupEventHandlers();
} else {
  this.map.once('load', setupEventHandlers);
}

Preserves original context binding where handlers run with this as map object.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Selecting 3d object seems not working on a React App</issue_title>
<issue_description>
Description
The events like ObjectMouseOver and SelectedChange are not firing when used in React App.

Code

  useEffect(() => {
    tbRef.current = window.tb = new Threebox(
      map,
      map.getCanvas().getContext("webgl"),
      {
        defaultLights: true,
        enableSelectingFeatures: true,
        enableSelectingObjects: true,
        enableDraggingObjects: true,
        enableRotatingObjects: true,
        enableTooltips: true,
      },
    );

    const sphere = tbRef.current
      .sphere({ color: "red", material: "MeshToonMaterial" })
      .setCoords([-122.434, 37.7353, 1]);
    sphere.addEventListener(
      "ObjectMouseOver",
      function (e: any) {
        console.log("ObjectMouseOver: " + e.detail.name);
      },
      false,
    );
    sphere.addEventListener(
      "ObjectMouseOut",
      function (e: any) {
        console.log("ObjectMouseOut: " + e.detail.name);
      },
      false,
    );
    tbRef.current.add(sphere);
  }, []);

</issue_description>

<agent_instructions>Please adhere to these core guidelines for this session:

• Do not alter or delete code unrelated to the bug definition, and do not modify line spacing unless explicitly instructed to do so.
• When editing code: (1) state any assumptions made, (2) create or run minimal tests where feasible, (3) produce ready-to-review diffs, and (4) follow repository style conventions.
• Apply best practices, such as the DRY (Don't Repeat Yourself) Principle and the Single Responsibility Principle (SRP).
• Avoid unnecessary complexity; solutions should remain as simple as possible.
• Before modifying any class that extends another, always review references to its definition and check the implementation of its base class.
• Begin with a concise checklist (3-7 bullets) of what you will do; keep items conceptual, not implementation-level.
  </agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Selecting 3d object seems not working on a React App #446

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.