Offsetting environment map texture in three.js

Question

I'm trying to offset a texture that's being used as an environment map, but not having much luck.

The texture is loaded with the loadTextureCube() method, which gets applied to my mesh just fine, but the offsets don't seem to have any effect.

The texture is just a big gray circle to give a little bit of gloss.

Any thoughts on what I'm doing wrong?

var urls = [
   'pos-x.png',
   'neg-x.png',
   'pos-y.png',
   'neg-y.png',
   'pos-z.png',
   'neg-z.png'
 ];
var cubemap = THREE.ImageUtils.loadTextureCube(urls);
cubemap.offset.y = -.5;
cubemap.offset.x = -.5;
cubemap.needsUpdate=true;

Darryl_Lehmann Darryl_Lehmann · Accepted Answer · 2013-08-13T13:25:24

I'm assuming based on loadTextureCube that your utilizing the cube shader approach to skyboxes. So far everything with your code is fine. The problem your seeing is that while your texture has offset properties, the material (or more specifically the cube shader program therein) does not have uniforms to pass this along to the fragmentation shader. This of course is assuming your doing something like this:

Eg. cube shader material

var skyboxGeo = new THREE.CubeGeometry( 5000, 5000, 5000 ); 
var cubeShader = THREE.ShaderUtils.lib[ "cube" ];
cubeShader.uniforms[ "tCube" ].value = cubemap;
var skyboxMat = new THREE.ShaderMaterial( {
    fragmentShader: cubeShader.fragmentShader,
    vertexShader: cubeShader.vertexShader,
    uniforms: cubeShader.uniforms,
    side: THREE.BackSide
    });
var skybox = new THREE.Mesh( skyboxGeo, skyboxMat );
scene.add( skybox );

There's likely a number of work arounds, but you could alway try something like a MeshFaceMaterial on a standard cube to achieve the desired result:

Eg. standard material

var skyboxGeo = new THREE.CubeGeometry( 5000, 5000, 5000 ); 
var materialArray = [];
for (var i = 0; i < 6; i++) {
    var cubeTex = THREE.ImageUtils.loadTexture( urls[i] );
    cubeTex.offset.x = -.5;
    cubeTex.offset.y = -.5;
    materialArray.push( new THREE.MeshBasicMaterial({
        map: cubeTex,
        side: THREE.BackSide
    }));
}
var skyboxMat = new THREE.MeshFaceMaterial( materialArray );
var skyBox = new THREE.Mesh( skyboxGeo, skyboxMat );

Hope that helps

~D

Offsetting environment map texture in three.js

1 Answers