Three.js (二) 光源腹尖、投影、光暈

光源

  • 光的通用屬性
    • fex:光的顏色伐脖,用16進制顏色表示(如0x00FF00)
    • intensity:光的強度热幔,默認為1
    • castShadow:是否啟用陰影 默認為false
      環(huán)境光與半球光不能投射陰影讼庇。
      產(chǎn)生投影的光線需配置投影區(qū)域屬性限制投影范圍(節(jié)省性能)
  • 每種光都有輔助線绎巨,將光源作為參數(shù)傳入輔助線構造函數(shù)即可生成實例
var helper = new THREE.HemisphereLightHelper(hemiLight);
scene.add(helper);
環(huán)境光

THREE.AmbientLight( fex )
環(huán)境光是經(jīng)過多次反射而來的光,無處不在巫俺,會照射到場景內(nèi)的任何一個物體的任何一面认烁,且具有相同的明暗程度,因此不會產(chǎn)生陰影介汹。(這是因為却嗡,反射光可以從各個方向進入您的眼睛)

點光源

PointLight( fex, intensity, distance, decay )
由這種光源放出的光線來自同一點,且方向輻射自四面八方嘹承,光強度可隨著距離衰減窗价。例如螢火蟲放出的光。

  • distance:光強衰減為0處到光源的距離叹卷。 默認情況下撼港,這個值為0,表示光源強度不衰減骤竹。
  • decay: 沿著光照距離的強度衰退速度帝牡,默認為1。
  • 陰影邊界屬性
    陰影區(qū)域類似透視投影相機的視野蒙揣,為一個錐體
    • light.shadow.camera.near 默認值:50
    • light.shadow.camera.far 默認值:5000
    • light.shadow.camera.fov 默認值:50
  • position: 光的位置靶溜,默認為(0,1,0)
平行光

DirectionalLight( hex, intensity )
平行光又稱為方向光,是一組來自無限遠處的沒有衰減的平行光線罩息,類似太陽光的效果(太陽是如此遙遠嗤详,所有的陽光照射到物體上都幾乎來自同一個角度)。

平行光的方向總是為從光的位置position照向target的一個向量(因此對平行光實例做旋轉沒有效果)瓷炮,其效果只與方向有關葱色,與離物體的遠近無關,其位置僅用于決定方向娘香。

  • position: 光的位置苍狰,默認為(0,1,0),僅用于配合target決定光的方向茅主,與離物體的遠近無關舞痰。如位置從(0,0,100),(0,0,50)诀姚,(0,0,1)分別照向(0,0,0)時响牛, 效果完全一致。
  • target: 目標位置赫段,默認為原點(0,0,0)呀打。
    注意: 對于目標的位置,要將其更改為除缺省值之外的任何位置糯笙,必須被添加到 scene 場景中去贬丛,這使得屬性target中的 matrixWorld 會每幀自動更新。
    可以是一個已有對象给涕,也可以新建一個Object3D實例豺憔。
var targetObject =  new THREE.Object3D(); 
targetObject.position.set(8, 0, 5);
scene.add(targetObject); 
light.target = targetObject;
  • 陰影邊界屬性
    因光線都是平行的,陰影區(qū)域類似正投影相機的視野
    • shadow.camera.near:(0.5)投影近點够庙。表示距離光源的哪一個位置開始生成陰影恭应。
    • shadow.camera.far:(500)投影遠點。表示到距離光源的哪一個位置可以生成陰影耘眨。
    • shadow.camera.left:(-5)投影左邊界昼榛。
    • shadow.camera.right:(5)投影右邊界。
    • shadow.camera.top:(5)投影上邊界剔难。
    • shadow.camera.bottom:(-5)投影下邊界胆屿。
聚光燈

THREE.SpotLight( color, intensity, distance, angle, penumbra, decay )
從一個方向上的一個點發(fā)出,覆蓋一個圓錐體范圍偶宫,它離光越遠非迹,它的尺寸就越大。

  • distance:光強衰減為0處到光源的距離纯趋。 默認情況下彻秆,這個值為0,表示光源強度不衰減。
  • angle:光線散射角度唇兑,最大為Math.PI/2
  • penumbra:聚光錐的半影衰減百分比桦锄。在0和1之間的值扎附。默認為0。
  • decay: 沿著光照距離的強度衰退速度结耀,默認為1留夜。
  • position:同點光源
  • target:同平行光
  • 陰影區(qū)域屬性:同點光源
半球光

HemisphereLight( skyColor , groundColor , intensity )
光源具有上下兩種不同的顏色,從天空光線顏色顏色漸變到地面光線顏色图甜。 通常用于模擬戶外光照碍粥,比起THREE.DirectionalLight模擬太陽光+THREE.AmbientLight為場景提供基礎色的方案,HemisphereLight更為自然(因為在戶外黑毅,并不是所有的光源都來自上方嚼摩,很多是來自大氣散射和地面以及其他物體的反射)。

  • position: 同平行光僅用于設置方向矿瘦,具體位置無意義枕面。但無法設置target
  • visible:設為 ture(默認值)缚去,光源就會打開潮秘。

投影

投影需要以下配置

  1. 為渲染器開啟投影 renderer.shadowMap.enabled = true;
  2. 存在允許投影的光源 light.castShadow = true;
  3. 存在允許投影的物體 cube.castShadow = true;
  4. 存在允許顯示投影的物體 floor.receiveShadow= true;

可以配置渲染器的shadowMap.type屬性變更投影樣式

  • THREE.BasicShadowMap:普通陰影映射
  • THREE.PCFShadowMap:柔化邊緣的陰影映射(默認)
  • THREE.PCFSoftShadowMap:柔化邊緣的軟陰影映射

