Three.js ShaderMaterial从Blender导入的网格灯

我试图在three.js r77中使用灯光获得ShaderMaterial。它适用于具有简单BoxGeometry的网格时正常工作，但在应用于从Blender导入的网格时表现不正确。Three.js ShaderMaterial从Blender导入的网格灯

说明问题的简单jsfiddle是here。左边的网格是从Blender导出器创建的。右侧的网格由简单的BoxGeometry创建。两者都使用相同的ShaderMaterial。指示灯的位置由DirectionalLightHelper指示。

右侧的网格正在正确点亮，而左侧的网格未正确点亮。很明显，问题出在我的着色器代码中。我最初认为问题出在导入网格的UV贴图上，但看起来并不正确。在jsfiddle示例中，UV映射从导入的几何体直接复制到BoxGeometry网格中 - 由于Blender和three.js之间的坐标差异，它们相对于彼此旋转，但照明仍然在与进口的UV网格在右边。

的着色器代码是：

THREE.TestShader = { 
    uniforms: { 
    "uDirLightPos": { 
     type: "v3", 
     value: new THREE.Vector3(20, 20, 20) 
    }, 
    "uDirLightColor": { 
     type: "c", 
     value: new THREE.Color(0xffffff) 
    }, 
    "uTexture": { 
     type: "t", 
     value: null 
    }, 
    }, 
    vertexShader: [ 
    "varying vec3 vNormal;", 
    "varying vec3 vViewPosition;", 
    "varying vec2 vUv;", 
    "void main() {", 
    "vUv = uv;", 
    "vNormal = normalize(normalMatrix * normal);", 
    "vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);", 
    "vViewPosition = -mvPosition.xyz;", 
    "gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);", 
    "}" 
    ].join("\n"), 
    fragmentShader: [ 
    "uniform vec3 uDirLightPos;", 
    "uniform vec3 uDirLightColor;", 
    "varying vec2 vUv;", 
    "varying vec3 vNormal;", 
    "varying vec3 vViewPosition;", 
    "varying vec4 mvPosition;", 
    "uniform sampler2D uTexture;", 

    "void main() {", 
    "vec4 lDirection = viewMatrix * vec4(uDirLightPos, 0.0);", 
    "vec3 lVector = normalize(lDirection.xyz);", 
    "vec3 normal = normalize(vNormal);", 
    "float diffuse = dot(normal, lVector);", 
    "vec4 texel = texture2D(uTexture, vUv);", 
    "gl_FragColor = vec4(uDirLightColor * diffuse, 1.0) * texel;", 
    "}" 
    ].join("\n") 
};

除了解决这个特定的问题，一个指向在three.js所着色的东西更好的文档，将不胜感激。 ShaderChunk，ShaderLib和UniformsLib的官方文档并非您所说的详尽无遗。

来源

2016-06-09 jbg

您的Blender导出的模型有不正确的法线。

vnh1 = new THREE.VertexNormalsHelper(mesh1, 1, 0xff0000, 1); 
scene.add(vnh1);

小提琴：https://jsfiddle.net/5j0axcgz/1/

three.js所r.77

来源

2016-06-09 01:33:56 WestLangley

嗯，这似乎是一个问题与three.js所搅拌机出口国---法线在搅拌机正确。 – jbg

https://github.com/mrdoob/three.js/pull/8647？ – WestLangley

看起来它是同样的问题，但它似乎并没有在主导出口商中被修复。 – jbg

Three.js ShaderMaterial从Blender导入的网格灯

回答

相关问题