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> <!--Babylon.js --> <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> 码解释如下:
ok,你是不是观察到地板上的灯光是白色,因为点光源是白色的。我们可以换一种点光源的颜色。 4、设置灯光颜色 可以通过diffuse属性来设置灯光的颜色。我们这里把点光源设置为红色,效果如下图 ? 1
light.diffuse =newBABYLON.Color3(1, 0, 0);
改变上面的diffuse颜色,并刷新浏览器,你能看到不同的颜色。 换成黄色的关键代码:
效果如下: 5、点光源设置镜面光(specular) 镜面光是指高亮反光位置的颜色表现,我们经常会在玻璃上看到镜面光。
babylonjs中镜面光可以通过specular设置: 核心代码如下:
33.html的效果如下: 6、移动光源的位置 点光源会不会随着距离而衰减呢,肯定是会的,这里我们做一个实验,只需要将光源的位置这只得越来越远就可以了。
我们对比一下效果,不解释相应大家都会明白的。 看一下光晕越来越大,越来越淡,说明光源距离地面越来越远了。 |
2. 盗版,破解有损他人权益和违法作为,请各位站长支持正版!