偏移three.js中的环境贴图纹理

我正在尝试偏移用作环境贴图的纹理，但运气不太好

纹理是使用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;   

---

基于

loadTextureCube

我假设您使用

cube

着色器方法来处理Skybox。到目前为止，您的代码一切正常。您看到的问题是，虽然纹理具有偏移特性，但材质（或者更具体地说，其中的立方体着色器程序）没有将其传递给碎片着色器的统一体。这当然是假设你做了这样的事情：

例如立方体着色器材质

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

var skyboxGeo=新的三立方测量法（500050005000）；
var materialArray=[]；
对于（变量i=0；i<6；i++）{
var cubeTex=THREE.ImageUtils.loadTexture（URL[i]）；
立方体x.offset.x=-.5；
立方英尺偏移量y=-.5；
材料排列。推动（新的三网格基本材料({
地图:cubeTex,，
侧面：三。背面
}));
}
var skyboxMat=新的三个网格面材质（materialArray）；
var skyBox=new THREE.Mesh（skyboxGeo、skyboxMat）；

希望有帮助

---

~D

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