Javascript 使用Three.js和Fresnel着色器可视化网格所有边的问题

我开始使用Three.js并使用JavaScript编码。从几个月前开始，我就开始试验着色器和着色器材质

问题是我用菲涅耳材料加载了一个网格。我可以清楚地看到曲面中的材质，但在旋转网格时，我看不到网格的内部：

我尝试制作第二种材质，并将其置于着色器材质下。但这不是最好的解决方案，有时，当我加载浏览器时，它无法正常工作：

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

在这里，我将介绍我正在使用的着色器的代码：

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

均匀浮动菲涅耳；
均匀浮动菲涅耳刻度；
均匀浮动菲涅耳功率；
可变浮点数；
可变矢量反射；
void main（）{
vec4 mvPosition=modelViewMatrix*vec4（位置，1.0）；
vec4世界位置=模型矩阵*vec4（位置，1.0）；
vec3 worldNormal=normalize（mat3（模型矩阵[0].xyz，模型矩阵[1].xyz，模型矩阵[2].xyz）*normal）；
vec3 I=worldPosition.xyz-摄像机位置；
vReflect=反射（I，正常）；
vReflectionFactor=fresnelBias+fresnelScale*pow（1.0+dot（标准化（I）、worldNormal）、fresnelPower）；
gl_位置=投影矩阵*mvPosition；
}
vec3颜色均匀；
均匀取样器；
可变矢量反射；
可变浮点数；
void main（）{
vec4 envColor=textureCube（envMap，vec3（-vReflect.x，vReflect.yz））；
gl_FragColor=vec4（混合（颜色，envColor.xyz，vec3（钳位（vReflectionFactor，0.0，1.0））），1.0）；
}

编辑：

我已经在手册中找到了答案，它非常简单，就像在材质中写入

面：三。双面
，以查看网格的所有面

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

你有什么建议吗？
你的内部材料非常有光泽，一次又一次地反射出白色。因为白色的无限反射，你看不到黑色

最简单的解决方案是设置不同的内外材质。外部为高光泽黑色，内部为非反光黑色。我对它进行了测试，效果非常好：

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

});

您的内部材质非常有光泽，可以一次又一次地反射白色。因为白色的无限反射，你看不到黑色

最简单的解决方案是设置不同的内外材质。外部为高光泽黑色，内部为非反光黑色。我对它进行了测试，效果非常好：

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

});