CODEWITHSUNDEEP
three.js
user2346335
user2346335

Reputation: 23

Three.js: How to Repeat a Texture

With the following code, I want to set the rectangle's texture, but the problem is that the texture image does not repeat over the whole rectangle:

var penGeometry = new THREE.CubeGeometry(length, 15, 120);
var wallTexture = new THREE.ImageUtils.loadTexture('../../3D/brick2.jpg');
wallTexture.wrapS = wallTexture.wrapT = THREE.MirroredRepeatWrapping;
wallTexture.repeat.set(50, 1);
var wallMaterial = new THREE.MeshBasicMaterial({ map: wallTexture });
var line = new THREE.Mesh(penGeometry, wallMaterial);
line.position.x = PenArray.lastPosition.x + (PenArray.currentPosition.x - PenArray.lastPosition.x) / 2;
line.position.y = PenArray.lastPosition.y + (PenArray.currentPosition.y - PenArray.lastPosition.y) / 2;
line.position.z = PenArray.lastPosition.z + 60;
line.rotation.z = angle;

The texture image is http://wysnan.com/NightClubBooth/brick1.jpg The result is http://wysnan.com/NightClubBooth/brick2.jpg

Only a piece of texture is rendered correctly but not all of the rectangle, why? And how to render all the rectangle with this texture image?

Upvotes: 2

Views: 2817

Answers (1)

WestLangley
WestLangley

Reputation: 104763

For repeat wrapping, your texture's dimensions must be a power-of-two (POT).

For example ( 512 x 512 ) or ( 512 x 256 ).

three.js r.58

Upvotes: 3

Related Questions