3js-game-framework is a lightweight and flexible framework designed to streamline the creation of 3D games and interactive applications using Three.js
npm install 3js-game-frameworkcli
https://www.npmjs.com/package/3js-game-framework
`
Install
`bash
npm install 3js-game-framework
`
Define your custom objects by implementing _GameObject_ Interface
`javascript
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
`javascript
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();
``