kokomi.js

A growing three.js helper library.

Version

Sangonomiya Kokomi, the young Divine Priestess of Watatsumi Island.

Install

npm i kokomi.js

Also, make sure to install three.js.

npm i three

Check the documentation: https://kokomi-docs.netlify.app/

Hello world

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

index.html

<div id="sketch"></div>

style.css

#sketch {
  width: 100vw;
  height: 100vh;
  background: black;
  overflow: hidden;
}

script.js

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) => {
      box.spin(time);
    });
  }
}

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

createSketch();

Basic

Online Sandbox: https://kokomi-sandbox.netlify.app/

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 js object to config your assets without caring about various loaders.
Integrated with three.interactive, which can handle mouse and touch interactions easily.
Many more useful components for you to discover!