Two material in the same place in three.js

Question

I'm trying to put two materials in a plane, one over the other. I mean, I have a bricks background and over it I need to put another material whit other texture.

Answer 1

Use the following approach to apply more than a single material to a mesh. The idea is to define BufferGeometry.groups in a way such that the entire geometry (not just parts of it) is rendered with different materials.

var renderer, scene, camera;

init();
render();

function init() {

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setClearColor( 0x000000, 0.0 );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set( 15, 20, 30 );
    scene.add( camera );

    var controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.addEventListener( 'change', render );
    controls.minDistance = 10;
    controls.maxDistance = 50;

    scene.add( new THREE.AmbientLight( 0xffffff, 0.1 ) );
  
    var light = new THREE.PointLight( 0xffffff, 1 );
    camera.add( light );

    var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
    geometry.clearGroups();
    geometry.addGroup( 0, Infinity, 0 );
    geometry.addGroup( 0, Infinity, 1 );

    // textures
    var loader = new THREE.TextureLoader();
    var map = loader.load( 'https://threejs.org/examples/textures/decal/decal-diffuse.png', render );
    var normalMap = loader.load( 'https://threejs.org/examples/textures/decal/decal-normal.jpg', render );

    var material1 = new THREE.MeshPhongMaterial( {
        color: 0xffffff, 
        specular: 0x222222,
        shininess: 100,
        map: map,
        normalMap: normalMap,
        alphaTest: 0.5,
        visible: true
    } );

    var material2 = new THREE.MeshNormalMaterial( {
        opacity: 0.5,
        transparent: true,
        visible: true
    } );

    mesh = new THREE.Mesh( geometry, [ material1, material2 ] );
    scene.add( mesh );

}

function render() {

    renderer.render( scene, camera );

}

body {
    margin: 0px;
}
canvs {
  display: block;
 }

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>