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

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

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

three.js r.71

由安迪编辑这是一个反映代码https://jsfiddle.net/t2pv9ku0/11/的小提琴，模仿三个人的反思

使用cubeCamera不工作的Threejs隔绝了反射着色器

1 个答案: