Objects does not seen on the scene with perspective camera

Questions
,
1

Have a nice day to everyone. I have a problem with Perspective Camera. I cannot see my objects on the scene? What should I do? Thanks in advance. My source codes are:

function setupScene(doUseRaycaster) {
  useRaycaster = doUseRaycaster;
  raycaster = new THREE.Raycaster();

  scene = new THREE.Scene();

  var viewer = document.getElementById('viewer');
  width = viewer.offsetWidth; // So that is stays inside the viewer div
  height = window.innerHeight; // full page

  // For small grid

  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(width, height);

  renderer2 = new THREE.WebGLRenderer({ alpha: true });
  renderer.setClearColor(0x000000, 0); // the default

  renderer2.setSize(150, 150);
  inset = document.getElementById('inset');

  viewer.appendChild(renderer.domElement);
  inset.appendChild(renderer2.domElement);

  var ambientLight = new THREE.AmbientLight(0xbbbbbb);
  scene.add(ambientLight);

  var lights = [];
  lights[0] = new THREE.PointLight(0xececec, 0.25, 0);
  lights[1] = new THREE.PointLight(0xececec, 0.25, 0);
  lights[2] = new THREE.PointLight(0xececec, 0.25, 0);

  lights[0].position.set(0, 100, 0);
  lights[1].position.set(100, 200, 100);
  lights[2].position.set(-100, -200, -100);

  scene.add(lights[0]);
  scene.add(lights[1]);
  scene.add(lights[2]);

  window.addEventListener('mousemove', onMouseMove, false);
  window.addEventListener('mousedown', onMouseDown, false);
  window.addEventListener('mouseup', mouseUp, false);
  window.addEventListener("keydown", onKeyDown, false);

  function onWindowResize() {
    camera.setSize(width, height);
    camera.updateProjectionMatrix();
    renderer.setSize(width, height);
  }

  scene2 = new THREE.Scene();
  camera2 = new THREE.CombinedCamera(width / 2, height / 2, 75, 0.1, 10000, -500, 1000);
  camera2.position.x = -30;
  camera2.position.y = 10;
  camera2.position.z = 100;
  camera2.up = camera.up;

  camera2.lookAt(0, 0, 0);

  var interval = GRID_SIZE / MAJOR_AXIS
  addGridToScene(GRID_SIZE, MAJOR_AXIS, MINOR_AXIS, [0, 0, 0], [0, 0, 0]);

  axis2 = buildMiniAxis(50);
  scene2.add(axis2);

  miniAxisLabels("X", 50, -5, 0);
  miniAxisLabels("Y", 5, 50, 0);
  miniAxisLabels("Z", 0, 5, 50);

  var gui = new dat.GUI();
  gui.add(guicontrols, 'textSize', 0, 120);
  gui.add(guicontrols, 'showFrontCurve');
  gui.add(guicontrols, 'showBackCurve');

  camera.position.z = 1;

  var geometry = new THREE.BoxGeometry( 30, 30, 30 );
  var material = new THREE.MeshNormalMaterial();

  var mesh = new THREE.Mesh( geometry, material );
  mesh.position.x = 150;
  mesh.position.y = 150;
  mesh.position.z = 0;

  scene.add( mesh );
  objects.push( mesh );

  console.log(camera);

  const orbitControls = new THREE.OrbitControls( camera, renderer.domElement );

  const dragControls = new THREE.DragControls( objects, camera, renderer.domElement );
  dragControls.addEventListener( 'dragstart', function () { orbitControls.enabled = false; } );
  dragControls.addEventListener( 'dragend', function () { orbitControls.enabled = true; } );

}

Screenshot from 2020-02-12 15-00-35
Screenshot from 2020-02-12 15-00-351564×882 2.07 KB

2

Can you try to use 0.1 as the near value and 1000 as a the far value? The view frustum could be too small in order to see your 3D objects.

3

Thank you @Mugen87!!! You are right. My problem solved. I corrected my codes with this way:

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10000 );