isensen / kokomi.js

A growing three.js helper library.

kokomi.js

A growing three.js helper library.

Install

npm i kokomi.js

Hello world

With just several lines, you can make a most basic 3D scene :d

index.html

<div id="sketch" class="bg-black w-screen h-screen overflow-hidden"></div>

script.ts

import * as kokomi from "kokomi.js";

class Sketch extends kokomi.Base {
  create() {
    new kokomi.OrbitControls(this);

    const box = new kokomi.Box(this);
    box.addExisting();

    this.update((time: number) => {
      box.spin(time);
    });
  }
}

const createSketch = () => {
  const sketch = new Sketch();
  sketch.create();
  return sketch;
};

createSketch();

Demo (Also can be used as a template): https://codesandbox.io/s/kokomi-js-starter-tjh29w?file=/src/app.ts

See more examples: https://kokomi-playground.vercel.app

API

Features

• You can simply extend kokomi.Base class to kickstart a simple scene without writing any boilerplate codes.
• Either you can write all your three.js code in a single file, or encapsulate your code into individual classes in a large project. By extending kokomi.Component, you can make your components keep their own state and animation.
• kokomi.AssetManager can handle the preloads of assets (gltfModel, texture, cubeTexture, font, etc). You can just write a simple json file to config your assets without caring about various loaders.
• Integrated with three.interactive, which can handle mouse and touch interactions easily.

Previews

Asset Manage

Shadertoy Integration

Persistence Effect

Render Texture

Author

👤 alphardex

• Website: https://alphardex.netlify.app
• Twitter: @alphardex007
• Github: @alphardex

Show your support

Give a ⭐️ if this project helped you!

---

This README was generated with ❤️ by readme-md-generator