在three.js中偏移环境贴图纹理答案

【问题标题】：Offsetting environment map texture in three.js在three.js中偏移环境贴图纹理
【发布时间】：2013-08-14 00:55:50
【问题描述】：

我正在尝试抵消用作环境贴图的纹理，但运气不佳。

纹理是使用 loadTextureCube() 方法加载的，它可以很好地应用于我的网格，但偏移似乎没有任何效果。

纹理只是一个大的灰色圆圈，以提供一点光泽。

对我做错了什么有什么想法吗？

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;

【问题讨论】：

标签： three.js

【解决方案1】：

我基于loadTextureCube 假设您使用cube 着色器方法处理天空盒。到目前为止，您的代码一切都很好。您看到的问题是，虽然您的纹理具有偏移属性，但材质（或更具体地说是其中的立方体着色器程序）没有统一将其传递给碎片着色器。这当然是假设你在做这样的事情：

例如。立方体着色器材质

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

可能有很多变通方法，但您始终可以尝试在标准立方体上使用 MeshFaceMaterial 之类的方法来获得所需的结果：

例如。标准材料

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

希望有帮助

【讨论】：

谢谢！很快就会试试这个。