<style>

  body {

    margin: 0;

    background: #202027;

  }

</style>

<div id="sketch"></div>

<script src="https://unpkg.com/kokomi.js/build/kokomi.umd.js"></script>

<script src="https://unpkg.com/three@0.160.0/build/three.min.js">

<script src="https://unpkg.com/gsap/dist/gsap.min.js"></script>

<script src="https://unpkg.com/lil-gui/dist/lil-gui.umd.min.js"></script>

<script>

  class Sketch extends kokomi.Base {

    create() {

      this.renderer.setClearColor(0x202027, 1);

      this.camera.position.set(0, 0, 5);

      new kokomi.OrbitControls(this);

      const resourceList = [{

        name: "tex",

        type: "texture",

        path: "https://s2.loli.net/2023/03/07/AtZbU9CYWRxqhGE.png",

      }, ];

      const am = new kokomi.AssetManager(this, resourceList);

      am.on("ready", () => {

        const tex = am.items.tex;

        const geometry = new THREE.SphereGeometry(2, 64, 64);

        const material = new THREE.MeshBasicMaterial({

          map: tex

        })

        const mesh = new THREE.Mesh(geometry, material);

        this.scene.add(mesh);

      });

    }

  }

  const sketch = new Sketch("#sketch");

  sketch.create();

</script>