File size: 3,176 Bytes
c78a17b 436d005 c78a17b 436d005 78320a0 436d005 c78a17b 436d005 c78a17b 436d005 c78a17b 436d005 c78a17b 436d005 c78a17b 436d005 c78a17b 436d005 c78a17b 436d005 c78a17b 436d005 c78a17b 436d005 c78a17b 436d005 c78a17b 436d005 c78a17b 436d005 c78a17b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | <!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> |