Question

我正在使用Three.js和使用JavaScript编码的第一步。几个月前，我正在试用Shaders和Shader Materials。

问题是我加载了菲涅耳材质的网格。我可以完美地看到表面上的材料，但是当我转动它时，我无法看到网格的内部：http://codepen.io/gnazoa/pen/WrLJay

我尝试制作第二种材料并将其放在着色器材料下面。但这不是最佳解决方案，有时，当我加载浏览器时，它无法正常工作：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一样简单，在材质中可以看到网格的所有边。

但是现在我试图搜索为什么我的网格在内部不是黑色的，如果我的颜色均匀是黑色的。

你有什么建议吗？

Answer 1

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

最简单的解决方案是设置不同的内部和外部材料。外部采用高光泽黑色，内部采用非反光黑色。我测试了它并且效果很好：

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可视化网格的所有边的问题

1 个答案: