从对象移动时进行环境贴图缩放

Question

我使用CubeCamera构建一个简单的反射模型。设置可以在下面的图片中看到。

如果相机足够靠近立方体 - 反射看起来很好。但是，如果我离开物体 - 反射会变大。见下图。

这不是我想要的方式。我希望反射按比例变小。我尝试使用不同的设置，然后我认为这可以使用适当的着色器程序（只是挤压立方体纹理，有点）来实现，所以我试图弄乱现有的PhongShader，但没有运气，我'我也是新手。

另外，我注意到如果我改变cubeCamera.renderTarget的宽度和高度，即

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

我可以得到反射的适当尺寸，但它在表面上的位置是错误的。从下图中显示的角度可以看到，但如果我将相机放置得不可见。看起来纹理需要居中。

实际代码非常简单：

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);
}

感谢任何帮助！

Answer 1

three.js中的环境映射基于这样的假设：被反射的对象是无限的＆＃34;远离反射表面。

环境地图查找中使用的反射光线不是从反射材料的表面发出，而是从CubeCamera的中心发出。只要反射物体足够远，这种近似就可以了。在你的情况下，它不是。

您可以在此tutorial中了解有关此主题的更多信息。

three.js r.58