使用自定义fragmentShader进行灯光和阴影处理

Question

我正在创建一个球体并为其添加失真，这样可以正常工作。 当我看到线框时，它就像这样

并且线框已经打开，它看起来像这样

正如您所看到的那样，没有阴影，并且在转动线框时看不到失真。

我正在寻找的是我的自定义fragmentShader中的内容。

我用过这个

        // calc the dot product and clamp
        // 0 -> 1 rather than -1 -> 1
        vec3 light = vec3(0.5,0.2,1.0);

        // ensure it's normalized
        light = normalize(light);

        // calculate the dot product of
        // the light to the vertex normal
        float dProd = max(0.0, dot(vNormal, light));

        // feed into our frag colour
        gl_FragColor = vec4(dProd, dProd, dProd, 1.0);

但这只会造成一种非常丑陋的假光。 任何人的想法？

提前致谢， Wezy

Answer 1

如果你想使用Three.js'灯（我想不出原因），你需要包含相应的着色器块：

1. 看一下WebGLRenderer composes its shaders in THREE.ShaderLib
的方式
2. 选择一个接近您想要的材料并将其定义（制服和着色器代码）复制到您的代码中，将其重命名为自定义
3. 删除不需要的块，并将自定义代码添加到适当的位置