How to apply two texture in single face of cube

Questions
, ,
1

Result

image
image1920×1080 308 KB

But i need like below image

image
image1281×723 168 KB

var floortexture = new THREE.TextureLoader().load(‘http://52.34.243.48/mwidesignadmin/assets/1/floor/35.jpg’);

    floortexture.wrapS = 1002;

    floortexture.wrapT = 1000;

    // floortexture.repeat.y = 1

    // floortexture.repeat.x = 1;

    floortexture.repeat.set(customWidth / 2 * 0.5, customDepth / 2 * 0.5);

    // wall

    var cubegeometry = new THREE.BoxGeometry(customWidth, customHeight, customDepth);

    var walltexture = new THREE.TextureLoader().load('http://52.34.243.48/mwidesignadmin/assets/1/backsplash/17.png');

    walltexture.wrapS = 1002;

    walltexture.wrapT = 1001;

    walltexture.repeat.y = 2.31;

    walltexture.repeat.x = 2;

    walltexture.offset.x = -0.02;

    walltexture.offset.y =-0.02

    walltexture.center.x = 0.42

    walltexture.center.y =0.45

    //walltexture.repeat.set(customWidth / 2 * 0.5, customDepth / 2 * 0.5);

    //var cubematerial1 = new THREE.MeshBasicMaterial({color: 0xbfbfbf, side:THREE.BackSide, vertexColors: true });

    var cubematerial1 = [

        new THREE.MeshLambertMaterial({ map: walltexture, side: THREE.BackSide, name: 'wall' }),

        new THREE.MeshLambertMaterial({ map: walltexture, side: THREE.BackSide, name: 'wall' }),// 1st

        new THREE.MeshPhongMaterial({ color: 0x9cf542, side: THREE.BackSide, visible: false, name: 'ceiling' }),//top

        new THREE.MeshLambertMaterial({ map: floortexture, side: THREE.BackSide, name: 'floor' }),//floor

        new THREE.MeshLambertMaterial({ map: walltexture, side: THREE.BackSide, name: 'wall' }),

        new THREE.MeshLambertMaterial({ map: walltexture, side: THREE.BackSide, name: 'wall' })

    ];

    building = new THREE.Mesh(cubegeometry, cubematerial1);

    building.name = 'wall';

    building.receiveShadow = true;

    scene.add(building);
2

This should help.

You can also use CanvasTexture and mix textures there - if it’s one-time only, it shouldn’t hurt performance too much.