How to apply a texture to part of a face? - three.js

Question

I want to apply a texture to only a specified portion of the face of a cube - not the whole face. I want to do this multiple times to the same face. For example, I want to put texture1.jpg on the top right corner of the face, texture2.jpg on the lower right corner, texture3.jpg on the upper left corner, and texture4.jpg in the middle.
I want to be able to do this without creating new meshes for each portion.
I am experiencing performance issues related to having to create a new mesh for each portion of texture, and if I could just do it by somehow placing "decals" on a single mesh, the whole thing would run smoother.

Answer 1

You can combine textures at custom THREE.ShaderMAterial:
<script id="cubeFragmentShader" type="x-shader/x-fragment">
uniform vec2 aMin;
uniform vec2 aMax;
varying vec2 vUv;
uniform sampler2D texture;
uniform sampler2D texture2;
void main() {
vec2 position = vUv;
if (vUv.x<aMin.x || vUv.x>aMax.x || vUv.y<aMin.y || vUv.y>aMax.y) {
gl_FragColor = texture2D( texture2, position );
} else {
position -= aMin;
position.x /= aMax.x - aMin.x;
position.y /= aMax.y - aMin.y;
gl_FragColor = texture2D( texture, position );
}
}
</script>
http://jsfiddle.net/fj2r9b55/

Answer 2

I drew multiple images on a canvas in different spots and then exported the canvas as a URL, which I added as a textured material to a Mesh:
var scene = new THREE.Scene();
var sceneWidth = window.innerWidth;
var sceneHeight = window.innerHeight;
var camera = new THREE.PerspectiveCamera(45, sceneWidth/sceneHeight, 0.1, 3000);
var controls = new THREE.OrbitControls(camera);
var raycaster = new THREE.Raycaster();
var renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor( 0xcccccc, 1);
renderer.setSize(sceneWidth, sceneHeight);
document.getElementById("content").appendChild(renderer.domElement);
var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 900;
var ctx = canvas.getContext("2d");
var imgs = [];
imgs.push(loadImage('http://uobot.com/demo/1.jpg', main));
imgs.push(loadImage('http://uobot.com/demo/2.jpg', main));
imgs.push(loadImage('http://uobot.com/demo/3.jpg', main));
var imagesLoaded = 0;
function main() {
imagesLoaded ++;
if(imagesLoaded == imgs.length) {
for(var i in imgs) {
ctx.drawImage(imgs[i], 0, i*100);
}
var dataUrl = canvas.toDataURL();
var texture = THREE.ImageUtils.loadTexture(dataUrl);
texture.needsUpdate = true;
texture.minFilter = THREE.LinearFilter;
var material = new THREE.MeshPhongMaterial( {
map: texture,
specular: 0x050505,
shininess: 0
});
var object = new THREE.Mesh(new THREE.PlaneGeometry(10, 60, 1, 1), material);
scene.add(object);
}
}
function loadImage(src, onload) {
var img = new Image();
img.onload = onload;
img.src = src;
return img;
}