@7y1o/webmarine-core

WebMarine Core

Core utils for WebMarine game engine.

IMPORTANT NOTE

WebMarine Core is designed for game development only, so it is not at all suitable for embedding the canvas in an existing web page.

Installation

First you need to install the package:

npm i @7y1o/webmarine-core

Next, in the main script (index.js or main.js, for example) write the following lines:

import {WMGameEngine} from "@7y1o/webmarine-core";

// ^ - import, initialize - v
const engine = new WMGameEngine();

Game engine will clear document and place canvas automatically. Now you can use our documentation for the next steps. Good luck! :)

Examples

Simple white cube with rotating animation:

import {WMRenderEngine, WMEntityUtils} from "@7y1o/webmarine-core";

// Creating game engine instance
const engine = new WMRenderEngine();

// Creating the cube and add it to the scene
const cube = WMEntityUtils.mesh.cube();
engine.scene.add(cube);

// Configuring camera parameters
engine.camera.position.set(5, 5, 5);
engine.camera.lookAt(0, 0, 0);

// Set cube rotation
engine.addUpdate(dt => {
    cube.rotation.x += .1 * dt;
    cube.rotation.z += .1 * dt;
});

// Starting render
engine.prepareAndStart();

---

Loading 3d model

import {WMRenderEngine, WMEntityUtils} from "@7y1o/webmarine-core";

// Do actions from previous example with init, camera and render start
const engine = new WMRenderEngine();
engine.currentCamera.position.set(5, 5, 5);
engine.currentCamera.lookAt(0, 0, 0);
engine.prepareAndStart();

// Loading glTF model and place it on the scene
let model = null; 
WMEntityUtils.mesh.gltf('sample-model.gltf').then(entity => {
    model = entity;
    engine.currentScene.add(model); 
});

---

Creating PBR material

import {WMRenderEngine, WMEntityUtils} from '@7y1o/webmarine-core';

// Do action from previous example again
const engine = new WMRenderEngine();
engine.currentCamera.position.set(5, 5, 5);
engine.currentCamera.lookAt(0, 0, 0);
engine.prepareAndStart();

// Creating mesh and PBR material for it with default parameters
const mesh = WMEntityUtils.mesh.sphere();
mesh.material = WMEntityUtils.material.pbr();
engine.currentScene.add(mesh);

// Adding light
const light = WMEntityUtils.light.directional();
light.position.add(0, 5, 0);
engine.currentScene.add(light);

---

Version list

• 0.1.4:

  • Added OOT function (out of time breaking)
  • Optimized instance checking for PerspectiveCamera
  • Fixed bug with missing TypeScript files (I just forgot to add them to the package)
  • Added postprocessing passes support

• 0.1.3:

  • Guys, I don't remember what was there. Okay, let it be that the history of WebMarine began with her...