Split three.js texture into chunks

Question

I need to project a big image on a group of small planes (like a puzzle). However I don't want to load the image pieces independently. Is there anyway I can load a single texture and wrap each plane with a different region of the original texture?

Answer 1

You can have each plane mesh share the same material (and hence share a single composite texture), but each plane mesh must have a different geometry. The geometries will differ in their UVs. Use a pattern like this:

var geometry1 = new THREE.PlaneGeometry( 10, 10 );
var geometry2 = new THREE.PlaneGeometry( 10, 10 );

geometry1.faceVertexUvs[ 0 ][ 0 ][ 0 ].set( 0.0, 1.0 ); // upper left quarter
geometry1.faceVertexUvs[ 0 ][ 0 ][ 1 ].set( 0.0, 0.5 );
geometry1.faceVertexUvs[ 0 ][ 0 ][ 2 ].set( 0.5, 0.5 );
geometry1.faceVertexUvs[ 0 ][ 0 ][ 3 ].set( 0.5, 1.0 );

geometry2.faceVertexUvs[ 0 ][ 0 ][ 0 ].set( 0.5, 0.5 ); // lower right quarter
geometry2.faceVertexUvs[ 0 ][ 0 ][ 1 ].set( 0.5, 0.0 );
geometry2.faceVertexUvs[ 0 ][ 0 ][ 2 ].set( 1.0, 0.0 );
geometry2.faceVertexUvs[ 0 ][ 0 ][ 3 ].set( 1.0, 0.5 );


mesh1 = new THREE.Mesh( geometry1, material );
mesh2 = new THREE.Mesh( geometry2, material );

Also use WebGLRenderer to prevent distortion. If you need to use CanvasRenderer, you will have to tessellate your plane geometries.

var geometry1 = new THREE.PlaneGeometry( 10, 10, 4, 4 );

The approach would be the same -- just more tedious as there are more faces involved.

three.js r.58