Three.js - 在同一个对象上放置两个材料。

Question

我想知道如何将两种材质放在同一个对象上......我有一个着色器材质，我用它来做颜色，但我也想有一个基底兰伯特着色。

下面是代码。

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);

你能帮助我吗？

Answer 1

下面是代码： var material1 =... 是一个展示如何将兰伯特卡盘融入到你自己的着色器中的提琴。这是你想要的吗？它在顶点着色器中的计算方式和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
    });