Spaces:

ReikerXx
/

uex

Running

App Files Files Community

Reaperxxxx commited on Oct 17, 2025

Commit

436d005

verified ·

1 Parent(s): 8e9e979

Update view.html

Browse files

Files changed (1) hide show

view.html +84 -99

view.html CHANGED Viewed

@@ -1,118 +1,103 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Character Bone Viewer</title>
-    <style>
-      body {
-        margin: 0;
-        overflow: hidden;
-        background: #111;
-        color: #0f0;
-        font-family: monospace;
-      }
-      #boneList {
-        position: fixed;
-        top: 10px;
-        left: 10px;
-        max-height: 95vh;
-        width: 300px;
-        overflow-y: auto;
-        background: rgba(0, 0, 0, 0.5);
-        padding: 10px;
-        border: 1px solid #0f0;
-        border-radius: 4px;
-      }
-      #boneList h2 {
-        margin-top: 0;
-        color: #0ff;
-      }
-      #boneList ul {
-        padding-left: 20px;
-      }
-    </style>
-    <script type="importmap">
-      {
-        "imports": {
-          "three": "https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.module.js",
-          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.128.0/examples/jsm/"
-        }
-      }
-    </script>
-  </head>
-  <body>
-    <div id="boneList">
-      <h2>🦴 Bones</h2>
-      <ul id="bones"></ul>
-    </div>
-    <script type="module">
-      import * as THREE from 'three';
-      import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-      let scene, camera, renderer, character;
-      init();
-      animate();
-      function init() {
-        scene = new THREE.Scene();
-        scene.background = new THREE.Color(0x1a1a2e);
-        camera = new THREE.PerspectiveCamera(
-          75,
-          window.innerWidth / window.innerHeight,
-          0.1,
-          50
-        );
-        camera.position.set(0, 1.5, 3);
-        renderer = new THREE.WebGLRenderer({ antialias: true });
-        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-        renderer.setSize(window.innerWidth, window.innerHeight);
-        document.body.appendChild(renderer.domElement);
-        // Lighting
-        const light = new THREE.DirectionalLight(0xffffff, 1);
-        light.position.set(2, 3, 4);
-        scene.add(light);
-        scene.add(new THREE.AmbientLight(0xffffff, 0.5));
-        // Load character
-        const loader = new GLTFLoader();
-        loader.load('./character.glb', (gltf) => {
-          character = gltf.scene;
-          character.position.set(0, 0, 0);
-          scene.add(character);
-          // Display all bones
-          const boneList = document.getElementById('bones');
-          const bones = [];
-          gltf.scene.traverse((obj) => {
-            if (obj.isBone) bones.push(obj.name);
-          });
-          if (bones.length === 0) {
-            boneList.innerHTML = '<li>No bones found.</li>';
-          } else {
-            boneList.innerHTML = bones.map(name => `<li>${name}</li>`).join('');
-          }
-        });
-        window.addEventListener('resize', onWindowResize);
-      }
-      function onWindowResize() {
         camera.aspect = window.innerWidth / window.innerHeight;
         camera.updateProjectionMatrix();
         renderer.setSize(window.innerWidth, window.innerHeight);
-      }
-      function animate() {
-        requestAnimationFrame(animate);
-        renderer.render(scene, camera);
-      }
-    </script>
-  </body>
 </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>