@vladkrutenyuk/three-kvy-core NPM

three-kvy-core

README was truncated because of new reworked verison gamma.1, temporaly. Let me actualize eveywrhint bcs a lot of things were changed.
Webpage with detailed docs and examples is coming soon.

A powerful Three.js extension to create 3D apps of any-complexity.

This is lightweight component-oriented library, enabling an elegant lifecycle management system and basic initializations. Empower Three.js objects by reusable features within seamless context propagation with pluggable modules. The OOP-driven.

This library is designed in way not no include three.js as dependency.
It manipulates three.js entities but does not refer to them.

Doesn't impose any restrictions on your existing Three.js logic. Compatible with any approach you already use.

Framework agnostic design
Extensibility and plugin architecture
Provides scalable developemnt.
Modular architecture.
OOP-driven
Events based.
Typescript support.
Lightweight. Tiny size. (4kb minzipped)

Installation.

npm i three eventemitter3 @vladkrutenyuk/three-kvy-core

What does it look like?

import * as THREE from "three";
import * as KVY from "@vladkrutenyuk/three-kvy-core";

const ctx = KVY.GameContext.create(THREE, {}, { antialias : true });

class CustomTickModule extends KVY.GameContextModule {
    useCtx(ctx) {
        const interval = setInterval(() => {
            this.emit("customtick");
        }, 2000);

        return () => clearInterval(interval);
    }
}

ctx.assignModules({ tick: new CustomTickModule() });

class SpinningToFro extends KVY.Object3DFeature {
    speed = 1;

    useCtx(ctx) {
        const onTick = () => {
            this.speed *= -1;
        };
        
        ctx.modules.tick.on("customtick", onTick);

        return () => ctx.modules.tick.off("customtick", onTick);
    }

    onBeforeRender(ctx) {
        const angle = this.speed * ctx.deltaTime;
        this.object.rotateX(angle);
        this.object.rotateY(angle);
    }
}

const cube = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshNormalMaterial() );
ctx.root.add(cube);

KVY.addFeature(cube, SpinningToFro);

ctx.three.camera.position.z = 5;

ctx.three.mount(document.queryElement("#canvas-container"));
ctx.loop.run();