Question

我正在尝试抵消用作环境贴图的纹理，但没有太多运气。

使用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;

Answer 1

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

EG。立方体着色器材料

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的内容来实现所需的结果：

EG。标准材料

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

在three.js中抵消环境贴图纹理

1 个答案: