three-kvy-core

A powerful Three.js extension to create scalable 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
• Extensible & plugin architecture
• Provides scalable development
• Events based
• Typescript support
• Lightweight. (3.5kb minzipped)

Installation

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

Documentation, tutorials, examples

Visit three-kvy-core.vladkrutenyuk.ru

What does it look like?

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

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

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

class CustomTickModule extends KVY.CoreContextModule {
    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;