Image texture in a cube

[nathaliaspatricio]

I create a cube and I'm trying to apply some texture on it using this code:

function createCube(sx, sy, sz, p, ry, image){

    var texture = THREE.ImageUtils.loadTexture(image);

    var material = new THREE.MeshLambertMaterial( { map: texture } );
    var cube = new THREE.Mesh( new THREE.CubeGeometry( sx, sy, sz ), material );
    cube.position = p;
    cube.rotation.y = ry;
    scene.add(cube);

}

I need to repeat the image only in one cube face like a wallpaper. I have tried to use RepeatWrapping, but it didn't work and I'm not finding this object in the three.js source code to understand how it works.

Any help?

[chandlerprall]

Take a look at the source in this example, line 50.

[nathaliaspatricio]

Ok, I have looked and change my source code to:

function createCube(sx, sy, sz, p, ry, image){

    var texture = THREE.ImageUtils.loadTexture(image);
    texture.repeat.set( 4, 2 );
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

    var material = new THREE.MeshLambertMaterial( { map: texture } );
    var cube = new THREE.Mesh( new THREE.CubeGeometry( sx, sy, sz ), material );
    cube.position = p;
    cube.rotation.y = ry;
    scene.add(cube);

}

But everything is strange here. It is not repeating the image along the face. I want to know what's the meaning of these numbers... I saw in the three.js source code that is a Vector2, but I don't know what they really do.

Another question is about the image size. Does it matter?

[chandlerprall]

The numbers in repeat.set determine how many times the texture is repeated over the surface. In this case it's 4 times over U and 2 times over V.

Image sizes work best as power of 2 (16, 32, 64, 128, etc). There are some cases when you don't have to use those specific sizes but it's best to avoid doing so.

[nathaliaspatricio]

I don't understand what's the meaning of U and V. Are they some coordinate system? Does the function not work with X, Y, Z axis?

[chandlerprall]

UV is the coordinate system used for rendering textures. XY could be used, but different letters are employed to avoid confusing which coordinate space is being discussed. At the top left corner, UV is 0,0. Bottom right corner has UV at 1,1, so the range for both is 0.0 - 1.0 and is used to determine what part of a texture applies at that location on the geometry.

[nathaliaspatricio]

Ok, I understood now. The texture was distorted. But I resize it in Gimp to 512px X 512px and now it's better.

Now I'm with two other problems:

• The textures don't work in Chrome. When I put some solid color everything is allright but if I use some image my cubes appeared black. Do you know why? Some bug in Chrome? In Firefox is working perfectly.
• I have two different cubes (sizes are different) and I want the texture look like the same in both. When I apply the texture 5 times in a large cube, it looks like greater than I apply it in a small cube. Do you understand what I mean? I think I need some to fix the figure width and height.

Thanks a lot.

[chandlerprall]

Are you testing the page on your computer, locally? If so read through this wiki page.

For the sizes - that makes sense. You're telling the material to repeat over the surface X number of times, no matter the size of that surface.

[nathaliaspatricio]

Yes, it makes sense. But is it not possible to fix the image size to be applied as texture?

[mrdoob]

• I have two different cubes (sizes are different) and I want the texture look like the same in both. When I apply the texture 5 times in a large cube, it looks like greater than I apply it in a small cube. Do you understand what I mean? I think I need some to fix the figure width and height.

I didn't understand that myself. What are you trying to do?

[nathaliaspatricio]

I want to assign some width and height value to Image before apply it as texture and repeat this along the axis. For example, I have this:

var cube = new THREE.CubeGeometry( 100, 100, 100 );

I want to define a Image with 10px X 10px and apply in the cube. The image would be repeated 100 times in each face. Otherwise, if I have a THREE.CubeGeometry( 200, 200, 200 ), the image would be repeated 200 times in each face.

Do you understand now?

[nathaliaspatricio]

I have another question about textures applied in cubes. I want to apply more than one texture in a cube. I want to apply different textures in different faces. Is it possible to do it?

[mrdoob]

I want to define a Image with 10px X 10px and apply in the cube. The image would be repeated 100 times in each face. Otherwise, if I have a THREE.CubeGeometry( 200, 200, 200 ), the image would be repeated 200 times in each face.

texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.x = 100 / 10;
texture.repeat.y = 100 / 10;

However, textures need to be power-of-two to be able to be repeated, so...

texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.x = 100 / 16;
texture.repeat.y = 100 / 16;

I have another question about textures applied in cubes. I want to apply more than one texture in a cube. I want to apply different textures in different faces. Is it possible to do it?

Yes. This example loads a different material for every face. Have a read at the code.

[karmakumar]

Try this project . Full code available below. https://github.com/karmakumar/threejs_create_plane/tree/dev/three