Can't view object in three js

Question

Want to create objects (cubes), within a for loop, then output them in a random location on the page. Cubes do not appear unsure why.

**Info: When I console log the cube get **

-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();

Answer 1

您需要为MeshLambertMaterial设置光源（与不使用光源的MeshBasicMaterial相对）。
另外，您需要在循环中创建一个新的Cube实例，否则，您只是在更改初始多维数据集的位置。

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();
})

// Create ambient light and add to scene.
var light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);

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
  var cube = new THREE.Mesh(geometry, material);
  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();

body {
  padding: 0;
  margin: 0;
  position: relative;
}

<script src="https://rawgithub.com/mrdoob/three.js/r104/build/three.js"></script>