Nothing showing up on webpage and everything is just blue

Questions
1

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();
2

Aren’t you missing a camera ? :grin:

4 Likes