OrthographicCamera with black background

Questions
1

Hi guys

I’m using OrthographicCamera and when I render my objects this black background is appearing, I don’t know how to remove it.

Does anyone know why this is occurring?

image
image1071×608 51.2 KB

The curious thing is that this is hiding my object

my camera is this

   this.camera = new THREE.OrthographicCamera();
     this.camera.left = this.cameraWidth / -2;
     this.camera.right = this.cameraWidth / 2;
     this.camera.top = this.cameraHeight / 2;
     this.camera.bottom = this.cameraHeight / -2;
     this.camera.near = -1000;
     this.camera.far = 10000;
     this.camera.position.z = 5000;
     this.camera.updateProjectionMatrix();

and my controls

    this.controls.rotateSpeed = 0.5;

    this.controls.enableDamping = true;
    this.controls.dampingFactor = 0.1;

    this.controls.screenSpacePanning = true;
    this.controls.panSpeed = 0.7;

    this.controls.enableZoom = true;
    this.controls.mouseButtons = {
      LEFT: THREE.MOUSE.RIGHT,
      MIDDLE: THREE.MOUSE.LEFT,
      RIGHT: THREE.MOUSE.LEFT,
    };
    this.controls.update();
2

This could be your empty canvas showing, in the area not occupied by 3D models.

Try to add transparency to the renderer setup, like so:

new THREE.WebGLRenderer({
  ...
  alpha: true,
});

this will make the canvas transparent and you should see the html page showing through it.

If you want to change the canvas color use scene.background property.

3

also your camera near should be greater than 0, but I don’t think that is the cause your problem.

I can’t see any benefit of using a negative number here.

4

hello, you’re right it’s really better to use a value above zero even if that’s not actually the problem. I will follow your advice. Thanks.

5

Alpha actually solves part of the problem. Is there a way to have a view of the plan almost infinitely. I mean, without the html or background part appearing?

image
image1044×592 41.2 KB

I currently have this visualization above and it doesn’t seem so correct to me

it gets to a point where the model itself is hidden and I can’t make it visible

image
image1044×592 49.1 KB

6

Some background will always be present, either the canvas or html page, nothing can be endlessly transparent.

Your camera has a near and far planes, you can only see models in between those planes depth-wise (and within the frustum side borders).

As seanwasere noticed, you need to set your near plane to be positive; to increase visibility you can increase far plane value but not to infinity and it has its side-effects such as more obvious z-fighting.

You can also move your camera close of course, and decrease near value to keep the model inside the frustum.

7

Actually following your comments I got an interesting result. and it’s exactly as you said. A chandelier to make the model stand on the trunk.

this.camera = new THREE.OrthographicCamera();
this.camera.left = this.cameraWidth / -2;
this.camera.right = this.cameraWidth / 2;
this.camera.top = this.cameraHeight / 2;
this.camera.bottom = this.cameraHeight / -2;
this.camera.near = 1;
this.camera.far = 1000;