Nothing showing up on webpage and everything is just blue

Nothing showing up on webpage and everything is just blue. Here is my code (I’m trying to use the colyseus example):

import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector";
import {
  Engine,
  Scene,
  Vector3,
  Color3,
  StandardMaterial,
  Mesh,
  MeshBuilder,
} from "@babylonjs/core";
import * as Colyseus from "colyseus.js";

class App {
  constructor() {
    // create the canvas html element and attach it to the webpage
    var canvas = document.createElement("canvas");
    canvas.style.width = "100%";
    canvas.style.height = "100%";
    canvas.id = "gameCanvas";
    document.body.appendChild(canvas);

    var client = new Colyseus.Client("ws://localhost:2567");

    var playerEntities = {};

    var playerNextPosition = {};

    client.joinOrCreate("my_room").then(function (room: any) {
      console.log("Joined " + room.roomId);

      // listen for new players
      room.state.players.onAdd(function (player: any, sessionId: any) {
        console.log("new player", player, sessionId);

        var sphere = MeshBuilder.CreateSphere(`player-${sessionId}`, {
          segments: 8,
          diameter: 40,
        });

        playerNextPosition[sessionId] = sphere.position.clone();

        player.onChange(function () {
          playerNextPosition[sessionId].set(player.x, player.y, player.z);
        });

        var isCurrentPlayer = sessionId === room.sessionId;

        sphere.position.set(player.x, player.y, player.z);

        sphere.material = new StandardMaterial(`player-material-${sessionId}`);

        if (isCurrentPlayer) {
          let material = sphere.material as StandardMaterial;
          material.emissiveColor = Color3.FromHexString("#ff9900");
        } else {
          // other players are gray colored
          let material = sphere.material as StandardMaterial;
          material.emissiveColor = Color3.Gray();
        }
      });

      room.state.players.onRemove(function (player, sessionId) {
        playerEntities[sessionId].dispose();
        delete playerEntities[sessionId];
      });

      scene.onPointerDown = function (event, pointer) {
        if (event.button == 0) {
          const targetPosition = pointer.pickedPoint.clone();

          // Position adjustments for the current play ground.
          // Prevent spheres from moving all around the screen other than on the ground mesh.
          targetPosition.y = -1;
          if (targetPosition.x > 245) targetPosition.x = 245;
          else if (targetPosition.x < -245) targetPosition.x = -245;
          if (targetPosition.z > 245) targetPosition.z = 245;
          else if (targetPosition.z < -245) targetPosition.z = -245;

          // Send position update to the server
          room.send("updatePosition", {
            x: targetPosition.x,
            y: targetPosition.y,
            z: targetPosition.z,
          });
        }
      };
    });

    // initialize babylon scene and engine
    var engine = new Engine(canvas, true);
    var scene = new Scene(engine);

    var ground = MeshBuilder.CreatePlane("ground", { size: 500 }, scene);
    ground.position.y = -15;
    ground.rotation.x = Math.PI / 2;

    // scene.debugLayer.show();

    scene.registerBeforeRender(() => {
      for (let sessionId in playerEntities) {
        var entity = playerEntities[sessionId];
        var targetPosition = playerNextPosition[sessionId];
        entity.position = Vector3.Lerp(entity.position, targetPosition, 0.05);
      }
    });

    // run the main render loop
    engine.runRenderLoop(() => {
      scene.render();
    });
  }
}
new App();

Aren’t you missing a camera ? :grin:

4 Likes