DEV Community

loading...
Cover image for Taro – A Lightweight 3D Game Engine for the Web

Taro – A Lightweight 3D Game Engine for the Web

cloud9c profile image Cloud9c ・3 min read

Feel free to contribute on GitHub!

GitHub logo Cloud9c / taro

A lightweight 3D game engine for the web.

Taro is an Entity Component System (ECS) engine for web applications, built with three.js and cannon-es. Programming with an ECS can result in code that is more efficient and easier to extend over time.

Features

  • ⚛️ Physics - Full integration with a 3D rigid-body physics engine.
  • 🔌 Entity Component System - Write efficent and extendable code.
  • 🔊 Sound - 3D positional sounds built on the Web Audio API.
  • 📜 Scripts - Design game behaviors in JavaScript.
  • ⚡ Performance - Taro is a thin framework on top of three.js.

Getting started

Some common terms within Taro are:

  • entities: an object with a unique ID that can have multiple components attached to it.
  • components: different facets of an entity. ex: geometry, rigidbody, hit points.
  • scenes: a collection of entities and their components.
  • apps: the root container for scenes and other core classes.

Before we start

Before you can use taro.js, you need somewhere to display it:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My first taro.js app</title>
    <style>
      body { margin: 0; }
    </style>
  </head>
  <body>
    <script src="https://www.echou.xyz/taro/build/taro.min.js"></script>
    <script>
      // Our Javascript will go here.
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Creating an app

Let's start creating our first app and add the element to our HTML document:

var app = new TARO.App();
document.body.appendChild( app.domElement );
Enter fullscreen mode Exit fullscreen mode

Creating a scene

Scenes contain a set of entities:

var scene = new TARO.Scene();
app.setScene(scene);
Enter fullscreen mode Exit fullscreen mode

Creating components

Components are objects that hold data and functions. We can use any way to define them, for example using ES6 class syntax (recommended):

class CubeController {
  init() {
    // fires when the component is attached to an entity
    this.rotation = this.entity.rotation;
  }

  update() {
    // fires once per frame
    this.rotation.x += 0.01;
    this.rotation.y += 0.01;
  }
}

Enter fullscreen mode Exit fullscreen mode

Then we need to register components to use them.

TARO.registerComponent('cubeController', CubeController);
Enter fullscreen mode Exit fullscreen mode

More info on how to create components.

Creating entities

Having our world and some components already defined, let's create entities and attach these components to them:

var cube = new TARO.Entity('cube');
cube.addComponent('material', { color: 0x00ff00 });
cube.addComponent('geometry', { type: 'box' });
cube.addComponent('cubeController');

var camera = new TARO.Entity('camera');
camera.position.z = 5;
camera.addComponent('camera');
Enter fullscreen mode Exit fullscreen mode

With that, we have just created 2 entities: one with the Material, Geometry and CubeController components, and another with just the Camera component.
Notice that the Geometry and Material components are added with parameter objects. If we didn't use the parameters then the
components would use the default values declared in their schemas.

Start!

Now you just need to invoke app.start(), and the app will begin automatically updating every frame:

app.start();
Enter fullscreen mode Exit fullscreen mode

Putting everything together

Congratulations! You have now completed your first taro.js application. It's simple, you have to start somewhere.

The full code is available below and as an editable live example. Play around with it to get a better understanding of how it works.

Discussion (0)

pic
Editor guide