three.js纹理平铺

时间:2013-07-02 09:08:55

标签: three.js textures tiling

我发现这个例子有漫反射,高光和法线贴图:

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 );

现在我看到我的纹理显示在球体上,但只有一次。我需要更多纹理贴图并插入:

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

但它没有用,有没有人有线索?

最好的问候

1 个答案:

答案 0 :(得分:0)

repeat.x和repeat.y确定纹理需要在脸上重复多少次。在你的情况下100x100次。尝试将两个值都设置为2并查看是否有效