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

Question

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

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

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

但是，正如您在 jsFiddle 中看到的那样，效果似乎没有正常工作。它似乎从 samplerCube.我试过摆弄一切

Answer 1

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

cubeCamera.updateMatrixWorld();

已更新 fiddle：https://jsfiddle.net/t2pv9ku0/9/

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

three.js r.71

Andy 编辑 这是一个 fiddle 带有反射代码 https://jsfiddle.net/t2pv9ku0/11/ 模仿三的反射

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

Threejs isolated reflection shader using cubeCamera not working

reflection

shader

glsl

webgl

three.js