1

我使用 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);
}

感谢任何帮助！

4

1 回答 1

1

three.js 中的环境映射是基于被反射的对象“无限”远离反射面的假设。

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

您可以在本教程中阅读有关此主题的更多信息。

三.js r.58

于 2013-06-29T22:06:48.550 回答