无法在三个js中查看对象

Question

想要在for循环内创建对象（多维数据集），然后将其输出到页面上的随机位置。 多维数据集似乎不确定为什么。

**信息：当我进行控制台日志时，多维数据集得到**

-cube.js：24网格{uuid：“ 8859E918-7D3A-47ED-BDEF-072BC60FF725”，名称：“”，类型：“ Mesh”，父项：场景，子项：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>