注意點：SpotLight.target 的使用。

1、SpotLight.target= object 或者是 THREE.Object3D()才行。不能隻是一個position。

2、target的THREE.Object3D()無論是object還是object3D,都必須添加到場景中才行，否則無論怎麼直接改spotLight.target的object3D()都是無法生效的。？？為什麼需要把object3D添加到場景中？

轉載：Three.js - 光源使用詳解2（聚光燈 SpotLight、平行光 DirectionLight）

三、THREE.SpotLight（聚光燈光源）

1，基本介紹

THREE.SpotLight 是一種具有錐形效果的光源，該光源擁有産生光的方向和角度。我們可以将其與手電筒或者燈籠産生的光進行對比。
THREE.SpotLight 是最常使用的光源之一，特别是如果我們想要使用陰影的話。

2，屬性介紹

angle：角度。即光源發射出的光束的寬度。機關是弧度，預設值：Math.PI/3
castShadow：投影。如果設定為 true，這個光源就會生成陰影。
color：光源顔色。
distance：光源照射的距離。預設值為 0，這意味着光線強度不會随着距離增加而減弱。
exponent：光強衰減指數。使用 THREE.SpotLight 光源，發射的光線的強度随着光源距離的增加而減弱。exponent 屬性決定了光線強度遞減的速度。使用低值，從光源發出的光線将到達遠處的物體，而使用高值，光線僅能到達非常接近 THREE.SpotLight 光源的物體。
intensity：光源照射的強度。預設值：1
onlyShadow：僅陰影。如果此屬性設定為 true，則該光源隻生成陰影，而不會在場景中添加任何光照。
position：光源在場景中的位置
shadow.bias：用來偏置陰影的位置。當你使用非常薄的對象時，可以使用它來解決一些奇怪的效果。如果你看到奇怪的陰影效果，将該屬性設定為很小的值（例如 0.01）通常可以解決問題。此屬性的預設值為 0。
shadow.camera.far：投影遠點。表示到距離光源的哪一個位置可以生成陰影。預設值：5000
shadow.camera.fov：投影視場。表示用于生成陰影的視場有多大。預設值：50
shadow.camera.near：投影近點。表示距離光源的哪一個位置開始生成陰影。預設值為 50
shadow.map.width 和 shadow.map.height：陰影映射寬度和陰影映射高度。決定了有多少像素用來生成陰影。當陰影具有鋸齒狀邊緣或看起來不光滑時，可以增加這個值。在場景渲染之後無法更改。兩者的預設值均為：512
target：目标。使用 THREE.SpotLight 光源時，它的指向很重要。使用 target 屬性，你可以将 THREE.SpotLight 光源指向場景中的特定對象或位置。注意，此屬性需要一個 THREE.Object3D 對象（如 THREE.Mesh)。
visible：是否可見。如果該屬性設定為 true（預設值），該光源就會打開。如果設定 false，光源就會關閉。

3，基本用法

（1）建立聚光燈光源非常簡單，隻要指定顔色（并設定相關屬性），然後添加到場景中即可。要特别注意如下幾個屬性：

castShadow：如果想要陰影，該屬性要設定為 true。
target：該屬性決定光源照射的位置。這裡我們将其指向 plane 對象（地闆）。

【three.js:文法】光源使用詳解2-3（聚光燈 SpotLight、平行光 DirectionLight 、環境光 HemisphereLight、鏡頭光暈 LensFlare）Three.js - 光源使用詳解3（環境光 HemisphereLight、鏡頭光暈 LensFlare）

var

spotLight =

new

THREE.SpotLight(0xffffff);

spotLight.position.set(30, 25, -2);

spotLight.castShadow =

true

spotLight.target = plane;

scene.add(spotLight);

（2）如果我們不想将 target 瞄準一個特定的對象，而是空間中的任意一點。可以通過建立一個 THREE.Object3D() 對象來實作。

//建立一個3d對象作為聚光燈的目标

var

target =

new

THREE.Object3D();

target.position.set(30, 0, 0);

scene.add(target);

//建立聚光燈

var

spotLight =

new

THREE.SpotLight(0xffffff);

