73 lines
2.7 KiB
HTML
73 lines
2.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Three.js Test</title>
|
||
|
|
<style>
|
||
|
|
body { margin: 0; background: #000; }
|
||
|
|
#test { width: 100vw; height: 100vh; }
|
||
|
|
#debug { position: absolute; top: 10px; left: 10px; color: white; font-family: monospace; z-index: 100; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="debug">Loading...</div>
|
||
|
|
<div id="test"></div>
|
||
|
|
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.152.0/build/three.min.js"></script>
|
||
|
|
<script src="js/three-setup.js"></script>
|
||
|
|
<script>
|
||
|
|
const debug = document.getElementById('debug');
|
||
|
|
|
||
|
|
function log(msg) {
|
||
|
|
debug.innerHTML += msg + '<br>';
|
||
|
|
console.log(msg);
|
||
|
|
}
|
||
|
|
|
||
|
|
log('Three.js loaded: ' + (typeof THREE !== 'undefined'));
|
||
|
|
log('STLLoader available: ' + (typeof THREE.STLLoader !== 'undefined'));
|
||
|
|
log('OrbitControls available: ' + (typeof THREE.OrbitControls !== 'undefined'));
|
||
|
|
|
||
|
|
if (typeof THREE !== 'undefined') {
|
||
|
|
try {
|
||
|
|
// Create a simple scene with a cube
|
||
|
|
const scene = new THREE.Scene();
|
||
|
|
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||
|
|
const renderer = new THREE.WebGLRenderer();
|
||
|
|
|
||
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
||
|
|
document.getElementById('test').appendChild(renderer.domElement);
|
||
|
|
|
||
|
|
const geometry = new THREE.BoxGeometry();
|
||
|
|
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
|
||
|
|
const cube = new THREE.Mesh(geometry, material);
|
||
|
|
scene.add(cube);
|
||
|
|
|
||
|
|
camera.position.z = 5;
|
||
|
|
|
||
|
|
function animate() {
|
||
|
|
requestAnimationFrame(animate);
|
||
|
|
cube.rotation.x += 0.01;
|
||
|
|
cube.rotation.y += 0.01;
|
||
|
|
renderer.render(scene, camera);
|
||
|
|
}
|
||
|
|
|
||
|
|
animate();
|
||
|
|
log('Three.js scene created successfully!');
|
||
|
|
|
||
|
|
// Test STL Loader
|
||
|
|
if (typeof THREE.STLLoader !== 'undefined') {
|
||
|
|
log('Testing STLLoader...');
|
||
|
|
const loader = new THREE.STLLoader();
|
||
|
|
log('STLLoader instance created successfully!');
|
||
|
|
} else {
|
||
|
|
log('ERROR: STLLoader not available');
|
||
|
|
}
|
||
|
|
|
||
|
|
} catch (error) {
|
||
|
|
log('ERROR: ' + error.message);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
log('ERROR: Three.js not loaded');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|