Feel free to contribute on ! GitHub 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 — Full integration with a 3D rigid-body physics engine. ⚛️ Physics — Write efficent and extendable code. 🔌 Entity Component System — 3D positional sounds built on the Web Audio API. 🔊 Sound — Design game behaviors in JavaScript. 📜 Scripts — Taro is a thin framework on top of three.js. ⚡ Performance Getting started Some common terms within Taro are: : an object with a unique ID that can have multiple components attached to it. entities : different facets of an entity. ex: geometry, rigidbody, hit points. components : a collection of entities and their components. scenes : the root container for scenes and other core classes. apps Before we start Before you can use taro.js, you need somewhere to display it: My first taro.js app <!DOCTYPE html> < > html < > head < = > meta charset "utf-8" < > title </ > title < > style { : ; } body margin 0 </ > style </ > head < > body < = > script src "js/taro.js" </ > script < > script // Our Javascript will go here. </ > script </ > body </ > html Creating an app Let’s start creating our first app and add the element to our HTML document: app = TARO.App(); .body.appendChild( app.domElement ); var new document 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): { init() { .rotation = .entity.rotation; } update() { .rotation.x += ; .rotation.y += ; } } class CubeController // fires when the component is attached to an entity this this // fires once per frame this 0.01 this 0.01 Then we need to register components to use them. TARO.registerComponent( , CubeController); 'cubeController' . More info on how to create components Creating entities Having our world and some components already defined, let’s create and attach these components to them: entities cube = TARO.Entity( ); cube.addComponent( , { : }); cube.addComponent( , { : }); cube.addComponent( ); camera = TARO.Entity( ); camera.position.z = ; camera.addComponent( ); var new 'cube' 'material' color 0x00ff00 'geometry' type 'box' 'cubeController' var new 'camera' 5 'camera' 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(); 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 . Play around with it to get a better understanding of how it works. live example https://jsfiddle.net/79n3pteb/
