Looking to generate cubes in a random location on the page using a for loop, but currently experiencing issues where the cubes are not appearing as expected.
**Note: When I check the cube with console log, this is the output: **
-cube.js:24 Mesh {uuid: "8859E918-7D3A-47ED-BDEF-072BC60FF725", name: "", type: "Mesh", parent: Scene, children: Array(0), ...}
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth /
window.innerHeight, 0.1, 1000 )
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth,window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
})
var geometry = new THREE.BoxGeometry(3, 1, 1);
var material = new THREE.MeshLambertMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
meshX = -5;
for(var i = 0; i<20;i++) { //amount of shapes
cube.position.x = (Math.random() - 0.5) * 10; //Location of shapes
cube.position.y = (Math.random() - 0.5) * 10;
cube.position.z = (Math.random() - 1.2) * 10;
scene.add(cube);
meshX+=1;
console.log(cube);
}
var render = function() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();