spotLight.position.set(30, 25, -2);

spotLight.castShadow =

true

spotLight.target = target;

scene.add(spotLight);

4，陰影相關用法

（1）除了告訴光源要生成陰影外，還必須通過配置每個幾何體的 castShadow 和 receiveShadow 屬性來告訴幾何體對象是否接收或投射陰影。

//平面接收陰影

plane.receiveShadow =

true

//方塊和球體投射陰影

cube.castShadow =

true

sphere.castShadow =

true

（2）配合使用 THREE.CameraHelper，我們可以把用來決定陰影的光照區域顯示出來，友善調試。

1 2	`var` `helper =` `new` `THREE.CameraHelper(spotLight.shadow.camera );` `scene.add(helper);`

（3）如果想要陰影更加柔和，可以在 THREE.WebGLRenderer 對象上設定不同的 shadowMap.type 屬性值：

THREE.PCFShadowMap：預設陰影
THREE.PCFSoftShadowMap：更加柔和的陰影

var

renderer =

new

THREE.WebGLRenderer();

renderer.setClearColor(

new

THREE.Color(0xEEEEEE));

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.shadowMap.enabled =

true

renderer.shadowMap.type = THREE.PCFSoftShadowMap;

四、THREE.DirectionLight（平行光）

1，基本介紹

THREE.DirectionLight 可以看作是距離很遠的光，它發出的所有光線都是互相平行的。平行光的一個範例就是太陽光。
平行光不像上面的聚光燈（通過 distance 和 exponent 屬性來微調）那樣離目标越遠越暗淡。被平行光照亮的整個區域接受到的光強是一樣的。

2，屬性介紹

position：光源在場景中的位置。
target：目标。使用 THREE.DirectionLight 光源時，它的指向很重要。使用 target 屬性，你可以将 THREE.SpotLight 光源指向場景中的特定對象或位置。注意，此屬性需要一個 THREE.Object3D 對象（如 THREE.Mesh)。
intensity：光源照射的強度。預設值：1
castShadow：投影。如果設定為 true，這個光源就會生成陰影
onlyShadow：僅陰影。如果此屬性設定為 true，則該光源隻生成陰影，而不會在場景中添加任何光照。
shadow.camera.near：投影近點。表示距離光源的哪一個位置開始生成陰影。
shadow.camera.far：投影遠點。表示到距離光源的哪一個位置可以生成陰影。
shadow.camera.left：投影左邊界。
shadow.camera.right：投影右邊界。
shadow.camera.top：投影上邊界。
shadow.camera.bottom：投影下邊界。
shadow.map.width 和 shadow.map.height：陰影映射寬度和陰影映射高度。決定了有多少像素用來生成陰影。當陰影具有鋸齒狀邊緣或看起來不光滑時，可以增加這個值。在場景渲染之後無法更改。兩者的預設值均為：512

3，基本用法

（1）對于 THREE.DirectionLight 來說，由于所有的光線都是平行的，是以不會有光錐，而是一個立方體區域。下面代碼我們配合 THREE.CameraHelper 對象，将用來決定陰影的光照區域顯示出來，友善調試。

//建立平行光

var

directionalLight =

new

THREE.DirectionalLight(0xffffff);

directionalLight.position.set(25, 17, -2);

directionalLight.castShadow =

true

directionalLight.target = plane

directionalLight.shadow.camera.near = 2;

directionalLight.shadow.camera.far = 40;

directionalLight.shadow.camera.left = -20;

directionalLight.shadow.camera.right = 20;

directionalLight.shadow.camera.top = 20;

directionalLight.shadow.camera.bottom = -20;

scene.add(directionalLight);

//顯示光照區域

var

helper =

new

THREE.CameraHelper(directionalLight.shadow.camera );

scene.add(helper);

（2）有時我們不想将 target 瞄準一個特定的對象，而是空間中的任意一點。可以通過建立一個 THREE.Object3D() 對象來實作。

//建立一個3d對象作為平行光的目标

var

target =

new

THREE.Object3D();

target.position.set(8, 0, 5);

scene.add(target);

//建立平行光

var

directionalLight =

new

THREE.DirectionalLight(0xffffff);

