3js-game-framework

3js-game-framework is a lightweight and flexible framework designed to streamline the creation of 3D games and interactive applications using Three.js. It provides an easy-to-use architecture for managing game objects, updating game states, and handling the animation loop. With built-in support for object management, dynamic updates, and a clear game lifecycle, this framework helps developers focus on creating engaging 3D experiences without the boilerplate setup.

Key features include:

• A TJSGame class for managing the game lifecycle (start, update, end).
• GameObject management with a consistent interface for custom objects.
• A built-in animation loop to ensure smooth, continuous updates, which can be disabled as well.
• Easy integration with Three.js for rendering 3D scenes and objects.
• Simple methods to add, update, and remove game objects dynamically.
• Basic extendable Game Objects like TJSBox, TJSPlane, TJSSphere.
• Typescript supported

Whether you're building a simple 3D game or a more complex interactive experience, 3js-game-framework provides a solid foundation to jumpstart your development.

Usage

Npm URL

https://www.npmjs.com/package/3js-game-framework

Install

npm install 3js-game-framework

Define your custom objects by implementing GameObject Interface

import * as THREE from "three";
import { TJSGame, GameObject } from "3js-game-framework";

export class MyCustomObject extends GameObject {
  game: TJSGame;
  mesh: THREE.Mesh;

  constructor(tjsgame: TJSGame) {
    this.tjsgame = game;
  }

  start(tjsgame: TJSGame) {
    this.game = tjsgame;
    const radiusTop = 0.2;
    const radiusBottom = 0.2;
    const height = 0.05; // Very thin to resemble a disk
    const radialSegments = 32;

    const geometry = new THREE.CylinderGeometry(
      radiusTop,
      radiusBottom,
      height,
      radialSegments
    );
    const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
    this.mesh = new THREE.Mesh(geometry, material);
  }

  update() {
    this.mesh?.rotateZ(0.01);
  }

  end() {
     if (this.mesh) {
      this.game.scene.remove(this.mesh);
      this.mesh.geometry.dispose();
      if (Array.isArray(this.mesh.material)) {
        this.mesh.material.forEach((material) => {
          (material as THREE.Material).dispose();
        });
      } else {
        (this.mesh.material as THREE.Material).dispose();
      }
    }
    this.mesh = undefined;
  }
}

Use the TJSGame class to manage your game objects

import * as THREE from "three";
import { TJSGame, TJSPlane } from "3js-game-framework";

class Game {
  tjsGame: TJSGame | null = null;

  constructor() {
    this.tjsGame = new TJSGame({
      camera: {
        position: [0, 10, 10],
        enableOrbitControls: true,
      },
    });
    this.tjsGame.camera.rotateX(-Math.PI / 4);

    this.tjsGame.addGameObject(new TJSPlane(this.tjsGame));
    this.tjsGame.addGameObject(new MyCustomObject(this.tjsGame));
  }
  start() {
    console.log("Game started!");
    this.tjsGame?.start();
  }
  stop() {
    console.log("Game stopped!");
  }
  reset() {
    console.log("Game reset!");
  }
}

const game = new Game();

// Start the game
game.start();