Introduction
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 scalability
- Events based
- Typescript support
- Lightweight. Tiny size
Installation first.
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.CoreContext.create(THREE, {}, { renderer: { antialias: true } });
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;
ctx.three.mount(document.querySelector("#canvas-container"));
ctx.run();