directionalLight.position.set(25, 17, -2);

directionalLight.castShadow =

true

directionalLight.target = target

directionalLight.shadow.camera.near = 2;

directionalLight.shadow.camera.far = 40;

directionalLight.shadow.camera.left = -20;

directionalLight.shadow.camera.right = 20;

directionalLight.shadow.camera.top = 20;

directionalLight.shadow.camera.bottom = -20;

scene.add(directionalLight);

3，shadowCascade 屬性介紹

THREE.DirectionLight 還有一個特有的屬性：shadowCascade。當我們需要使用 THREE.DirectionLight 在一個很大的區域設定陰影時，這個屬性可以幫助建立更好的陰影效果。
該屬性預設為 false。如果将這個屬性設定為 true，Three.js 會使用一個替代方法來生成陰影。它将陰影的生成分裂為由 shadowCascadeCount 指定的值。這将導緻靠近攝相機視點會産生更具細節的陰影，而遠離錄影機視點陰影的細節更少。
要使用這個選項需要嘗試設定一下屬性：shadowCascadeCount、shadowCascadeBias、shadowCascadeWidth、shadowCascadeHeight、shadowCascadeNearZ 和 shadowCascadeFarZ 屬性。

原文出自：www.hangge.com 轉載請保留原文連結：http://www.hangge.com/blog/cache/detail_1812.html

Three.js - 光源使用詳解3（環境光 HemisphereLight、鏡頭光暈 LensFlare）

五、THREE.HemisphereLight（環境光）

1，基本介紹

使用 THREE.HemisphereLight 可以建立更加貼近自然的戶外光照效果。
THREE.HemisphereLight 不會産生陰影。

THREE.HemisphereLight 的優勢：

如果不使用 THREE.HemisphereLight，要模拟戶外光照，通常是建立一個 THREE.DirectionalLight 來模拟太陽光，并且可能再添加一個 THREE.AmbientLight 來為場景提供基礎色。

但是，這樣的光照效果看起來并不怎麼自然。因為在戶外，并不是所有的光源都來自上方（很多是來自大氣的散射和地面以及其他物體的反射）。

THREE.HemisphereLight 光源就是為這種情形建立的。它為獲得更自然的戶外光照效果提供了一個簡單的方式。

2，屬性介紹

color：從天空發出的光線的顔色
groundColor：從地面發出的光線的顔色
intensity：光源照射的強度。預設值為：1。
position：光源在場景中的位置。預設值為：(0, 100, 0)
visible：設為 ture（預設值），光源就會打開。設為 false，光源就會關閉。

3，使用樣例

建立半球光源就像建立其他光源一樣簡單，隻需要給它指定接收自天空的顔色，接收自地面的顔色，以及這些光線的關照強度即可。

var

hemiLight =

new

THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6);

hemiLight.position.set(0, 100, 0);

//這個也是預設位置

scene.add(hemiLight);

4，效果圖

下面左右兩個場景中環境光源使用的初始值分别是：(0x0000ff, 0x00ff00, 0.6)、(0xffffff, 0x000000, 1)

六、THREE.LensFlare（鏡頭光暈）

1，基本介紹

當我們直接朝着太陽或者另一個非常明亮的光源拍照時就會出現鏡頭光暈效果（lens flare）。
使用 THREE.LensFlare 可以很友善地在場景中添加一個鏡頭光暈，這樣會讓場景看上去更加真實。
THREE.LensFlare 自身不會産生任何光照效果，也不會産生陰影。

2，屬性介紹

texture：紋理。紋理就是一個圖檔，用來決定光暈的形狀。
size：尺寸。可以指定光暈多大。這個尺寸的機關是像素。如果将它指定為 -1，那麼将使用紋理本身的尺寸。
distance：距離。即從光源（0）到錄影機的距離。使用這個參數将鏡頭光暈放置在正确的位置。
blending：混合。我們我們可以為光暈提供多種材質。混合模式決定了如何将它們混合在一起。鏡頭光暈預設的混合方式是 THREE.AdditiveBlending。
color：光暈的顔色。

3，準備工作

