天空盒制作

一.下载

全景素材下载：polyhaven.com/zh/hdris/ur…

下载得到源文件：buikslotermeerplein_4k.exr

二.格式转换

• PS 打开buikslotermeerplein_4k.exr
• PS 选择导出为jpg格式

三.裁剪

全景转天空盒：jaxry.github.io/panorama-to…

• 按照顺序排序：front.jpg、left.jpg、back.jgp、right.jpg、top.jpg、bottom.jpg
• PS方向旋转：top.jpg顺时针旋转90度；bottom.jpg逆时针旋转90度

四.three.js实现天空盒的两种方法

方法一：利用CUBETEXTURELOADER设置scene的背景

var path = "../images/flyBox/box2/"; //设置路径
var format = '.jpg'; //设定格式
var urls = [
    path + 'px' + format, path + 'nx' + format,
    path + 'py' + format, path + 'ny' + format,
    path + 'pz' + format, path + 'nz' + format
];
var textureCube = new THREE.CubeTextureLoader().load( urls );
scene.background = textureCube;
//or
scene.background = new THREE.CubeTextureLoader()
.setPath( '../images/flyBox/box2/' )
.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ]
);

方法二：利用着色器

let urls = [
    '../images/flyBox/box2//px.jpg', // right
    '../images/flyBox/box2//nx.jpg', // left
    '../images/flyBox/box2//py.jpg', // top
    '../images/flyBox/box2//ny.jpg', // bottom
    '../images/flyBox/box2//pz.jpg', // back
    '../images/flyBox/box2//nz.jpg' // front
];
let skyboxCubemap = new THREE.CubeTextureLoader().load(urls);
skyboxCubemap.format = THREE.RGBFormat;
let skyboxShader = THREE.ShaderLib['cube'];
skyboxShader.uniforms['tCube'].value = skyboxCubemap;
skyBox = new THREE.Mesh(
    new THREE.BoxGeometry(10000, 10000, 10000),
    new THREE.ShaderMaterial({
        fragmentShader: skyboxShader.fragmentShader,//片段着色器
        vertexShader: skyboxShader.vertexShader,//顶点着色器
        uniforms: skyboxShader.uniforms,//是所有顶点都具有相同的值的变量。 比如灯光，雾，和阴影贴图就是被储存在uniforms中的数据。 uniforms可以通过顶点着色器和片元着色器来访问。
        depthWrite: false,//深度测试
        side: THREE.BackSide//正反面
    })
);
skyBox.name = 'StarSky';