https://github.com/megavr/ecsy-babylon

babylon.js ecsy binding and helpers
https://github.com/megavr/ecsy-babylon

babylonjs ecsy typescript webgl webvr webxr

Last synced: about 1 month ago
JSON representation

babylon.js ecsy binding and helpers

• Host: GitHub
• URL: https://github.com/megavr/ecsy-babylon
• Owner: megavr
• License: mit
• Created: 2019-10-30T01:30:52.000Z (about 5 years ago)
• Default Branch: dev
• Last Pushed: 2022-07-20T16:55:50.000Z (over 2 years ago)
• Last Synced: 2024-09-26T20:55:21.831Z (about 2 months ago)
• Topics: babylonjs, ecsy, typescript, webgl, webvr, webxr
• Language: TypeScript
• Size: 1.16 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ecsy-babylon

babylon.js ecsy binding and helpers

### Getting Started

1. Add script tags of Babylon.js, ecsy and ecsy-babylon.

2. Add a canvas tag as container.

3. Build a basic scene.

```javascript

  

    

    

    

  

  

    

    

      /** Step 1 - Preparation */

      // create a ECSY world object

      const world = new ECSY.World();

      // register necessary systems from ecsy-babylon(global name: EB)

      world

        .registerSystem(EB.GameSystem)

        .registerSystem(EB.TransformSystem)

        .registerSystem(EB.CameraSystem)

        .registerSystem(EB.MeshSystem)

        .registerSystem(EB.InputSystem);

      

      /** Step 2 - Start the game engine */

      // get canvas element

      const canvas = document.getElementById("renderCanvas");

      // get GameSystem object

      const game = world.getSystem(EB.GameSystem);

      // start GameSystem by providing canvas object

      game.start(canvas);

      

      /** Step 3 - Start to build your scene */

      // add a scene

      const scene = world.createEntity().addComponent(EB.Scene);

      // add a camera

      const camera = world.createEntity()

        .addComponent(EB.Transform)

        .addComponent(EB.Camera);

      // up camera to height of eyes at standing human

      camera.getMutableComponent(EB.Transform).position.y = 1.7;

      // add a box

      const box = world.createEntity()

        .addComponent(EB.Transform)

        .addComponent(EB.Mesh);

      // put box in front of camera

      box.getMutableComponent(EB.Transform).position.z = 3;

      

      /** Step 4 - Add some interaction to your scene */

      // add keyboard input

      world.createEntity().addComponent(EB.Input, { onKey: onKey });

      // rotate box when press R/r key

      function onKey(key, down) {

        if (down) {

          if (key === "R" || key === "r") {

            box.getMutableComponent(EB.Transform).rotation.y += 30;

          }

        }

      }

    

  

```

### Examples

https://megavr.github.io/ecsy-babylon-examples/