\n\n> Sangonomiya Kokomi, the young Divine Priestess of Watatsumi Island.\n\n## Install\n\n```sh\nnpm i kokomi.js\n```\n\nAlso, make sure to install three.js.\n\n```sh\nnpm i three\n```\n\nCheck the documentation: https://kokomi-docs.netlify.app/\n\n## Hello world\n\nWith just several lines, you can make a most basic 3D scene :d\n\nindex.html\n\n```html\n\n```\n\nstyle.css\n\n```css\n#sketch {\n width: 100vw;\n height: 100vh;\n background: black;\n overflow: hidden;\n}\n```\n\nscript.js\n\n```js\nimport * as kokomi from \"kokomi.js\";\n\nclass Sketch extends kokomi.Base {\n create() {\n new kokomi.OrbitControls(this);\n\n const box = new kokomi.Box(this);\n box.addExisting();\n\n this.update((time) => {\n box.spin(time);\n });\n }\n}\n\nconst createSketch = () => {\n const sketch = new Sketch();\n sketch.create();\n return sketch;\n};\n\ncreateSketch();\n```\n\n\n\nOnline Sandbox: https://kokomi-sandbox.netlify.app/\n\n## Features\n\n- You can simply extend `kokomi.Base` class to kickstart a simple scene without writing any boilerplate codes.\n- 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.\n- `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.\n- Integrated with [three.interactive](https://github.com/markuslerner/THREE.Interactive), which can handle mouse and touch interactions easily.\n- Many more [useful components](https://kokomi-js.netlify.app/examples/) for you to discover!\n\n## Previews\n\n### Model Showcase\n\n\n\n### Shadertoy Integration\n\n\n\n### Persistence Effect\n\n\n\n### Render Texture\n\n\n\n### Reflector\n\n\n\n### Infinite Gallery\n\n\n\n## Credits\n\n- [three.js](https://github.com/mrdoob/three.js)\n- [drei](https://github.com/pmndrs/drei)\n- Various articles from [codrops](https://tympanus.net/codrops/) and other amazing blogs\n- Various video tutorials from [youtube](https://www.youtube.com/)\n\n## Author\n\n👤 **alphardex**\n\n- Website: https://alphardex.netlify.app\n- Twitter: [@alphardex007](https://twitter.com/alphardex007)\n- Github: [@alphardex](https://github.com/alphardex)\n\n## Show your support\n\nGive a ⭐️ if this project helped you!\n\n---\n\n_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_\n","readmeFilename":"README.md"}
![](\"./assets/logo.jpg\"){kind=logo}
\n ![\"Version\"](\"https://img.shields.io/npm/v/kokomi.js.svg\")
\n ![\"License:](\"https://img.shields.io/badge/License-MIT-yellow.svg\"){kind=icon}
\n ![\"Twitter:](\"https://img.shields.io/twitter/follow/alphardex007.svg?style=social\")
\n