I believe that the four legs should be an integral part of the table, rather than just added on like an afterthought.
What would be the best way to create new instances of legs and attach them in a way that makes the back legs look slightly smaller than the front? Currently, I am only seeing a single leg instead of all four.
If you run this code on your local machine, you will understand what I am trying to achieve.
<script type="importmap">
{
"imports": {
"three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.163.0/three.module.min.js"
}
}
</script>
<script type="module">
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
color: 0x885511 // brown?
});
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();
</script>