Spaces:

ReikerXx
/

uex

Running

App Files Files Community

Reaperxxxx commited on Oct 13, 2025

Commit

d2b44a7

verified ·

1 Parent(s): 74e03b3

Update index.html

Browse files

Files changed (1) hide show

index.html +75 -69

index.html CHANGED Viewed

@@ -1,88 +1,94 @@
-<!doctype html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1" />
-  <title>Element in front of camera</title>
   <style>
-    body { margin: 0; overflow: hidden; background: #111; }
-    #info {
-      position: absolute;
-      left: 12px;
-      top: 12px;
-      color: #ddd;
-      font-family: Arial, sans-serif;
-      z-index: 2;
-      background: rgba(0,0,0,0.3);
-      padding: 6px 8px;
-      border-radius: 6px;
-    }
   </style>
 </head>
 <body>
-  <div id="info">Use mouse / touch to orbit. The red square + green box are fixed to camera.</div>
-  <!-- non-module scripts (works on static hosts) -->
-  <script src="https://unpkg.com/three@0.165.0/build/three.min.js"></script>
-  <script src="https://unpkg.com/three@0.165.0/examples/js/controls/OrbitControls.js"></script>
-  <script type="module">
-import * as THREE from 'https://unpkg.com/three@0.165.0/build/three.module.js';
-import { GLTFLoader } from 'https://unpkg.com/three@0.165.0/examples/jsm/loaders/GLTFLoader.js';
-import { OrbitControls } from 'https://unpkg.com/three@0.165.0/examples/jsm/controls/OrbitControls.js';
-const scene = new THREE.Scene();
-scene.background = new THREE.Color(0x111111);
-const camera = new THREE.PerspectiveCamera(70, innerWidth/innerHeight, 0.1, 1000);
-camera.position.set(0, 1.5, 4);
-const renderer = new THREE.WebGLRenderer({ antialias: true });
-renderer.outputColorSpace = THREE.SRGBColorSpace; // required for Safari color correctness
-renderer.setSize(innerWidth, innerHeight);
-document.body.appendChild(renderer.domElement);
-// light
-scene.add(new THREE.AmbientLight(0xffffff, 0.9));
-const dir = new THREE.DirectionalLight(0xffffff, 1);
-dir.position.set(5, 10, 5);
-scene.add(dir);
-// controls
-const controls = new OrbitControls(camera, renderer.domElement);
-controls.target.set(0, 1, 0);
-// ✅ test cube (bright and visible)
-const testCube = new THREE.Mesh(
-  new THREE.BoxGeometry(0.5, 0.5, 0.5),
-  new THREE.MeshStandardMaterial({ color: 0xff3333 })
-);
-camera.add(testCube);
-testCube.position.set(0, 0, -2);
-scene.add(camera);
-// load GLB
-const loader = new GLTFLoader();
-loader.load('map.glb', (gltf) => {
-  const map = gltf.scene;
-  map.traverse(o => {
-    if (o.isMesh) {
-      o.material.side = THREE.DoubleSide;
-      o.material.metalness = 0;
-      o.material.roughness = 1;
-    }
-  });
-  scene.add(map);
-  console.log('✅ GLB loaded');
-}, undefined, (e) => console.error('❌', e));
-function animate() {
-  requestAnimationFrame(animate);
-  controls.update();
-  renderer.render(scene, camera);
-}
-animate();
 </script>
 </body>
 </html>

+<!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>FBX Viewer</title>
   <style>
+    body { margin:0; overflow:hidden; background:#111; }
+    canvas { display:block; }
   </style>
 </head>
 <body>
+<script src="https://unpkg.com/three@0.165.0/build/three.min.js"></script>
+<script src="https://unpkg.com/three@0.165.0/examples/js/controls/OrbitControls.js"></script>
+<script src="https://unpkg.com/three@0.165.0/examples/js/loaders/FBXLoader.js"></script>
+<script>
+  // --- Basic scene ---
+  const scene = new THREE.Scene();
+  scene.background = new THREE.Color(0x111111);
+  const camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000);
+  camera.position.set(0, 2, 5);
+  const renderer = new THREE.WebGLRenderer({ antialias:true });
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  renderer.outputColorSpace = THREE.SRGBColorSpace; // for Safari
+  document.body.appendChild(renderer.domElement);
+  // --- Lights ---
+  scene.add(new THREE.AmbientLight(0xffffff, 1));
+  const dirLight = new THREE.DirectionalLight(0xffffff, 1);
+  dirLight.position.set(5,10,7);
+  scene.add(dirLight);
+  // --- Controls ---
+  const controls = new THREE.OrbitControls(camera, renderer.domElement);
+  controls.target.set(0,1,0);
+  controls.update();
+  // --- FBX Loader ---
+  const loader = new THREE.FBXLoader();
+  loader.load(
+    'model.fbx', // <-- put your FBX file here, in same folder
+    function(object) {
+      object.traverse((child) => {
+        if (child.isMesh) {
+          child.material.side = THREE.DoubleSide; // ensures no faces are invisible
+        }
+      });
+      scene.add(object);
+      // Auto-center camera
+      const box = new THREE.Box3().setFromObject(object);
+      const center = box.getCenter(new THREE.Vector3());
+      const size = box.getSize(new THREE.Vector3());
+      const maxDim = Math.max(size.x, size.y, size.z);
+      const fov = camera.fov * (Math.PI/180);
+      const cameraZ = Math.abs(maxDim / Math.sin(fov/2));
+      camera.position.set(center.x, center.y + maxDim/4, cameraZ);
+      camera.lookAt(center);
+      controls.target.copy(center);
+      controls.update();
+    },
+    (xhr) => console.log(`Loading FBX: ${(xhr.loaded/xhr.total*100).toFixed(2)}%`),
+    (err) => console.error('Error loading FBX', err)
+  );
+  // --- Floor / reference ---
+  const floor = new THREE.Mesh(
+    new THREE.PlaneGeometry(20,20),
+    new THREE.MeshStandardMaterial({ color:0x222222, roughness:1 })
+  );
+  floor.rotation.x = -Math.PI/2;
+  scene.add(floor);
+  // --- Animate ---
+  function animate() {
+    requestAnimationFrame(animate);
+    controls.update();
+    renderer.render(scene, camera);
+  }
+  animate();
+  // --- Handle resize ---
+  window.addEventListener('resize', () => {
+    camera.aspect = window.innerWidth/window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+  });
 </script>
 </body>
 </html>