javascript - 使用 Three.js 和 Fresnel Shader 可视化网格所有面的问题

Question

我正在尝试使用 Three.js 并使用 JavaScript 进行编码。从几个月前开始，我就开始尝试着色器和着色器 Material 。

问题是我加载了带有菲涅耳 Material 的网格。我可以完美地看到表面的 Material ，但当我转动它时，我看不到网格的内部:http://codepen.io/gnazoa/pen/WrLJay

我尝试制作第二种 Material 并将其放在着色器 Material 下。但这不是最好的解决方案，有时，当我加载浏览器时，它无法正常工作:http://codepen.io/gnazoa/pen/rxovKb

你有什么建议吗？有没有办法使用菲涅尔着色器查看网格的所有侧面？

这里我列出了我正在使用的着色器的代码:

    <script id="vertexShader" type="x-shader/x-vertex">

    uniform float fresnelBias;
    uniform float fresnelScale;
    uniform float fresnelPower;

    varying float vReflectionFactor;
    varying vec3 vReflect;

    void main() {
      vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
      vec4 worldPosition = modelMatrix * vec4( position, 1.0 );

      vec3 worldNormal = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );

      vec3 I = worldPosition.xyz - cameraPosition;

      vReflect = reflect( I, worldNormal );
      vReflectionFactor = fresnelBias + fresnelScale * pow( 1.0 + dot( normalize( I ), worldNormal ), fresnelPower );

      gl_Position = projectionMatrix * mvPosition;

    }
      </script>

      <script id="fragmentShader" type="x-shader/x-fragment">

    uniform vec3 color;
    uniform samplerCube envMap;

    varying vec3 vReflect;
    varying float vReflectionFactor;

    void main() {
      vec4 envColor = textureCube( envMap, vec3( -vReflect.x, vReflect.yz ) );
      gl_FragColor = vec4(mix(color, envColor.xyz, vec3(clamp( vReflectionFactor, 0.0, 1.0 ))), 1.0);
    }
    </script>

编辑:

我已经在手册中找到了答案，很简单，只要在 Material 中写side: THREE.DoubleSide，就可以看到网格的所有边。

但现在我试图寻找如果我的颜色制服是黑色的，为什么我的网格内部不是黑色的。

你有什么建议吗？

Answer 1

你的内部 Material 非常有光泽，它会一遍又一遍地反射白色。由于白色的无限反射，你看不到黑色。

最简单的解决方案是设置不同的内部和外部 Material 。外部为高光泽黑色，内部为不反光黑色。我测试了一下，效果很好:

outsideMaterial = new THREE.ShaderMaterial({
    side: THREE.FrontSide,
    uniforms : uniforms,
    vertexShader : vertexShader,
    fragmentShader : fragmentShader,
    wireframe: false
});
insideMaterial = new THREE.MeshBasicMaterial({
    side: THREE.BackSide,
    color: 0x000000
});

var loader = new THREE.BinaryLoader();
loader.load( "http://threejs.org/examples/obj/walt/WaltHead_bin.js", function ( geometry ) {

    geometry.scale( 7, 7, 7 );

    blackObject = new THREE.Object3D();

    inside = new THREE.Mesh( geometry, insideMaterial );
    outside = new THREE.Mesh( geometry, outsideMaterial );

    blackObject.add( inside );
    blackObject.add( outside );
    scene.add( blackObject );

});