Three.js——天空盒

Three.js——天空盒

参考文档

Threejs Scene

纯色背景

简单来说就是整个背景是纯色的，实际开发中很少用到这种情况，毕竟不是很好看。

scene.background = new THREE.Color(1, 0.5 ,1);

效果如下：

背景图

用一张图片来作为场景背景，不管场景怎么旋转，背景永远不变，表现效果一般。

scene.background = new THREE.TextureLoader().load("/test/1.png");

效果如下：

天空盒

这里的天空盒是使用THREE.CubeTextureLoader加载纹理材质，设置为场景背景来实现的。

scene.background = new THREE.CubeTextureLoader().load([
            "/test/Left.png",
            "/test/Right.png",
            "/test/Up.png",
            "/test/Down.png",
            "/test/Front.png",
            "/test/Back.png",
        ]);

• 需要注意的是这里的6个贴图是有顺序的，要不然会造成天空盒连接错乱。

效果如下：

背景模糊（backgroundBlurriness）

官方原话：Sets the blurriness of the background. Only influences environment maps assigned to Scene.background. Valid input is a float between 0 and 1. Default is 0.

背景增强（backgroundIntensity）

147版本之后新增的功能

官方原话：Attenuates the color of the background. Only applies to background textures. Default is 1.

简单来说就是用黑色遮挡背景，值为0时背景就是全黑。

尾语：

本人是threejs新手小白，写的不对的地方欢迎各位大佬批评指正。