three.js發射材質貼圖

我目前在three.js中嘗試了一下，我想使用發射貼圖。我試過只是將一個紋理加載到phong材質的發射屬性中，但不幸的是，它不能這樣工作。這裏是我的代碼：three.js發射材質貼圖

var params = { 
    emissive: THREE.ImageUtils.loadTexture(emissive), 
    shininess: shininess, 
    map: THREE.ImageUtils.loadTexture(map), 
    normalMap: THREE.ImageUtils.loadTexture(normalMap), 
    normalScale: new THREE.Vector2(0,-1), 
    envMap: this.reflectionCube, 
    combine: THREE.MixOperation, 
    reflectivity: 0.05 
}; 
var material = new THREE.MeshPhongMaterial(params);

任何人都可以指出我在正確的方向得到發射圖的工作？

來源

2014-05-18 Kevin Kuyl

'MeshPhongMaterial'不支持發射貼圖。 – WestLangley

是的，我想。但我需要發射地圖工作。有什麼支持發射地圖嗎？ –

不可以。您可以通過搜索代碼庫來查看。但是，您可以創建自己的自定義「ShaderMaterial」。 – WestLangley

可以通過從現有的three.js材質（MeshPhong，MeshLambert等）擴展着色器來製作具有發射（發光）貼圖支持的材質。

好處是您可以保留標準three.js材質的所有功能，並且還可以添加輝光貼圖支持。

對於此示例的目的，我將使用three.js所的Phong着色爲起點：

做一個「PhongGlowShader」通過擴展（通過UniformsLib/ShaderChunk）現有的Phong着色器

添加發光貼圖制服：

"glowMap" : { type: "t", value: null }, 
"glowIntensity": { type: "f", value: 1 },

添加發光貼圖因子與其片段着色器：

float glow = texture2D(glowMap, vUv).x * glowIntensity * 2.0; // optional * 2.0 and clamp 
gl_FragColor.xyz = texelColor.xyz * clamp(emissive + totalDiffuse + ambientLightColor * ambient + glow, 0.0, 2.0) + totalSpecular;

創建使用着色器新THREE.ShaderMaterial，並通過輝光紋理以其一貫的制服

進一步的細節一起，來看看這個小提琴：http://jsfiddle.net/Qr7Bb/2/。

你會注意到我做了一個繼承自THREE.ShaderMaterial的「MeshPhongGlowMaterial」類。這純粹是可選的;您也可以創建一個具有上述着色器和制服的新THREE.ShaderMaterial函數。

標準的「發射」屬性會影響網格的整個表面，它與發光貼圖無關（而是使用自定義的「glowIntensity」屬性）。

來源

2014-05-18 13:12:45 timeinvariant

這不是一個簡單的問題，所以恭喜你的嘗試。你在你的jsfiddle例子中使用了'this.map = true;'。這有點危險。相反，正確的方法是設置'ShaderMaterial.defines'屬性。你能想出如何做到這一點，所以定義必須設置的所有屬性正確設置「定義」？目標是確保所有其他'MeshPhongMaterial'屬性在添加'glowMap'特性後繼續工作。 – WestLangley

@WestLangley謝謝。小提琴中的代碼（根據我目前正在進行的項目調整）適用於基本案例。我完全可以理解你的觀點;理想情況下，我應該將'glowMap'功能直接集成到'MeshPhongMaterial'中。如果我曾經做過（並且正確測試），我一定會發送一個拉取請求。 – timeinvariant

我一直在用小提琴演奏很多東西，我想我現在已經半懂了。然而，我曾經遇到過一些問題，我認爲它與WestLangley所說的關於定義的問題有關，是否有人會如此善良，給我一個關於如何設置'define'的解釋？或者指向正確的方向？ –

three.js發射材質貼圖

回答

相關問題