view.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Character Viewer</title>
  <style>
    body { margin: 0; overflow: hidden; background: #000; }
    canvas { display: block; }
    #loading {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      background: rgba(0,0,0,0.7);
      padding: 20px 30px;
      border-radius: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <div id="loading">Loading character...</div>

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

  <script type="module">
    import * as THREE from 'three';
    import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    let scene, camera, renderer, controls, model;

    init();
    animate();

    function init() {
      // Scene and Camera
      scene = new THREE.Scene();
      scene.background = new THREE.Color(0x111111);
      camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.set(0, 1.5, 3);

      // Renderer
      renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.outputEncoding = THREE.sRGBEncoding;
      document.body.appendChild(renderer.domElement);

      // Lighting
      scene.add(new THREE.AmbientLight(0xffffff, 0.5));

      const dirLight = new THREE.DirectionalLight(0xffffff, 1);
      dirLight.position.set(2, 4, 2);
      dirLight.castShadow = true;
      scene.add(dirLight);

      const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.4);
      hemiLight.position.set(0, 10, 0);
      scene.add(hemiLight);

      // Controls
      controls = new OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true;

      // Load FBX Model
      const loader = new FBXLoader();
      loader.load('./character.fbx', (fbx) => {
        model = fbx;
        model.scale.set(0.01, 0.01, 0.01); // adjust size as needed
        scene.add(model);
        document.getElementById('loading').style.display = 'none';
      }, (xhr) => {
        const percent = (xhr.loaded / xhr.total * 100).toFixed(1);
        document.getElementById('loading').textContent = `Loading ${percent}%`;
      }, (error) => {
        document.getElementById('loading').textContent = 'Error loading character.fbx';
        console.error(error);
      });

      // Responsive resize
      window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      });
    }

    function animate() {
      requestAnimationFrame(animate);
      if (model) model.rotation.y += 0.005; // slowly rotate the model
      controls.update();
      renderer.render(scene, camera);
    }
  </script>
</body>
</html>