Sangonomiya Kokomi, the young Divine Priestess of Watatsumi Island.
npm i kokomi.js
Also, make sure to install three.js.
npm i three
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();
Template: https://codesandbox.io/s/kokomi-js-starter-tjh29w?file=/src/app.ts
Online Sandbox: https://kokomi-sandbox.netlify.app/
And more examples: https://kokomi-js.netlify.app/examples/
- 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!
- three.js
- drei
- Various articles from codrops and other amazing blogs
- Various video tutorials from youtube
👤 alphardex
- Website: https://alphardex.netlify.app
- Twitter: @alphardex007
- Github: @alphardex
Give a ⭐️ if this project helped you!
This README was generated with ❤️ by readme-md-generator