Axolotis Player

A library that helps to lazy load Components (smart items) in an ECS context.
Build for metaverse and 3D websites.

⭐️ Features

• ECS system https://en.wikipedia.org/wiki/Entity_component_system
• Scene defined in the DOM, Similar to https://aframe.io/

<ax-scene>
    <ax-entity>
        <ax-component module="ComponentExample" config="{position:{x:1,y:2,z:3}}"></ax-component>
    </ax-entity>
</ax-scene>

• Lazy loading of Component and service Each module is loaded as needed by the code and can be loaded at runtime.

- Lightweight and no dependencies ## 📦 Getting Started ### install

yarn add git+https://github.com/ApteroSAS/axolotis-player.git
import { registerLocalModule,initHtml } from "@root/lib";
initHtml();

💎 First component

A component is part of an Entity in the ECS model A scene can have multiple component. Is lazy loaded as well.

//in Index.ss
registerLocalModule("ComponentExample", ()=>{return import("@root/demo/page/ComponentExample")});

import Component from "@root/lib/modules/core/ecs/Component";
import { FrameLoop } from "@root/lib/modules/FrameLoop";
import { WebpackLazyModule } from "@root/lib/modules/core/loader/WebpackLoader";
import { ComponentFactory } from "@root/lib/modules/core/ecs/ComponentFactory";
import {ServiceEntity} from "@root/lib";

export class ComponentExample implements Component{
    static dependencies : string[] = ["@root/lib/modules/FrameLoop"];
    constructor(frameLoop:FrameLoop) {
        // Here you can use the FrameLoop
    }

    getType(): string {
        return ComponentExample.name;
    }
}

If you want more flexibility for instantiating dependencies, you can add a factory alongside your component, replacing the need for dependencies.

export class Factory implements WebpackLazyModule, ComponentFactory<ComponentExample>{
    async createComponent(world:WorldEntity, config:any): Promise<ComponentExample> {
        // The factory will load the needed service asynchronously to create an instance of this component. 
        // Design patern Factory. 
        // Similar to Angular service injection.
        let services = world.getFirstComponentByType<ServiceEntity>(ServiceEntity.name);
        let frameLoop = await services.getService<FrameLoop>("@root/lib/modules/FrameLoop");
        return new ComponentExample(frameLoop);
    }
}

🚀 First Service

A service is a Singleton loaded only once per Axolotis page. Is lazy loaded as well.

//in Index.ss
registerLocalModule("ServiceExample", ()=>{return import("@root/demo/page/ServiceExample")});

import Component from "@root/lib/modules/core/ecs/Component";
import { FrameLoop } from "@root/lib/modules/FrameLoop";
import { WebpackLazyModule } from "@root/lib/modules/core/loader/WebpackLoader";
import { LazyServices, Service } from "@root/lib/modules/core/service/LazyServices";

export class ServiceExample implements Component{
    constructor(frameLoop:FrameLoop) {
        // Here you can use the FrameLoop
    }

    getType(): string {
        return ServiceExample.name;
    }
}

export class Factory implements WebpackLazyModule, Service<ServiceExample>{
constructor() {}

    async createService(services:LazyServices): Promise<ServiceExample> {
        let frameLoop = await services.getService<FrameLoop>("@root/lib/modules/FrameLoop");
        return new ServiceExample(frameLoop,worldService);
    }
}

✅ Examples / Demo

axolotis-core-plugins (https://github.com/ApteroSAS/axolotis-core-plugins)