ThreeJS-灯光(十三)

关键代码：

基础材质改为标准材质，

const cubeMaterial = new THREE.MeshBasicMaterial()

改为：

const cubeMaterial = new THREE.MeshStandardMaterial()

标准材质需要和灯光配合，灯光分为环境光和直接光

环境光：由周围物体发出的光。（比较温和、暗淡）

直线光：由光源发出的光。（比较强烈）

  const cubeMaterial = new THREE.MeshStandardMaterial({

      color: 0xffff00,

      transparent: true,

      map: docColorLoader,

      alphaMap: menColorLoader,

      side: THREE.DoubleSide,

    }); 

 先看下不加灯源下的标准材质效果：

完整代码：

 

效果图：

添加环境光

关键代码：

    const light = new THREE.AmbientLight(0xFFFFFF, 0.5);

    scene.add(light);

完整代码：

 

效果图：

 

 添加直线光

关键代码：

    //直线光（由光源发出的灯光）

    const directionalLight = new THREE.DirectionalLight(0xffff00, 1);

    // //设置灯光位置

    directionalLight.position.set(10, 10, 10);

    scene.add(directionalLight);

   

完整代码：

 

效果图：