0

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

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

1 回答 1

1

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

例如。立方体着色器材质

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在标准立方体上使用类似 a 的方法来获得所需的结果:

例如。标准材料

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

希望有帮助

~D

于 2013-08-13T13:25:24.623 回答