CubeCamera looks magnified

Questions
,
1

Hi guys. i’m trying to use CubeCamera to reflect the surroundings of a mesh but this reflection has a weird magnification which I cannot figure out how to solve. I attach a screenshot. The furniture in front is reflectin the blue jar. Looks very weird. How do I solve this? I tried this:

  if (renderTarget) {
    renderTarget.mapping = CubeRefractionMapping
  }

  return (
    <mesh
      material-refractionRatio={0}
      material-map={renderTarget}
    >
    </mesh>
  )

Using refractionRatio along with CubeRefractionMapping, but does not seem to have any effect

2023-07-06 18_26_06-For2Home
2023-07-06 18_26_06-For2Home1075×759 30 KB

2

I found out that refractionRatio is now exclusive to MeshPhongMaterial… is there any way to solve this with MeshStandardMaterial?

3

You can see by looking at the reflection that the cubeCamera was placed at a lower position than the perspective camera, so it looks bigger. Try changing cubeCamera position to better reflect the expected effect.

As a side point, remember that environment cubeMaps are intented to reflect distant objects like surroundings, terrains, far buildings, skys and so on. If you need a plane reflection for a near object you could try with threejs oficial mirror-reflector instead.

1 Like
4

So mirror-reflector is not an option for me since I need to also be able to apply roughness,metalness and other material properties to my furniture. I tried offseting the camera and this is the result I got:

image
image766×587 61.4 KB

While the item itself looks smaller it also looks further. I really do not care about the quality of the reflection as long as it is accurate when it comes to size.

5

you need to place a cube camera behind the mirror exactly where a normal camera reflection would be

6

Reflector’s material is modifiable, like any material :thinking: White Gold (Reflector, custom geometry)

1 Like
7

I do not know if moving the CubeCamera is even an option, since the furniture in front has 4 sides and I need all of them to reflect correctly. If I offset the camera to one side, the opposite side will also suffer that offset.

8

oh yes, of course, when using a single cube camera the reflection will be correct for a single plane at most. all the rest will be wrong, and you will have to deal with that.

1 Like
9

iirc r3f has it extended with all the standard properties, like metallic and roughness

10

I see what you mean, but I do not think I can use the texture of my furniture while using reflector, am I correct?

image
image801×626 58.2 KB

I applied a MeshReflectorMaterial (I’m using r3f) and created some offset depending of the mesh sizeand it looks like this. It’s as if you put a mirror just in front of the mesh, but all its properties and textures are gone.

I’m using react-three-gpu-pathtracing to render my scene with Pathtracing and it looks just how I need it but in the normal render:

image
image709×735 32.9 KB

11

it has mixStrength, right, I guess if you drop it under 1 you’ll see all your textures

12

Thanks for the help! But mixStrength seems to attenuate the light reflecting my furniture but that is about it. I applied MeshReflectorMaterial on my furniture and got this result, here I show my furniture rotated since some viewpoints do not reflect anything at all:

image
image939×712 21.6 KB

Texture is completely gone.

13

silly question but did you copy them over to the new material :sweat_smile:

1 Like
14

I was not. This is now revealing the texture, thanks a lot!.
This now reveals the textures but the reflection still looks weird. I get this behaviour:

image
image934×790 23.3 KB

While the lower part of the mesh seems to reflect, the upper part is not doing it. This furniture is composed of 1 mesh and I’m applying MeshReflectorMaterial from Drei:

    <mesh
      ref={ref}
      key={uuid}
      {...rest}
      castShadow
      receiveShadow
    >
      {envMapIntensity > 0 && (
        <MeshReflectorMaterial
          mirror={1}
          resolution={1024}
          side={DoubleSide}
          roughness={roughness}
          metalness={metalness}
          opacity={opacity}
          envMapIntensity={envMapIntensity}
          envMap={renderTexture}
          depthWrite={opacity < 1 ? false : true}
          transparent={opacity < 1 ? true : false}
          map={texture ?? map}
          // Brillo del reflejo
          mixStrength={envMapIntensity}
        />
      )}
    </mesh>

This changes depending on how the mesh is rotated, I get some parts reflecting and some that do not:

Seems like the whole visible mesh is reflective:

image
image895×652 52.6 KB

Now not at all:

image
image1231×716 25 KB

Also, if I rotate the mesh I sometimes get this error:

image
image747×214 5.99 KB

Any help is greatly appreciated.

15

that is expected - see in the code. basically no matter what the mesh shape is, the material still behaves as if it is applied to a plane.