BabyLon.js 6.0 学习笔记 （四）

简介

我们继续上一篇 BabyLon.js 学习笔记（三） 中的内容，拓展一些控制光照和阴影效果的API。

光源

BabyLon.js 中的光源有3种类型： 点光源、平行光和聚光灯。

• 点光源 是由一个点向外发射光线，光强随发射距离变大而衰减，用于补光和模拟近处光源；

// 创建一个点光源
const pointlight = new BABYLON.PointLight(
    "pointlight",
    new BABYLON.Vector3(0,1,0),  //点光源位置
    scene
);

//设置光源的颜色
pointlight.diffuse = new BABYLON.Color3(1,0.82,1.1);

//设置点光源的亮光颜色
pointlight.specular=new BABYLON.Color3(1,0.87,0.1);

//设置点光源强度
pointlight.intensity=0.5;

• 平行光的光照方向固定，可以均匀照亮场景中的物体，用于模拟太阳光这样的远处光源；

//add a direction light
const directionlight = new BABYLON.DirectionalLight(
    "light",//name
    new BABYLON.Vector3(-1,-2,0),//light direction
    scene
);
//设置光源的颜色
directionlight.diffuse = new BABYLON.Color3(1,0.82,1.1);
//设置点光源的亮光颜色
directionlight.specular=new BABYLON.Color3(1,0.87,0.1);
//设置点光源强度
directionlight.intensity=0.5;

• 聚光灯模拟一个锥形光场，光强会随距离变大而衰减，用于模拟手电筒光这样的光源；

//set a spotlight
const spotlight = new BABYLON.SpotLight(
    "spotlight",
    new BABYLON.Vector3(0,0,5),  //聚光灯的位置
    new BABYLON.Vector3(0,0,-5), //聚光灯的方向
    Math.PI/3, //聚光灯的照射角度
    3, //聚光灯的强度
    scene
);

阴影

代码中需要注意，先将几何体画好，再去处理阴影的事件。这里我们将聚光灯照射下的球体阴影投射到地面

//set a spotlight
const spotlight = new BABYLON.SpotLight(
    "spotlight",
    new BABYLON.Vector3(0,0,5),  //聚光灯的位置
    new BABYLON.Vector3(0,0,-5), //聚光灯的方向
    Math.PI/3, //聚光灯的照射角度
    3, //聚光灯的强度
    scene
);

//制造阴影
var shaowGenerator = new BABYLON.ShadowGenerator(1024,spotlight);
//地面接收阴影
shaowGenerator.addShadowCaster(sphere);

//create ground
const ground = BABYLON.MeshBuilder.CreateGround(
  "ground", //name
  {width: 15,
  height: 15}, //地面的宽高
  scene   //地面网格所在的场景
);
// ground.position.y = -2;
ground.position.set(0,-2,0); 
ground.receiveShadows = true;  //这个开关必须设置才能显示阴影效果

光源与阴影全开效果

自己调了一个灯光效果，集成了3种光源和阴影