111 lines
3.9 KiB
HTML
111 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Test Voyager Models</title>
|
|
<style>
|
|
body { margin: 0; }
|
|
canvas { display: block; }
|
|
#info {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
color: white;
|
|
background: rgba(0,0,0,0.7);
|
|
padding: 10px;
|
|
font-family: monospace;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="info">Loading...</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 { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
|
|
|
const scene = new THREE.Scene();
|
|
scene.background = new THREE.Color(0x000000);
|
|
|
|
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
|
camera.position.set(5, 5, 5);
|
|
|
|
const renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
document.body.appendChild(renderer.domElement);
|
|
|
|
const controls = new OrbitControls(camera, renderer.domElement);
|
|
|
|
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
|
|
scene.add(ambientLight);
|
|
|
|
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
|
|
directionalLight.position.set(5, 5, 5);
|
|
scene.add(directionalLight);
|
|
|
|
const loader = new GLTFLoader();
|
|
const info = document.getElementById('info');
|
|
|
|
// Test Voyager 1
|
|
info.textContent = 'Loading Voyager 1...';
|
|
loader.load(
|
|
'http://localhost:8000/upload/model/voyager_1.glb',
|
|
(gltf) => {
|
|
gltf.scene.position.set(-3, 0, 0);
|
|
gltf.scene.scale.set(0.5, 0.5, 0.5);
|
|
scene.add(gltf.scene);
|
|
info.textContent += '\nVoyager 1: ✓ Loaded';
|
|
console.log('Voyager 1 loaded:', gltf);
|
|
},
|
|
(progress) => {
|
|
console.log('Voyager 1 progress:', (progress.loaded / progress.total * 100) + '%');
|
|
},
|
|
(error) => {
|
|
info.textContent += '\nVoyager 1: ✗ Error - ' + error.message;
|
|
console.error('Voyager 1 error:', error);
|
|
}
|
|
);
|
|
|
|
// Test Voyager 2
|
|
info.textContent += '\nLoading Voyager 2...';
|
|
loader.load(
|
|
'http://localhost:8000/upload/model/voyager_2.glb',
|
|
(gltf) => {
|
|
gltf.scene.position.set(3, 0, 0);
|
|
gltf.scene.scale.set(0.5, 0.5, 0.5);
|
|
scene.add(gltf.scene);
|
|
info.textContent += '\nVoyager 2: ✓ Loaded';
|
|
console.log('Voyager 2 loaded:', gltf);
|
|
},
|
|
(progress) => {
|
|
console.log('Voyager 2 progress:', (progress.loaded / progress.total * 100) + '%');
|
|
},
|
|
(error) => {
|
|
info.textContent += '\nVoyager 2: ✗ Error - ' + error.message;
|
|
console.error('Voyager 2 error:', error);
|
|
}
|
|
);
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
controls.update();
|
|
renderer.render(scene, camera);
|
|
}
|
|
animate();
|
|
|
|
window.addEventListener('resize', () => {
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|