这一节我们给摩托车的场景添加天空盒，使其在蓝天白云下展示，在添加天空盒之前，我们需要先来认识下CubeTexture和CubeTextureLoader
CubeTexture 立方纹理
CubeTexture 创建一个由6张图片所组成的纹理对象。 构造函数 CubeTexture( images, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy ) CubeTexture（立方贴图）的功能以及用法几乎和Texture是相同的。区别在于，CubeTexture中的图像是6个单独的图像所组成的数组， 纹理映射选项为THREE.CubeReflectionMapping（默认值）或THREE.CubeRefractionMapping。
代码语言：javascript复制const loader = new THREE.CubeTextureLoader();
loader.setPath( 'textures/cube/pisa/' );
const textureCube = loader.load( [
'px.png', 'nx.png',
'py.png', 'ny.png',
'pz.png', 'nz.png'
] );
const material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );CubeTextureLoader 立方纹理加载器
CubeTextureLoader是加载CubeTexture的一个类。 内部使用ImageLoader来加载文件。 构造函数 CubeTextureLoader( manager : LoadingManager ) manager — 加载器使用的loadingManager。默认为THREE.DefaultLoadingManager 方法 .load ( urls : String, onLoad : Function, onProgress : Function, onError : Function )
urls — 数组长度为6的图像数组，数组内容为URL，每一个URL用于CubeTexture的每一侧。 这些URL将被指定顺序: pos-x, neg-x, pos-y, neg-y, pos-z, neg-z. 数组内容也可以为 Data URIs. 请注意，一般来说，在立方体贴图坐标系中，当查找positive-z轴时，positive-x表示右侧 - 换句话说，此坐标系使用左手坐标系。 由于three.js使用右手坐标系， 环境贴图将在three.js进行pos-x和neg-x进行交互. onLoad — 加载完成时将调用。回调参数是已被加载的texture onProgress — 将在加载过程中进行调用 onError — 在加载错误时被调用。 从URL中进行加载，并将被加载的texture传递给onLoad
代码语言：javascript复制const scene = new THREE.Scene();
scene.background = new THREE.CubeTextureLoader()
.setPath( 'textures/cubeMaps/' )
.load( [
'px.png',
'nx.png',
'py.png',
'ny.png',
'pz.png',
'nz.png'
] );了解了上面的CubeTexture 和 CubeTextureLoader ，下面我们给场景添加天空盒
给场景添加天空盒
由于CubeTexture 是由6张图片所组成的纹理对象，所以，如果要加载天空盒，我们需要准备6张图片，分别表示左右上下前后6个面，在public文件夹下新建textures文件夹，然后将我们事先准备好的6张天空图片复制到该文件夹 在initScene() 新建一个数组 在initScene() 中新建一个数组，用于存放天空盒的6张图片
代码语言：javascript复制 initScene() {
this.scene = new THREE.Scene()
// this.scene.background = new THREE.Color(0xa0a0a0)
const urls = [
'textures/Right.jpg',//x正方形
'textures/Left.jpg',//x负方向
'textures/Up.jpg',//y正方形
'textures/Down.jpg',//y负方向
'textures/Front.jpg',//z正方形
'textures/Back.jpg'//z负方形
]
}创建立方纹理加载器 创建数组后，在initScene() 中创建立方纹理加载器，并使用CubeTextureLoader 的load 方法将上面创建的urls数组作为参数传入
代码语言：javascript复制const textureCube = new THREE.CubeTextureLoader().load(urls)将textureCube 赋值给scene的background属性
代码语言：javascript复制this.scene.background = textureCube刷新浏览器看下效果，可以看到天空已经出现在了场景中
给地面添加草坪贴图
天空已经创建出来了，但是我们之前创建的地面还没有材质，下面我们给地面添加草坪贴图。 首先我们将下载的草坪贴图复制到前面创建的textures文件夹 在initFloor()中创建TextureLoader 在initFloor()中创建TextureLoader加载器，并设置草坪贴图的路径用load方法进行加载，然后使用材质的map属性将贴图赋值给材质，代码如下
代码语言：javascript复制 initFloor() {
const turf = new THREE.TextureLoader().setPath('textures/').load('turf.jpg')
const floorGeometry = new THREE.PlaneGeometry(50,50)
const material = new THREE.MeshPhysicalMaterial({
color:0x808080,
map:turf,
side:THREE.DoubleSide,
metalness:0.5,
roughness:0.8
})
const floorMesh = new THREE.Mesh(floorGeometry,material)
floorMesh.rotation.x = Math.PI / 2
floorMesh.receiveShadow = true
this.scene.add(floorMesh)
}刷新浏览器，看效果
好了，这次就先到这里，有疑问的朋友可以私信或评论区留言
