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"></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();

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/entries/

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

Previews

Model Showcase

Shadertoy Integration

Persistence Effect

Render Texture

Reflector

Credits

• three.js
• drei
• Various articles from codrops and other amazing blogs
• Various video tutorials from youtube

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