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導入的網格燈

回答

相關問題