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

Question

我正在迈出使用 Three.js 和 JavaScript 编码的第一步。从几个月前开始，我就开始试验着色器和着色器材质。

问题是我加载了一个带有菲涅耳 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>

编辑：

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

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

你有什么建议吗？

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

});

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

Problems to visualize all the sides of a mesh using Three.js and Fresnel Shader

javascript

shader

three.js