three.js tiling of textures

Question

I have found this example with diffuse, specular and normal map:

var ambient = 0x111111, diffuse = 0xbbbbbb, specular = 0x060606, shininess = 35;

                var shader = THREE.ShaderLib[ "normalmap" ];
                var uniforms = THREE.UniformsUtils.clone( shader.uniforms );

                uniforms[ "tNormal" ].value = THREE.ImageUtils.loadTexture( "textures/test_NRM.jpg" );
                uniforms[ "uNormalScale" ].value.set( 2, 2 );
                uniforms[ "tDiffuse" ].value = THREE.ImageUtils.loadTexture( "textures/test_COL.jpg" );
                uniforms[ "tSpecular" ].value = THREE.ImageUtils.loadTexture( "textures/test_SPEC.jpg" );

                uniforms[ "enableAO" ].value = false;
                uniforms[ "enableDiffuse" ].value = true;
                uniforms[ "enableSpecular" ].value = true;

                uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
                uniforms[ "uSpecularColor" ].value.setHex( specular );
                uniforms[ "uAmbientColor" ].value.setHex( ambient );

                uniforms[ "uShininess" ].value = shininess;

                uniforms[ "wrapRGB" ].value.set(1, 1,1 );

                var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true };
                var material = new THREE.ShaderMaterial( parameters );

                material.wrapAround = true;

                loader = new THREE.JSONLoader( true );
                document.body.appendChild( loader.statusDomElement );

                loader.load( "geo/sphere.js", function( geometry ) { createScene( geometry, 100, material ) } );

                renderer = new THREE.WebGLRenderer( { antialias: false, clearColor: 0x111111, clearAlpha: 1 } );
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );

Now I see my textures displayed on the sphere, but only one time. I need more tiles of the texture displayed and I inserted:

tNormal.wrapS = THREE.RepeatWrapping;
tNormal.wrapT = THREE.RepeatWrapping;
tNormal.repeat.x=100;
tNormal.repeat.y=100;

But it doesn`t work, does anyone have a clue?

Best Regards

score 0 · Answer 1 · answered Jul 02 '13 at 21:55

0

The repeat.x and repeat.y determine how many times the texture needs to be repeated on the face. In you case 100x100 times. Try setting both values to 2 and see if that works

answered Jul 02 '13 at 21:55

Chris Laarman

1,559
12
25

I have tried it but as before the geometry disappears and I see nothing. Maybe I have to replace "tNormal" with an other term? – user2524500 Jul 03 '13 at 07:04

three.js tiling of textures

1 Answers1