Axolotis Core Plugins

A player that helps to lazy load smart items in order to compose a metaverse space or 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-service module="ServiceExample"></ax-service>
</ax-scene>

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

- Scene loaded from multiple origin. Navigate seamlessly between Axolotis-player enabled website - Each http page with the Axolotis player is a both a 3D Scene and a regular website. This facilitates SEO.

📦 Getting Started

install

yarn add git+https://github.com/ApteroSAS/axolotis-player.git
yarn add git+https://github.com/ApteroSAS/axolotis-core-plugins.git

in you main file :
import { registerLocalModule,initHtml } from "@root/lib";
import "@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{
    constructor(frameLoop:FrameLoop) {
        // Here you can use the FrameLoop
    }

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

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

yarn run start

You can find the demo file in the src/demo folder

https://chrisbateman.github.io/webpack-visualizer/