Creating a plane, adding a texture on both sides and rotating the object on its side

Question

I'm trying to create a long corridor with a repeating texture. How do I add a repeating texture and rotate a object (in this case a plane) at right angles to create the corridor wall's and ceiling?

var texture, material, plane;

texture = THREE.ImageUtils.loadTexture( "../img/texture.jpg" );
texture.wrapT = THREE.RepeatWrapping;  // This doesn't seem to work;
material = new THREE.MeshLambertMaterial({ map : texture });
plane = new THREE.Mesh(new THREE.PlaneGeometry(400, 3500), material);
plane.doubleSided = true;
plane.position.x = 100;
plane.rotation.z = 2;  // Not sure what this number represents.
scene.add(plane);

Answer 1

For an example of a repeating texture, check out the source of the example at:

http://stemkoski.github.com/Three.js/Texture-Repeat.html

I recommend the following changes to your code:

var texture, material, plane;

texture = THREE.ImageUtils.loadTexture( "../img/texture.jpg" );

// assuming you want the texture to repeat in both directions:
texture.wrapS = THREE.RepeatWrapping; 
texture.wrapT = THREE.RepeatWrapping;

// how many times to repeat in each direction; the default is (1,1),
//   which is probably why your example wasn't working
texture.repeat.set( 4, 4 ); 

material = new THREE.MeshLambertMaterial({ map : texture });
plane = new THREE.Mesh(new THREE.PlaneGeometry(400, 3500), material);
plane.material.side = THREE.DoubleSide;
plane.position.x = 100;

// rotation.z is rotation around the z-axis, measured in radians (rather than degrees)
// Math.PI = 180 degrees, Math.PI / 2 = 90 degrees, etc.
plane.rotation.z = Math.PI / 2;

scene.add(plane);

Answer 2

I was looking for the same thing and you've just used the property THREE.DoubleSide on the wrong object. You should use it on the material rather than on the mesh itself:

material.side = THREE.DoubleSide;

...nothing more !

Answer 3

Was searching for solution without duplicating all my geometry.

Here you go ladies and gentlemen...

var materials = [new THREE.MeshBasicMaterial({map: texture, side: THREE.FrontSide}),
                 new THREE.MeshBasicMaterial({map: textureBack, side: THREE.BackSide})];

var geometry = new THREE.PlaneGeometry(width, height);

for (var i = 0, len = geometry.faces.length; i < len; i++) {
    var face = geometry.faces[i].clone();
    face.materialIndex = 1;
    geometry.faces.push(face);
    geometry.faceVertexUvs[0].push(geometry.faceVertexUvs[0][i].slice(0));
}

scene.add(new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials)));

BOOM a Two Faced Plane for ya, the loop will also work with geometries with more faces, replicating each face and applying the BackSide texture to it.

Enjoy!

Answer 4

Update 2019: Imageutil.loadTexture is deprecated,

Use THREE.TextureLoader() instead

 new THREE.TextureLoader().load(
          WOOD,
          //use texture as material Double Side
          texture => {
                texture.wrapS = THREE.RepeatWrapping;
                texture.wrapT = THREE.RepeatWrapping;
                texture.offset.x = 90/(2*Math.PI);
            var woodMaterial = new THREE.MeshPhongMaterial({
              map: texture,
              side: THREE.DoubleSide
            });

            // Add Ground
            groundMesh = new THREE.Mesh(
              new THREE.PlaneGeometry(GRID_SIZE, GRID_SIZE, 32),
              woodMaterial
            );

            //rotate
            groundMesh.rotation.x = Math.PI / 2;
            this.scene.add(groundMesh);
          }
        );