3JS – Create Table, How to attach legs

    import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 10000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(8, 0.5, 4);

// Correcting texture loading
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('http://localhost:3000/wood-texture-vector-eps10-illustration-600nw-206847232.webp');
const material = new THREE.MeshBasicMaterial({ map: texture });

const cube = new THREE.Mesh(geometry, material);


const legGeometry = new THREE.BoxGeometry(0.4, 4, 0.4);

const cubeLeg = new THREE.Mesh(legGeometry, material);



scene.add(cube);
scene.add(cubeLeg);
cubeLeg.position.x=12;
scene.add(cubeLeg);
cubeLeg.position.x=-12;
scene.add(cubeLeg);
cubeLeg.position.x=6;
scene.add(cubeLeg);
cubeLeg.position.x=-6;

camera.position.x = 2;
camera.position.y = 4;
camera.position.z = 13;

function animate() {
    requestAnimationFrame(animate);

     //cube.rotation.x += 0.01;
     //cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}

animate();

The four legs should be part of table, and I think should not be added to scene like its added.

Also what is good way to create new instances of legs and attach them. and the attachment should be such that the back side legs should look smaller than front. Current I am seeing only single leg, instead of 4.

If you run this code in your local you will know what I am asking.