I want to clone the cubes 16 x 16 in x and z, so there is 256 cubes combined in x and z axes, but I also want to clone that 16 x 16 perimeter in multiple places so I dont have to clone one cube tens of 1000s of times. code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cave Game</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.js"></script>
<script type="text/javascript">
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.body.appendChild(renderer.domElement);
const texture = new THREE.TextureLoader().load("grass.jpg");
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ map: texture });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
for (let i = 1; i < 128; i++) {
window["cube" + i] = cube.clone();
window["cube" + i].position.x = i;
scene.add(window["cube" + i]);
}
camera.position.z = 5;
camera.position.y = 2;
const animate = function () {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>