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

问题描述 投票:1回答:1

我正在尝试使用Three.js和JavaScript进行编码。从几个月前开始,我开始尝试使用Shader和Shader材料。

问题是,我加载了一个带有菲涅尔材质的网格。我可以看到完美的材料在表面,但我不能看到在内部的网格,当我把它 。http:/codepen.iognazoapenWrLJay的。

我试着做了第二个材质,并把它放在着色器材质下面。但这并不是最好的解决方案,有时,当我加载浏览器时,它不能正常工作。http:/codepen.iognazoapenrxovKb。

你有什么建议吗?有没有办法用菲涅尔着色器看到网格的所有面?

这里我让我使用的着色器的代码。

    <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,在材质中可以看到网格的所有面。

但是现在我想搜索一下,为什么我的网片颜色统一是黑色,里面却不是黑色的。

你有什么建议吗?

javascript three.js shader
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 );

});
© www.soinside.com 2019 - 2024. All rights reserved.