如果需要往場景中添加一個鏡頭光暈，首先我們需要将渲染器 THREE.WebGLRenderer 對象的 alpha 配置屬性設定為 true。

var

renderer =

new

THREE.WebGLRenderer({

alpha:

true

});

4，基本用法

（1）代碼說明

由于鏡頭光暈并不會照亮物體，是以我們首先添加一個平行光源。

接着建立一個鏡頭光暈，将其放在光源處，這樣看起來就像是光源産生的光暈。

//建立平行光源

var

directionalLight =

new

THREE.DirectionalLight(0xffffff);

directionalLight.position.set(30, 10, -50);

directionalLight.castShadow =

true

directionalLight.target = plane;

directionalLight.intensity = 2;

directionalLight.distance = 0;

directionalLight.shadow.camera.left = -25;

directionalLight.shadow.camera.right = 25;

directionalLight.shadow.camera.top = 25;

directionalLight.shadow.camera.bottom = -25;

scene.add(directionalLight);

//建立鏡頭光暈

var

loader =

new

THREE.TextureLoader()

var

textureFlare0 = loader.load(

"./lensflare/lensflare0.png"

);

var

flareColor =

new

THREE.Color(0xffaacc);

var

lensFlare =

new

THREE.LensFlare(textureFlare0, 170, 0.0, THREE.AdditiveBlending,

flareColor);

lensFlare.position.copy(directionalLight.position);

scene.add(lensFlare);

（2）效果圖

5，添加一些小光暈

（1）建立好主光暈後，我們還可以在頁面中添加一些小的圓形失真圖形。看起來像是光線照射過來時産生的光斑。

這裡的小光暈并不是建立一個新的 THREE.LensFlare，而是使用剛建立的主光暈（THREE.LensFlare 對象）的 add 方法。這些新光暈使用的紋理是一個顔色很淡的圓。

add 方法介紹：

這個方法隻需要指定紋理（texture）、尺寸（size）、距離（distance）和混合模式（blending）

通過該方法還可以接受兩個額外的參數：新光暈的顔色（color）和不透明度（opacity）

//建立平行光源

//....

//建立鏡頭光暈

var

loader =

new

THREE.TextureLoader()

var

textureFlare0 = loader.load(

"./lensflare/lensflare0.png"

);

var

textureFlare3 = loader.load(

"./lensflare/lensflare3.png"

);

var

flareColor =

new

THREE.Color(0xffaacc);

var

lensFlare =

new

THREE.LensFlare(textureFlare0, 170, 0.0, THREE.AdditiveBlending,

flareColor);

lensFlare.add(textureFlare3, 60, 0.6, THREE.AdditiveBlending);

lensFlare.add(textureFlare3, 70, 0.7, THREE.AdditiveBlending);

lensFlare.add(textureFlare3, 120, 0.9, THREE.AdditiveBlending);

lensFlare.add(textureFlare3, 70, 1.0, THREE.AdditiveBlending);

lensFlare.position.copy(directionalLight.position);

scene.add(lensFlare);

（2）效果圖

光暈材質下載下傳：

lensflare.zip

原文出自：www.hangge.com 轉載請保留原文連結：http://www.hangge.com/blog/cache/detail_1811.html

【three.js:文法】光源使用詳解2-3（聚光燈 SpotLight、平行光 DirectionLight 、環境光 HemisphereLight、鏡頭光暈 LensFlare）Three.js - 光源使用詳解3（環境光 HemisphereLight、鏡頭光暈 LensFlare）

三、THREE.SpotLight（聚光燈光源）

1，基本介紹

2，屬性介紹

3，基本用法

4，陰影相關用法

四、THREE.DirectionLight（平行光）

1，基本介紹

2，屬性介紹

3，基本用法

3，shadowCascade 屬性介紹

Three.js - 光源使用詳解3（環境光 HemisphereLight、鏡頭光暈 LensFlare）

五、THREE.HemisphereLight（環境光）

1，基本介紹

2，屬性介紹

3，使用樣例

4，效果圖

六、THREE.LensFlare（鏡頭光暈）

1，基本介紹

2，屬性介紹

3，準備工作

4，基本用法

5，添加一些小光暈

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條