Threejs使用cubeCamera隔离反射着色器不起作用答案

【问题标题】：Threejs isolated reflection shader using cubeCamera not workingThreejs使用cubeCamera隔离反射着色器不起作用
【发布时间】：2015-08-03 10:38:56
【问题描述】：

jsFiddle https://jsfiddle.net/t2pv9ku0/8/ 演示了我的问题。

我正在尝试使用RawShaderMaterial 在 ThreeJS 中重新创建反射效果。还有several examples of这个效果，挺标准的。

创建一个cubeCamera 并将其传递到着色器以提供samplerCube：

material.uniforms.reflectionSampler.value = cubeCamera.renderTarget;

在顶点着色器中计算反射向量：

varying vec3 vReflect;
...
vec3 inverseTransformDirection( in vec3 normal, in mat4 matrix ) {
    return normalize( ( vec4( normal, 0.0 ) * matrix ).xyz );
}
...
vec3 worldNormal = transformDirection( objectNormal, modelMatrix );
vec3 cameraToVertex = normalize( worldPosition.xyz - cameraPosition );
vReflect = reflect( cameraToVertex, worldNormal );

它在 fragment 着色器中用于从 cubeCamera 的渲染中读取：

gl_FragColor = vec4( vNormal.y ) + textureCube( reflectionSampler, vReflect );

但是，正如您在 jsFiddle 中看到的那样，效果似乎无法正常工作。它似乎从 samplerCube 中错误地读取了示例位置。我试过摆弄一切

【问题讨论】：

标签： reflection three.js glsl webgl shader

【解决方案1】：

你的立方体相机不是场景的一部分，所以你必须调用

cubeCamera.updateMatrixWorld();

更新小提琴：https://jsfiddle.net/t2pv9ku0/9/

或者，您可以将 cubeCamera 添加到场景中。

three.js r.71

由 Andy 编辑这是一个反射代码 https://jsfiddle.net/t2pv9ku0/11/ 的小提琴，它模仿了三个人的反射

【讨论】：

谢谢你，我猜我的错误报告有助于实现这一点:)