Spaces:
Running
Running
| <html><head><meta charset="utf-8"><title>fbx test</title> | |
| <style>html,body{margin:0;height:100%;background:#111;overflow:hidden}#log{position:fixed;top:0;left:0;color:#0f0;font:12px monospace;z-index:9;white-space:pre;padding:6px;background:#000a}</style> | |
| <script type="importmap">{"imports":{ | |
| "three":"https://unpkg.com/three@0.160.0/build/three.module.js", | |
| "three/addons/":"https://unpkg.com/three@0.160.0/examples/jsm/", | |
| "fflate":"https://unpkg.com/fflate@0.8.2/esm/browser.js" | |
| }}</script></head> | |
| <body><div id="log">loading…</div> | |
| <script type="module"> | |
| import * as THREE from 'three'; | |
| import {FBXLoader} from 'three/addons/loaders/FBXLoader.js'; | |
| const log=document.getElementById('log'); | |
| const L=(m)=>{log.textContent+='\n'+m;console.log(m);}; | |
| const renderer=new THREE.WebGLRenderer({antialias:true}); | |
| renderer.setSize(innerWidth,innerHeight);document.body.appendChild(renderer.domElement); | |
| const scene=new THREE.Scene();scene.background=new THREE.Color(0x223); | |
| scene.add(new THREE.HemisphereLight(0xffffff,0x444455,2)); | |
| const dl=new THREE.DirectionalLight(0xffffff,2);dl.position.set(5,10,7);scene.add(dl); | |
| const cam=new THREE.PerspectiveCamera(50,innerWidth/innerHeight,0.1,2000); | |
| cam.position.set(6,6,6);cam.lookAt(0,1,0); | |
| const loader=new FBXLoader(); | |
| const names=['Floor_Tiles','Wall_01','Candle_01','Pillar']; | |
| let x=0; | |
| function boxInfo(o){const b=new THREE.Box3().setFromObject(o);const s=new THREE.Vector3();b.getSize(s); | |
| return `size(${s.x.toFixed(2)},${s.y.toFixed(2)},${s.z.toFixed(2)}) min.y=${b.min.y.toFixed(2)}`;} | |
| Promise.all(names.map(n=>new Promise(res=>{ | |
| loader.load('assets/models/'+n+'.fbx',obj=>{ | |
| let meshes=0;obj.traverse(c=>{if(c.isMesh){meshes++;c.material=new THREE.MeshStandardMaterial({color:0x99aabb,roughness:.9});}}); | |
| obj.position.x=x;x+=4;obj.scale.setScalar(0.01); | |
| scene.add(obj); | |
| L(`${n}: meshes=${meshes} ${boxInfo(obj)} (scaled .01)`); | |
| res(); | |
| },undefined,err=>{L(`${n} ERROR: ${err.message||err}`);res();}); | |
| }))).then(()=>L('all done')); | |
| window.__info=()=>log.textContent; | |
| (function anim(){requestAnimationFrame(anim);scene.rotation.y+=0.003;renderer.render(scene,cam);})(); | |
| </script></body></html> | |