Threejs进阶之二：gltf模型场景优化--添加地面和灯光

上一节中我们将一辆摩托车的gltf模型加载到了三维场景中，这一节我们来对场景进行优化，使其更符合现实的情况，先看最终效果

添加地面

首先我们给场景添加一个地面，这里用到了PlaneGeometry，创建一个initFloor() 方法，在该方法中创建几何体和材质，设置相关参数；创建网格，将几何体和材质作为参数传递给网格，并将网格添加到场景中

  initFloor() {
   
    const floorGeometry = new THREE.PlaneGeometry(20,20)
    const material = new THREE.MeshPhysicalMaterial({
   
      color:0x808080,
      side:THREE.DoubleSide,
      metalness:0,
      roughness:0.1
    })
    const floorMesh = new THREE.Mesh(floorGeometry,material) 
    this.scene.add(floorMesh)
  } 

刷新浏览器，查看效果

此时我们看到，我们创建的屏幕时垂直方向显示的，所以我们要将其旋转90度，在上述代码中添加如下代码，是其x轴旋转90度

floorMesh.rotation.x = Math.PI / 2

此时刷新浏览器，可以看到，地面已经创建好了

添加聚光灯和阴影

下面我们给场景中添加一个聚光灯，并设置阴影效果
在initLig