Three example

First we tell Three.js where the files lives

<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.176.0/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.176.0/examples/jsm/"
    }
  }
</script>

<script type="module">
  import * as THREE from "three";
  import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
  import { animate, engine } from "https://cdn.jsdelivr.net/npm/animejs/+esm";

  // Scene setup
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
  camera.position.z = 5.5;

  const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
  renderer.setSize(600, 600);
  document.body.appendChild(renderer.domElement);

  const light = new THREE.DirectionalLight(0xffffff, 12);
  light.position.set(3, 3, 3).normalize();
  scene.add(light);

  const loader = new GLTFLoader();

  loader.load(
    "https://modelviewer.dev/shared-assets/models/Astronaut.glb",
    (gltf) => {
      const astronaut = gltf.scene;
      astronaut.scale.set(1.5, 1.5, 1.5);
      scene.add(astronaut);

      // Animate rotation
      animate(astronaut.rotation, {
        y: {
          to: Math.PI * 2,
          duration: 5000,
        },
        loop: true,
        alternate: true,
        ease: "easeInOutSine",
      });
    },
  );

  // Sync Anime.js with Three.js render loop
  engine.useDefaultMainLoop = false;

  function render() {
    engine.update(); // update Anime.js
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }
  render();
</script>