[SOLVED] How to Apply Two textures on a cube in Three.js

How to Apply Two textures on a cube in Three.js

I'm Working on adding texture and image both on the boxgeometry cube which is same for all the sides. Material been used is MeshBasicMaterial. I've used CanvasTexture for another texture and TextureLoader for image. But I'm not able to see both at the same time. Either the texture is created or image because I'm using it in map property. If anyone has any advice, any help would be greatly appreciated!

this is my code

 var cubeMaterials = [
  new THREE.MeshBasicMaterial({ opacity:0.5, map:texture1, map:base , transparent:false }),  
  new THREE.MeshBasicMaterial({ opacity:0.5, map:texture2, map:base , transparent:false }),  
  new THREE.MeshBasicMaterial({ opacity:0.5, map:texture3, map:base , transparent:false }),  
  new THREE.MeshBasicMaterial({ opacity:0.5, map:texture4, map:base , transparent:false }),  
  new THREE.MeshBasicMaterial({ opacity:0.5, map:texture5, map:base , transparent:false }),  
  new THREE.MeshBasicMaterial({ opacity:0.5, map:texture6, map:base , transparent:false })];

Solution

it finally worked. using "ShaderMaterial" can help you apply two different textures on the same side of the cube .don't forget to add "pitchMaterialParams" from "vertexShader" and "FragmentShader"

  material = new THREE.ShaderMaterial(pitchMaterialParams);
  material.uniforms.texture1.value = Texture1;
  material.uniforms.texture2.value = texture2;

you can also refer to official link for threejs: https://threejs.org/docs/#api/en/materials/ShaderMaterial