<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
    <script type="importmap">
        {
            "imports": {
              "three": "https://unpkg.com/three@0.158.0/build/three.module.js",
              "three/examples/jsm/": "https://unpkg.com/three@0.158.0/examples/jsm/",
              "@three.ez/main": "https://unpkg.com/@three.ez/main@0.3.10/bundle.js"
            }
        }
    </script>

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  user-select: none;
}

import { Scene, AmbientLight } from 'three';
import { Main, PerspectiveCameraAuto, Asset, Utils } from '@three.ez/main';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

const gltf = await Asset.load(GLTFLoader, 'https://threejs.org/examples/models/gltf/Soldier.glb');
const model = gltf.scene;

Utils.setChildrenDragTarget(model, model); // all children will drag this object
Utils.computeBoundingSphereChildren(model); // to make raycast works properly

const main = new Main(); // init renderer and other stuff inside

const scene = new Scene().add(model.translateY(-1), new AmbientLight());
const camera = new PerspectiveCameraAuto(70, 0.0001).translateZ(-3).rotateY(Math.PI);

main.createView({ scene, camera });