【three.js學習筆記】光

YancyYe 發(fā)布于2019-08-22 16:21 / 3028人閱讀

摘要：環(huán)境光的位置對呈現(xiàn)的效果無任何效果環(huán)境光的構(gòu)造函數(shù)只有一個參數(shù)進制的顏色值。半球光點光源點光源的光線來自同一點，并向外發(fā)射。點光源的構(gòu)造函數(shù)有三個參數(shù)，比平行光多了一個距離參數(shù)，光會從光源經(jīng)過的距離一路衰減為。

Lightapi

光源的基類。

Light( color, intensity )

color 光源顏色的RGB數(shù)值

intensity 光源強度的數(shù)值。

看到的顏色

使用反光材料的物體，看到的顏色是由光的顏色和物體本身的顏色所決定（物理光）。

綠色光照在紅色物體上，看到為黑色。

顯示真正顏色使用白色光：0xffffff;

AmbientLight（環(huán)境光）

環(huán)境光是一種無處不在的光，就好像現(xiàn)實世界中的空氣。環(huán)境光的光線來自任何方向，因此，當你僅為場景指定環(huán)境光時，所有的物體無論向量如何，都將表現(xiàn)為同樣的明暗程度。

環(huán)境光的位置對呈現(xiàn)的效果無任何效果

環(huán)境光的構(gòu)造函數(shù)THREE.AmbientLight只有一個參數(shù)——16進制的顏色值。

AmbientLight( hex )

var light = new THREE.AmbientLight(0xff0000);

scene.add( light );

給場景添加紅色的環(huán)境光后，立方體和地面都顯示為紅色：

AreaLight（區(qū)域光） DirectionalLight（平行光）

平行光是一組具有方向的沒有衰減的平行光線，它類似太陽光：雖然遙遠但打在物體上的光都來自同一個方向。

環(huán)境光的構(gòu)造函數(shù)THREE.DirectionalLight有兩個參數(shù)——16進制的顏色值和光線的強度（默認為1）。

DirectionalLight(hex, intensity)

var light = new THREE.DirectionalLight(0xffffff, 0.5);

light.position.set(100, 150, 50);

scene.add(light);

HemisphereLight（半球光）

PointLight（點光源）

點光源的光線來自同一點，并向外發(fā)射。就好像蠟燭發(fā)出的光和螢火蟲發(fā)出的光。

點光源的構(gòu)造函數(shù)THREE. PointLight有三個參數(shù)，比平行光多了一個距離參數(shù)，光會從光源經(jīng)過distance的距離一路衰減為0。

PointLight(hex, intensity, distance)

var light = new THREE.PointLight(0xffffff, 1, 300);

light.position.set(50, 50, 50);

scene.add(light);

SpotLight（聚光燈） 投影

Three.js的光源默認不會導致物體間的投影，打開投影需要執(zhí)行以下幾步：

打開渲染器的地圖陰影: renderer.shadowMapEnabled = true;

啟用光線的投影：light.castShadow = true;

把模型設置為生成投影：mesh.castShadow = true;

把模型設置為接收陰影：mesh.receiveShadow= true;







    

    我的第一個WebGL程序

GPU云服務器云服務器 three.js three.js極客 three.js教程 three.js cdn

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/94271.html

WebGL three.js學習筆記陰影與實現(xiàn)物體的動畫

摘要：另外如果想要在程序中開啟陰影的話首先需要把設置為，默認是關閉的，因為實現(xiàn)陰影的效果是比較消耗性能的。此時的陰影效果是這樣的至此，我們的場景還有物體的動畫效果就已經(jīng)實現(xiàn)。實現(xiàn)物體的旋轉(zhuǎn)、跳動以及場景陰影的開啟與優(yōu)化本程序?qū)?chuàng)建一個場景，并實現(xiàn)物體的動畫效果運行的結(jié)果如圖： showImg(https://img-blog.csdnimg.cn/20190413170812704.pn...

劉永祥 2019-08-23 17:06 評論0 收藏0
three.js 入門詳解(二)

摘要：首先，下載并在的中使用然后，我們需要準備一個模型，在函數(shù)中，創(chuàng)建變量，用于導入模型導入模型的時候，接受兩個參數(shù)，第一個表示模型路徑，第二個表示完成導入后的回調(diào)函數(shù)，一般我們需要在這個回調(diào)函數(shù)中將導入的模型添加到場景中。 9. 動畫在本章之前，所有畫面都是靜止的，本章將介紹如果使用Three.js進行動態(tài)畫面的渲染。此外，將會介紹一個Three.js作者寫的另外一個庫，用來觀測每秒幀數(shù)...

G9YH 2019-08-21 17:51 評論0 收藏0
【Three.js】Three.js學習記錄

摘要：上帝覺得缺少了些生氣，便用泥巴捏了一個小人兒，不叫亞當，她叫小芳。接下來預先恭喜你，你可以成為這網(wǎng)頁世界的一個小上帝。使用可以向場景中發(fā)射光線。在下述案例中，從攝像機的位置向場景中鼠標的點擊位置發(fā)射光線。先得擺出幾個關鍵詞：場景、燈光、模型、材質(zhì)、貼圖與紋理、相機、渲染器。然后我開始裝模作樣地解釋：上帝說，要有場景！于是就有了場景，場景去納這萬事萬物。上帝說，要有光！于是就有了光...

chanthuang 2019-08-23 14:46 評論0 收藏0