嘿，刚入坑Three.js遇到这种坑太正常了，我来给你拆解清楚问题所在，以及怎么搞定它～

核心原因 #

这里主要有两个关键点：

• 相机默认朝向的坑：Three.js里的相机默认是沿着-z轴方向看过去的，简单说就是相机默认盯着(0,0,-∞)这个方向。当你把相机放在z=2的位置，你的立方体在原点(0,0,0)，这时候立方体其实在相机的身后——而相机的近裁剪面（默认near=0.1）只识别相机前方的区域，身后的物体自然会被裁切掉，所以你看不到立方体。
• 误用抽象相机类：你代码里写的var camera = new THREE.Camera()也有问题，THREE.Camera是个抽象基类，不能直接实例化来用，得用具体的相机类型，比如最常用的PerspectiveCamera（透视相机）或者OrthographicCamera（正交相机）。

正确的设置方法 #

我给你把代码修正并注释清楚，你可以直接测试：

function init() {
  // 1. 创建场景
  var scene = new THREE.Scene();
  
  // 2. 创建立方体并加入场景
  var box = getBox(1, 1, 1); // 假设你的getBox函数返回THREE.Mesh实例
  scene.add(box);
  
  // 3. 正确实例化透视相机（替代THREE.Camera）
  // 参数：视场角(FOV), 宽高比, 近裁剪面, 远裁剪面
  var camera = new THREE.PerspectiveCamera(
    75, 
    window.innerWidth / window.innerHeight, 
    0.1, 
    1000
  );
  
  // 4. 设置相机位置（这里z=2完全没问题）
  camera.position.z = 2;
  
  // 5. 关键！让相机看向立方体（或者场景原点）
  // 这样相机就会对准你的立方体，而不是默认看向-z方向
  camera.lookAt(box.position); // 也可以用scene.position，因为立方体在原点
  
  // 6. 创建渲染器并挂载到页面
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  // 7. 渲染场景
  renderer.render(scene, camera);
}

// 补充你的getBox函数示例（如果还没完善的话）
function getBox(w, h, d) {
  var geometry = new THREE.BoxGeometry(w, h, d);
  var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  return new THREE.Mesh(geometry, material);
}

// 调用初始化函数
init();

额外提示 #

• 你可以试试调整相机位置为camera.position.set(2, 2, 2)，再配合lookAt(box.position)，就能得到一个斜着看立方体的立体视角。
• 如果用正交相机，设置逻辑类似，但需要根据场景大小调整正交相机的左右上下参数，确保立方体在视口范围内。

内容的提问来源于stack exchange，提问作者Vivekraj K R