Okay, I can help you set up a web application that allows you to load a 3D model (specifically STL files for this example) and view its projection from the top, which visually represents its perimeter from that angle. We'll use the Three.js library for 3D rendering in the browser. { "name": "3d-perimeter-viewer", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "three": "^0.164.1" }, "devDependencies": { "vite": "^5.2.0" } } 3D Model Top-Down Viewer

3D Model Top-Down Viewer

Load an STL file to view its top-down projection.

body { font-family: sans-serif; margin: 0; padding: 20px; background-color: #f0f0f0; color: #333; } #app { max-width: 800px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } h1 { text-align: center; color: #1a1a1a; } input[type="file"] { display: block; margin: 20px auto; padding: 10px; border: 1px solid #ccc; border-radius: 4px; } #canvas-container { width: 100%; height: 500px; /* Adjust height as needed */ margin-top: 20px; border: 1px solid #ccc; background-color: #e0e0e0; position: relative; /* Needed for potential overlays or controls */ overflow: hidden; /* Ensure canvas fits */ } canvas { display: block; /* Remove extra space below canvas */ } import * as THREE from 'three'; import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; // Optional: for interaction let scene, camera, renderer, controls, container, currentMesh; function init() { container = document.getElementById('canvas-container'); if (!container) { console.error("Canvas container not found!"); return; } // Scene scene = new THREE.Scene(); scene.background = new THREE.Color(0xe0e0e0); // Renderer renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(container.clientWidth, container.clientHeight); renderer.setPixelRatio(window.devicePixelRatio); container.appendChild(renderer.domElement); // Camera (Orthographic for top-down view) const aspect = container.clientWidth / container.clientHeight; const frustumSize = 50; // Initial size, will be adjusted camera = new THREE.OrthographicCamera( frustumSize * aspect / -2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / -2, 0.1, // Near plane - adjust if needed 2000 // Far plane - adjust if needed ); camera.position.set(0, 100, 0); // Position directly above the origin camera.up.set(0, 0, -1); // Set the up direction for top-down view camera.lookAt(scene.position); // Look at the center of the scene // Lights const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(50, 100, 50); // Adjust light direction scene.add(directionalLight); // Optional Controls (allows rotation, zoom, pan if needed) // controls = new OrbitControls(camera, renderer.domElement); // controls.enableRotate = false; // Disable rotation for strict top-down // controls.enablePan = true; // controls.mouseButtons = { // LEFT: THREE.MOUSE.PAN, // Use left mouse to pan // MIDDLE: THREE.MOUSE.DOLLY, // RIGHT: null // Disable right mouse button action // } // controls.target.set(0, 0, 0); // controls.update(); // Handle window resize window.addEventListener('resize', onWindowResize, false); // File Input Listener const fileInput = document.getElementById('fileInput'); fileInput.addEventListener('change', handleFileLoad, false); // Initial render animate(); } function handleFileLoad(event) { const file = event.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = (e) => { const contents = e.target.result; loadSTL(contents); }; // Read as ArrayBuffer for STLLoader reader.readAsArrayBuffer(file); } function loadSTL(data) { const loader = new STLLoader(); const geometry = loader.parse(data); // Remove previous mesh if exists if (currentMesh) { scene.remove(currentMesh); currentMesh.geometry.dispose(); currentMesh.material.dispose(); } // Center the geometry geometry.computeBoundingBox(); const boundingBox = geometry.boundingBox; const center = new THREE.Vector3(); boundingBox.getCenter(center); geometry.translate(-center.x, -center.y, -center.z); // Material const material = new THREE.MeshStandardMaterial({ color: 0x0055ff, // Example color metalness: 0.1, roughness: 0.75, // wireframe: true // Uncomment to see wireframe instead of solid }); // Mesh currentMesh = new THREE.Mesh(geometry, material); scene.add(currentMesh); // Adjust camera to fit the object adjustCameraToObject(boundingBox, center); // Optional: Add edges helper // const edges = new THREE.EdgesGeometry( geometry ); // const line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 2 } ) ); // scene.add( line ); // Add edges along with the mesh console.log("STL loaded and centered."); } function adjustCameraToObject(boundingBox, center) { const size = new THREE.Vector3(); boundingBox.getSize(size); // Use the larger dimension (X or Z for top-down view) to set camera frustum const maxDim = Math.max(size.x, size.z); const fitOffset = 1.2; // Add some padding const frustumSize = maxDim * fitOffset; const aspect = container.clientWidth / container.clientHeight; // Update orthographic camera properties camera.left = frustumSize * aspect / -2; camera.right = frustumSize * aspect / 2; camera.top = frustumSize / 2; camera.bottom = frustumSize / -2; // Adjust near/far planes based on object height (Y dimension) and position // Position camera far enough away to see the whole object height const cameraDistance = Math.abs(boundingBox.max.y) + Math.abs(boundingBox.min.y) + 10; // Add buffer camera.position.set(0, cameraDistance, 0); // Position above the centered object camera.near = 1; // Start rendering just below the camera camera.far = cameraDistance + size.y + 10; // Ensure far plane is beyond the object's bottom camera.updateProjectionMatrix(); // If using OrbitControls, update target // if (controls) { // controls.target.set(0, 0, 0); // Target the center (which is now 0,0,0) // controls.update(); // } console.log(`Camera adjusted. Frustum size: ${frustumSize}`); } function onWindowResize() { const aspect = container.clientWidth / container.clientHeight; // Adjust camera aspect ratio camera.left = camera.right / aspect * -1; // Maintain width based on height camera.right = camera.top * aspect; // Adjust width based on new aspect camera.updateProjectionMatrix(); renderer.setSize(container.clientWidth, container.clientHeight); } function animate() { requestAnimationFrame(animate); // if (controls) controls.update(); // Update controls if enabled renderer.render(scene, camera); } // Start the application init(); npm install && npm run dev This sets up a basic web page using Vite and Three.js: 1. It creates an HTML page with a file input and a container for the 3D view. 2. The JavaScript code initializes a Three.js scene with an orthographic camera positioned directly above the scene origin. 3. When you select an STL file using the input, it loads the model using `STLLoader`. 4. The loaded model's geometry is centered at the origin. 5. The orthographic camera's view frustum is adjusted to fit the bounds of the loaded object, ensuring the entire top-down profile is visible. 6. The model is rendered using a standard material. The view you see is the top-down projection, effectively showing the object's perimeter from above. After running the `run.sh` script (`npm install && npm run dev`), open the provided URL in your browser. Use the file input to load an STL file.