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

Package detail