Three.js——天空盒
参考文档
纯色背景
简单来说就是整个背景是纯色的,实际开发中很少用到这种情况,毕竟不是很好看。
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新手小白,写的不对的地方欢迎各位大佬批评指正。