threeJS 创建天空盒场景

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

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

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

注：加载场景各个面所需要的图片尺寸是要宽高不相等的话，在电脑浏览器展示正常，在手机上就会出现一些问题，场景会变黑，更可恨的是，如果模型需要反射折射场景的投影的话，模型也会变暗黑，不要问我怎么知道的╮(╯﹏╰）╭

threeJS 创建天空盒场景

猜你喜欢