HDR Background becomes a tiny cube when using Three.OrthographicCamera and is unable to properly light meshes

Questions
,
1

I also posted this to HDR Background becomes a tiny cube when using Three.OrthographicCamera and is unable to properly light meshes. · Issue #21140 · mrdoob/three.js · GitHub because I was not sure if it was a bug or something wrong on my part.

Describe the bug

A clear and concise description of what the bug is. Before submitting, please remove unnecessary sections.
When using THREE.OrthographicCamera and HDR Lighting, The HDR Lighting does not cover the background, and it is instead a tiny cube that is hard to spot at first but can be seen.

A problem with this is that the mesh does not get the proper lighting that it needs. It appears to be black, and the colors are hard to find. However, the mesh still has the “metalness” retained in it.

To Reproduce

Steps to reproduce the behavior:

  1. Go to
    Glitch :･ﾟ✧ and remix the project. Do this to edit it.
  2. Change the want_to_see_bug variable to false
  3. Click on “show”
  4. Use your mouse to find the glasses mesh. They shouldn’t be visible at first, so you will have to use OrbitControls to find them. You will have to move your cursor to the right while clicking the screen to find them. You can clearly see the HDR Background as well.

Picture of Expected results:

image
image1431×714 142 KB

  1. To see the bug, change the want_to_see_bug variable to true
  2. You will be able to see the glasses immediately. They will be darker this time. If you look closely, you may notice a little speck.

Picture of Expected results:
image

6.Zoom into the speck. You will see the hdr background.

What you should see:

image
image882×770 105 KB

You can find the code if you click the link in the “live example” section.

Live example

Expected behavior

I expected to see the glasses, with the expected color and texture, as well as the HDR Background actually acting like a background and not as a little speck.

Platform:

  • Device: [Desktop, Mobile]
  • OS: [Windows, MacOS, Linux, Android, iOS]
  • Browser: [Chrome, Firefox, Safari, Edge]
  • Three.js version: [dev, r???]
  • I am not sure about the THREE.js version as I used https://threejs.org/build/three.js . I assume it gives the latest version. Also, For my RGBELoader(which loads texture for hdr background) I used three@0.116.1 and for my GLTFLoader(which loads the 3d model) I used threejs/r122 . Not sure if those mean versions but they were present in the links.
2

It does not make sense to use an orthographic camera with a skybox, see:

1 Like
3

A makeshift solution that I did was that I just added a hemisphere light to show the texture. Now, I can have reflections and such while also seeing the color. I had to use THREE.OrthographicCamera for a specific package that I used. It required the strange camera settings that I had as well.

4

This only worked because i didn’t really want the background itself, but just the effects of its lighting.