ThreeJs 天空盒子 图片加载变黑问题

threeJS功能实现不可缺少 scene（场景）, camera（相机）, renderer（渲染器)三个核心组件

注：加载场景各个面所需要的图片尺寸必须是2的幂次方，作为初学者很容易遇到的坑，在电脑浏览器展示正常，在手机上就会出现一些问题，场景会变黑，更可恨的是，如果模型需要反射折射场景的投影的话，模型也会变暗黑，不要问我怎么知道的╮(╯﹏╰）╭

一、引入图片，创建立方体纹理

1.使用CubeTextureLoader或者loadTextureCube加载（六张六面）纹理图

var urls =['../textures/sky_posx.png','../textures/sky_negx.png','../textures/sky_posy.png',

'../textures/sky_negy.png', '../textures/sky_posz.png', '../textures/sky_negz.png' ];

//CubeTextureLoader加载纹理图

cubeMap = new THREE.CubeTextureLoader().load( urls );

//loadTextureCube加载纹理图

cubeMap = THREE.ImageUtils.loadTextureCube( urls );

2、利用CubeTexture和ImageLoader加载（一张六面）纹理图

cubeMap = new THREE.CubeTexture( [] );  //立方体纹理

cubeMap.format = THREE.RGBFormat;  //纹理格式

var loader = new THREE.ImageLoader();  //图片加载器

loader.load( '../textures/sky.png', function ( image ) {

    var getSide = function (x, y) {

        var size = 1024;

        var canvas = document.createElement('canvas');

        canvas.width = size;

        canvas.height = size;

        var context = canvas.getContext('2d');

        context.drawImage(image, -x * size, -y * size);

        return canvas;

    };

    cubeMap.images[0] = getSide(2, 1); // px

    cubeMap.images[1] = getSide(0, 1); // nx

    cubeMap.images[2] = getSide(1, 0); // py

    cubeMap.images[3] = getSide(1, 2); // ny

    cubeMap.images[4] = getSide(1, 1); // pz

    cubeMap.images[5] = getSide(3, 1); // nz

})

二、实现真实场景效果

1、直接设置渲染场景的背景

scene.background = cubeMap;

但是如果设置场景为透明，引入的素材图片为png格式，场景就会变的不清晰

2、创建立方体天空盒为环境场景

var cubeShader = THREE.ShaderLib[ 'cube' ];  //着色器库

cubeShader.uniforms[ 'tCube' ].value = cubeMap;

var skyBoxMaterial = new THREE.ShaderMaterial( {    //着色器材质

    fragmentShader: cubeShader.fragmentShader,  //定义自己的片元着色器

    vertexShader: cubeShader.vertexShader,  //定义自己的顶点着色器

    uniforms: cubeShader.uniforms,  //给着色器传入uniform变量的值

    depthWrite: false,  //决定这个材质是否影响WebGL的深度缓存

    side: THREE.BackSide  //侧面：反面

});

var skyBox = new THREE.Mesh(

    new THREE.BoxGeometry( 1000000, 1000000, 1000000 ),  //盒子物体

    skyBoxMaterial

);

scene.add( skyBox );

————————————————

版权声明：本文为CSDN博主「花下木」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq_42547768/article/details/81081340