babylon 灯光 - 点光源

令狐冲 LV9

2023-05-31 · 56 阅读

babylon 灯光2 - 点光源

有时候需要一个小的光源，例如一个灯泡，这些光源就是点光源。点光源常常被设置在某个位置上，然后随着离距离的变远光照强度变小。如下图：

现实世界中，点光源只能照亮周围的一段距离。

我们来看一下点光源的原型： BABYLON.PointLight API点光源

PointLight(name: string, position: Vector3, scene: Scene): PointLight
name: 光源的名字
position: 在场景中的光源位置
scene: 属于哪一个场景

3、例子1：点光源的例子

少说话，多做事，我们先看效果：

Babylonjs点光源效果 30.html ,代码如下：

<!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.PointLight("pointLight", new BABYLON.Vector3(0, 1, 0), scene);

         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>

码解释如下：

代码中引入了很多js文件，别管他，如果你直接写，你直接引入babylon.js就可以了。
关于创建场景、相机的代码，这里就不讲了，
主要看
var light =new BABYLON.PointLight("pointLight", new BABYLON.Vector3(0, 1, 0), scene);
这段定义了一个聚光灯，放在（0，1，0）的位置，离地板的距离是1个单位。
创建了一个平面作为地板：var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 4, height: 6}, scene);