kokomi.js

kokomi.js

A growing three.js helper library.

Version License: MIT Twitter: alphardex007

Sangonomiya Kokomi, the young Divine Priestess of Watatsumi Island.

npm i kokomi.js

Also, make sure to install three.js.

npm i three

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

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/

  • 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!

2

3

4

5

6

7

👤 alphardex

Give a ⭐️ if this project helped you!


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