import * as THREE from 'three';

// Scene setup
const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera( -window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, 1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// Estimate dimensions from image (adjust these based on actual measurements if available)
const beamWidth = 1; // Assuming 1 unit width
const beamHeight = 0.3; // Assuming 0.3 units height
const beamLength = 10; // Adjust based on image perspective
const spacingBetweenBeams = 2; // Adjust based on image

// Create multiple beams
for (let i = 0; i < 4; i++) { // Assuming 4 beams in the image
    const geometry = new THREE.BoxGeometry(beamWidth, beamHeight, beamLength);
    const material = new THREE.MeshBasicMaterial( { color: 0x999999 } ); // Grey concrete color
    const beam = new THREE.Mesh( geometry, material );
    beam.position.set(0, i * (beamHeight + spacingBetweenBeams), 0); // Position beams vertically
    scene.add( beam );
}

// Camera positioning (adjust as needed)
camera.position.z = 30;
camera.lookAt(0, 0, 0);

// Render the scene
renderer.render( scene, camera );