Make environment map scale when moving from the object

Question

I use CubeCamera to build a simple reflection model. The setup can be seen on the picture below.

enter image description here

If the camera is close enough to the cube - the reflection looks fine. However, if i move away from the objects - the reflection just gets bigger. See the picture below.

enter image description here

This is not the way i want it. I'd like the reflection to proportionally get smaller. I tried to play with different settings, then I thought this could be achieved using a proper shader program (just squish the cube texture, kind of), so i've tried to mess with the existing PhongShader, but no luck there, i'm too newbie to this.

Also, i've noticed that if i change the width and height of the cubeCamera.renderTarget, i.e.

cubeCamera.renderTarget.width = cubeCamera.renderTarget.height = 150;

i can get the proper dimensions of the reflection, but its position on the surface is wrong. It's visible from the angle presented on the picture below, but not visible if i place the camera straight. Looks like the texture needs to be centered.

enter image description here

The actual code is pretty straightforward:

var cubeCamera = new THREE.CubeCamera(1, 520, 512);

cubeCamera.position.set(0, 1, 0);
cubeCamera.renderTarget.format = THREE.RGBAFormat;
scene.add(cubeCamera);

var reflectorObj = new THREE.Mesh(
    new THREE.CubeGeometry(20, 20, 20),
    new THREE.MeshPhongMaterial({
        envMap: cubeCamera.renderTarget,
        reflectivity: 0.3
    })
);

reflectorObj.position.set(0, 0, 0);
scene.add(reflectorObj);

var reflectionObj = new THREE.Mesh(
    new THREE.SphereGeometry(5),
    new THREE.MeshBasicMaterial({
        color: 0x00ff00
    })
);

reflectionObj.position.set(0, -5, 20);
scene.add(reflectionObj);

function animate () {
    reflectorObj.visible = false;
    cubeCamera.updateCubeMap(renderer, scene);
    reflectorObj.visible = true;

    renderer.render(scene, camera);  

    requestAnimationFrame(animate);
}

Appreciate any help!

WestLangley WestLangley · Accepted Answer · 2013-06-29T22:06:48

Environment mapping in three.js is based on the assumption that the object being reflected is "infinitely" far away from the reflective surface.

The reflected ray used in the environment map look-up does not emanate from the surface of the reflective material, but from the CubeCamera's center. This approximation is OK, as long as the reflected object is sufficiently far away. In your case it is not.

You can read more about this topic in this tutorial.

three.js r.58

Make environment map scale when moving from the object

1 Answers