配置以下屬性限制陰影質(zhì)量,默認值為512,512

  • light.shadow.mapSize.width
  • light.shadow.mapSize.height

開啟投影輔助線

scene.add(new THREE.CameraHelper( light.shadow.camera ))

光暈

LensflareElement( texture : Texture, size : Float, distance : Float, color : Color )

  • texture - 用于光暈的THREE.Texture(貼圖)
  • size - (可選)光暈尺寸(單位為像素)
  • distance - (可選)和光源的距離值在0到1之間(值為0時在光源的位置)
  • color - (可選)光暈的(Color)顏色(需使用THREE.Color封裝易结,不能直接使用16進制顏色)
  1. 要使用光暈枕荞,首先需要設置渲染器允許透明
  2. 光暈必須和一個已有光源綁定
  3. 同一光源的其他光暈/光斑可以通過.add(texture,size搞动,distance躏精,blendingType)添加到已有光暈上
var renderer = new THREE.WebGLRenderer({
  alpha: true
});
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/2, 0.6, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 70/2, 0.7, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 120/2, 0.9, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 70/2, 1.0, THREE.AdditiveBlending);
lensFlare.position.copy(light.position);
scene.add(lensFlare);

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市滋尉,隨后出現(xiàn)的幾起案子玉控,更是在濱河造成了極大的恐慌,老刑警劉巖狮惜,帶你破解...
    沈念sama閱讀 216,651評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件高诺,死亡現(xiàn)場離奇詭異,居然都是意外死亡碾篡,警方通過查閱死者的電腦和手機虱而,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來开泽,“玉大人牡拇,你說我怎么就攤上這事。” “怎么了惠呼?”我有些...
    開封第一講書人閱讀 162,931評論 0 353
  • 文/不壞的土叔 我叫張陵导俘,是天一觀的道長。 經(jīng)常有香客問我剔蹋,道長旅薄,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,218評論 1 292
  • 正文 為了忘掉前任泣崩,我火速辦了婚禮少梁,結果婚禮上,老公的妹妹穿的比我還像新娘矫付。我一直安慰自己凯沪,他們只是感情好,可當我...
    茶點故事閱讀 67,234評論 6 388
  • 文/花漫 我一把揭開白布买优。 她就那樣靜靜地躺著妨马,像睡著了一般。 火紅的嫁衣襯著肌膚如雪而叼。 梳的紋絲不亂的頭發(fā)上身笤,一...
    開封第一講書人閱讀 51,198評論 1 299
  • 那天,我揣著相機與錄音葵陵,去河邊找鬼液荸。 笑死,一個胖子當著我的面吹牛脱篙,可吹牛的內(nèi)容都是我干的娇钱。 我是一名探鬼主播,決...
    沈念sama閱讀 40,084評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼绊困,長吁一口氣:“原來是場噩夢啊……” “哼文搂!你這毒婦竟也來了?” 一聲冷哼從身側響起秤朗,我...
    開封第一講書人閱讀 38,926評論 0 274
  • 序言:老撾萬榮一對情侶失蹤煤蹭,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后取视,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體硝皂,經(jīng)...
    沈念sama閱讀 45,341評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,563評論 2 333
  • 正文 我和宋清朗相戀三年作谭,在試婚紗的時候發(fā)現(xiàn)自己被綠了稽物。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,731評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡折欠,死狀恐怖贝或,靈堂內(nèi)的尸體忽然破棺而出吼过,到底是詐尸還是另有隱情,我是刑警寧澤咪奖,帶...
    沈念sama閱讀 35,430評論 5 343
  • 正文 年R本政府宣布盗忱,位于F島的核電站,受9級特大地震影響赡艰,放射性物質(zhì)發(fā)生泄漏售淡。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,036評論 3 326
  • 文/蒙蒙 一慷垮、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧揍堕,春花似錦料身、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至楞慈,卻和暖如春幔烛,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背囊蓝。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評論 1 269
  • 我被黑心中介騙來泰國打工饿悬, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人聚霜。 一個月前我還...
    沈念sama閱讀 47,743評論 2 368
  • 正文 我出身青樓狡恬,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蝎宇。 傳聞我的和親對象是個殘疾皇子弟劲,可洞房花燭夜當晚...
    茶點故事閱讀 44,629評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 作為3D技術的發(fā)展趨勢,瀏覽器端3D技術越來越被一些技術公司重視姥芥。由此兔乞,Threejs非常注重3D渲染效果的真實性...
    sakatayui醬閱讀 1,753評論 0 1
  • 轉載自VR設計云課堂[http://www.reibang.com/u/c7ffdc4b379e]Unity S...
    水月凡閱讀 1,013評論 0 0
  • SpotLight 聚光燈光源。這種光從一個點向一個方向發(fā)出凉唐,沿著一個圓錐庸追,光照越遠它的尺寸就越大。這種光照可以產(chǎn)...
    斯特凡1899閱讀 854評論 0 0
  • 一熊榛、四大光照類型1.環(huán)境光(Ambient Light) 一個物體即使沒有直接被光源照射锚国,但是只要有光線通過其他物...
    CarlDonitz閱讀 1,490評論 0 0
  • 草莓果俏,食客愛它玄坦,自有之妙血筑。 皮薄肉嫩绘沉,汁多甜美,乃水果中一王道豺总。 只是當你將它放入口中车伞,汁香四溢,味蕾靜享美妙...
    趙佛閱讀 692評論 0 2