babylon 灯光 - 聚光灯

令狐冲 LV9

2023-05-31 · 54 阅读

babylon 灯光4 - 聚光灯

1、BABYLON.SpotLight聚光灯

这节课件聚光灯。聚光灯模拟的是手电筒，探照灯之类，这种光可以把光汇聚到一个方向的光源。我们在设置聚光灯的时候，需要设置其位置和朝向，并且光照强度会随着距离而减小。特别的地方是，聚光灯的光只会对某个方向上的有限圆锥角的物体有照亮效果，如下图所示：

SpotLight的原型如下：

SpotLight(name: string, position: Vector3, direction: Vector3, angle: number, exponent: number, scene: Scene): SpotLight
参数： -
name: 灯光的名字
position: 场景中聚光灯的位置
direction: 场景中聚光灯的方向
angle: 聚光灯能照射的角度
exponent: 衰减指数，指数定义了光线随距离的衰减的速度
scene: 属于哪一个场景

2、聚光灯实例

先看看本实例的聚光灯的效果：

代码如下：

<!DOCTYPE html>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

      <title>Babylon.js sample code</title>


<scriptsrc="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
      <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
      <scriptsrc="https://preview.babylonjs.com/ammo.js"></script>
      <scriptsrc="https://preview.babylonjs.com/cannon.js"></script>
      <scriptsrc="https://preview.babylonjs.com/Oimo.js"></script>
      <scriptsrc="https://preview.babylonjs.com/earcut.min.js"></script>
      <scriptsrc="https://preview.babylonjs.com/babylon.js"></script>
      <scriptsrc="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
      <scriptsrc="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
      <scriptsrc="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
      <scriptsrc="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
      <scriptsrc="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
      <scriptsrc="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
      <scriptsrc="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>

      <style>
         html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
         }

         #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
         }
      </style>
</head>
<body>
<canvasid="renderCanvas"></canvas>
<script>
var canvas = document.getElementById("renderCanvas");

var engine =null;
var scene =null;
var createDefaultEngine =function() { returnnewBABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); };
var createScene =function () {
var scene =newBABYLON.Scene(engine);
var camera =newBABYLON.ArcRotateCamera("Camera", -Math.PI/2, Math.PI/3, 10, BABYLON.Vector3.Zero(), scene);
         camera.attachControl(canvas, true);

var light =newBABYLON.SpotLight("spotLight", newBABYLON.Vector3(-1, 1, -1), newBABYLON.Vector3(0, -1, 0), Math.PI/2, 3, scene);
         light.diffuse =new BABYLON.Color3(1, 0, 0);
         light.specular =new BABYLON.Color3(0, 1, 0);

         var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 4, height: 6}, scene);

         return scene;

      };

      engine = createDefaultEngine();
      if (!engine) throw 'engine should not be null.';
      scene = createScene();

      engine.runRenderLoop(function () {
         if (scene) {
            scene.render();
         }
      });

      // Resize
      window.addEventListener("resize", function () {
         engine.resize();
      });
</script>
</body>
</html>

代码解释主要看：

var light =newBABYLON.SpotLight("spotLight", newBABYLON.Vector3(-1, 1, -1),
newBABYLON.Vector3(0, -1, 0), Math.PI/2, 3, scene);
第2个参数表示聚光灯的位置（-1, 1, -1），在地面的上方。
第3个参数表示聚光灯的（0, -1, 0），表示从上到下。
第4个参数：聚光灯的角度是90度，也就是聚光灯锥形光束的大小
第5个参数：3表示衰减指数。这个数字越大，衰减越快，越小衰减越慢。
第6个参数：聚光灯要放到的场景

3、聚光灯angle角度参数相机

聚光灯的角度代表了聚光的程度，角度越小，那么聚光效果越好，角度越大，那么聚光效果越差。

我们对比两份代码，来看看效果:

你可以从源码包中打开看看代码，并看看效果：