Three.js - 將兩種材質放在同一個物體上

我想知道如何將兩種材質放在同一個物體上... 我有一個用於顏色的着色器材質，但是我也想有一個基礎蘭伯特陰影。Three.js - 將兩種材質放在同一個物體上

下面是代碼：

var material1 = new THREE.ShaderMaterial({ 
    vertexShader: document.getElementById('vertexShader').textContent, 
    fragmentShader: document.getElementById('fragmentShader').textContent 
}); 

var material2 = new THREE.MeshLambertMaterial({ 
    color: 0xffffff, 
}); 

var materials = [material1, material2]; 

var group = new THREE.Object3D(); 
var plane = new THREE.Mesh(geometry, materials);

你能幫助我嗎？

來源

2016-01-02 paulolol

你能不能簡單地設置蘭伯特着色器的顏色？要將多個材質設置爲單個網格，您可以使用MeshFaceMaterial，但不會覆蓋它們，就像聽起來像您想要的那樣。這聽起來像是你只是想將lambert陰影添加到你自己的自定義着色器中，這應該不會太難。 – 2pha

@ 2pha這正是我想要的。我找到了一個關於lambert陰影的GLSL教程，但它使用了着色器代碼中創建的燈光。我不知道如何使用「全球照明」。無論如何，這裏是：https://www.opengl.org/sdk/docs/tutorials/ClockworkCoders/lighting.php – paulolol

一個好的開始方法是看看three.js中的材質是如何放在一起的。你可以在[ShaderLib.js]（https://github.com/mrdoob/three.js/blob/master/src/renderers/shaders/ShaderLib.js）中看到它。實際着色器塊[HERE]（https://github.com/mrdoob/three.js/tree/master/src/renderers/shaders/ShaderChunk）。 [我自己的着色器材質實驗]（http://blog.2pha.com/experimenting-threejs-shaders-and-shadermaterial）可以幫助你。 – 2pha

Here是一個小提琴，演示如何將lambert卡盤納入您自己的着色器。
這是你想要的嗎？
它在頂點着色器中計算與THREE.MeshLambertMaterial相同。

var myShader = { 
    uniforms : THREE.UniformsUtils.merge([ 
    THREE.UniformsLib['lights'], 
    { 
     color : {type:"c", value:new THREE.Color(0x0000ff)} 
    } 
    ]), 
    vertexShader : [ 
    THREE.ShaderChunk[ "common" ], 
    'varying vec3 vLightFront;', 
    THREE.ShaderChunk[ "lights_lambert_pars_vertex" ], 
    'void main() {', 
    ' vec3 transformedNormal = normalMatrix * normal;', 
    ' vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);', 
    THREE.ShaderChunk[ "lights_lambert_vertex" ], 
    ' gl_Position = projectionMatrix * mvPosition;', 
    '}' 
    ].join('\n'), 
    fragmentShader : [ 
    'uniform vec3 color;', 
    'varying vec3 vLightFront;', 
    'void main() {', 
    ' vec3 outgoingLight = color.rgb + vLightFront;', 
    ' gl_FragColor = vec4(outgoingLight, 1.0);', 
    '}', 
    ].join('\n'), 
}; 

    material = new THREE.ShaderMaterial({ 
     uniforms : myShader.uniforms, 
     vertexShader : myShader.vertexShader, 
     fragmentShader : myShader.fragmentShader, 
     lights: true 
    });

來源

2016-01-05 00:14:26 2pha

Three.js - 將兩種材質放在同一個物體上

回答

相關問題