CODEWITHSUNDEEP
three.jswebgl
Markus Proctor
Markus Proctor

Reputation: 435

Three.JS tiling image used in skybox mesh in WebGL?

Demo Can be seen here

I'm using a rather small image to make the skybox and for some reason it's being stretched instead of tiled. I found this tutorial on how to pattern a texture. I noted these lines

var crateTexture = new THREE.ImageUtils.loadTexture( 'images/crate.gif' );
crateTexture.wrapS = crateTexture.wrapT = THREE.RepeatWrapping;
crateTexture.repeat.set( 5, 5 );
var crateMaterial = new THREE.MeshBasicMaterial( { map: crateTexture } );
var crate = new THREE.Mesh( cubeGeometry.clone(), crateMaterial );
crate.position.set(60, 50, -100);
scene.add( crate );

So I tried using this method for the skybox and it didn't produce any change

var path = "/images/";

            var urls = [
                path + 'startile.png', path + 'startile.png',
                path + 'startile.png', path + 'startile.png',
                path + 'startile.png', path + 'startile.png'
            ];

            var textureCube = THREE.ImageUtils.loadTextureCube( urls , new THREE.CubeRefractionMapping() );
                            textureCube.wrapS = textureCube.wrapT = THREE.RepeatWrapping;
textureCube.repeat.set( 10, 10 );
            var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );



            // Skybox

            var shader = THREE.ShaderLib[ "cube" ];
            shader.uniforms[ "tCube" ].value = textureCube;

            var material = new THREE.ShaderMaterial( {

                fragmentShader: shader.fragmentShader,
                vertexShader: shader.vertexShader,
                uniforms: shader.uniforms,
                side: THREE.BackSide

            } ),

            mesh = new THREE.Mesh( new THREE.CubeGeometry( 1200, 1200, 1200 ), material );
                            //mesh.overdraw = false;
                            // mesh.rotation.x = Math.PI * 0.1;
            scene.add( mesh );

Any ideas?

Upvotes: 0

Views: 1155

Answers (1)

WestLangley
WestLangley

Reputation: 104783

Tiling is not supported for texture cubes. However, in your case, since all faces of your cube are identical, you can do something like this:

var geometry = new THREE.CubeGeometry( 1000, 1000, 1000 );

var texture = THREE.ImageUtils.loadTexture(  "startile.png" );
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 10, 10 );

var material = new THREE.MeshBasicMaterial( {
    color: 0xffffff, 
    map: texture,
    side: THREE.BackSide
} );

var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

three.js r.59

Upvotes: 2

Related Questions