babylon 灯光3 - 平行光

令狐冲 LV9

2023-05-31 · 66 阅读

babylon 灯光3 - 平行光
1、定向光或者方向光DirectionalLight

方向光模型模拟的是一个非常远的地方发射出来的光，例如太阳光。

想想太阳光，太阳距离地球大约1.5亿公里，地球的半径是6378公里，算起来，太阳光照射的角度范围大约只有0.0024度，照到地球的时候和平行也没什么区别了。

我们来看一下定向光的原型：

‍

DirectionalLight(name: string, direction: Vector3, scene: Scene): DirectionalLight
name: 光源的名字
direction: 光的方向
scene: 属于哪一个场景

‍

例如,下面是一个方向指向（0,-1,0）的方向光，也就是在世界坐标系中是从上指向下的方向光。

var light =newBABYLON.DirectionalLight("DirectionalLight", newBABYLON.Vector3(0, -1, 0), scene);

2、方向光BABYLON.DirectionalLight例子

本例是一个黄色的方向光

你会发现整个地面的颜色是均匀的，因为方向光相当于平行光，来源于无穷远处，所以哥哥位置颜色一样也就很正常了。

代码如下：

<!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 =new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(0, -1, 0), scene);
         // 黄色
         light.diffuse =new BABYLON.Color3(1, 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>