我正在尝试使用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
,在材质中可以看到网格的所有面。
但是现在我想搜索一下,为什么我的网片颜色统一是黑色,里面却不是黑色的。
你有什么建议吗?
你的里面材质的光泽度太高了,以至于一次又一次的反射出白色。因为这种白色的无限反射,你看不到黑色。
最简单的解决方法就是设置不同的内外材质。你的高度光泽的黑色在外面,不反光的黑色在里面。我测试了一下,效果相当好。
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 );
});