Three.js循环创建随机位置立方体不显示问题求助

我来帮你揪出问题所在！从你的代码和控制台输出来看，有两个核心问题导致立方体看不见：

1. 你一直在重复添加同一个Mesh对象到场景 #

你在循环外面只创建了一个cube实例，然后在循环里只是不断修改它的位置再调用scene.add(cube)——但Three.js不允许同一个Mesh被多次添加到场景中，每次执行add其实只是更新这个唯一立方体的位置，最后场景里只会剩下最后一次设置位置的那个立方体，而且还有第二个问题让它彻底看不见。

2. MeshLambertMaterial需要光源才能显示 #

MeshLambertMaterial是依赖光照的材质，如果场景里没有任何光源，这个材质的物体会完全呈现黑色，看起来就像没加载出来一样。

修改后的完整代码 #

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

// 添加光照 - 关键！
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

var geometry = new THREE.BoxGeometry(3, 1, 1);
var material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });

// 把立方体创建逻辑放到循环内部
for(var i = 0; i < 20; i++) {
  var cube = new THREE.Mesh(geometry, material); // 每次循环创建新的Mesh实例
  cube.position.x = (Math.random() - 0.5) * 10;
  cube.position.y = (Math.random() - 0.5) * 10;
  cube.position.z = (Math.random() - 1.2) * 10;
  scene.add(cube);
  console.log(cube);
}

var render = function() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

关键修改点说明 #

• 将new THREE.Mesh(...)移到for循环内部，确保每次循环都生成一个全新的立方体实例，这样场景里会真正添加20个不同的立方体。
• 添加了环境光和平行光，为MeshLambertMaterial提供必要的光照，让立方体能够被看到。
• 保留了你原本的随机位置逻辑，每个立方体都会被放置在随机的坐标上。

内容的提问来源于stack exchange，提问作者Siimm Kahn