Introduction

kokomi.js is a growing three.js helper library.

Sangonomiya Kokomi, the young Divine Priestess of Watatsumi Island.

Install

npm i kokomi.js

Also, make sure to install three.js.

npm i three

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/ (opens in a new tab)

Project template: https://codesandbox.io/s/kokomi-js-starter-tjh29w?file=/src/app.ts (opens in a new tab)

And more examples: https://kokomi-js.netlify.app/examples/ (opens in a new tab)

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 (opens in a new tab), which can handle mouse and touch interactions easily.
Many more useful components (opens in a new tab) for you to discover!