Three.js官網demo分析（二）---多種立體與光線

這是今天要分析的官網demo，這是源碼。

初始化相機，場景後，此次還初始化了兩種光源。

// 初始化環境光照，表示環境的基礎亮度，參數1爲光源顏色，參數2爲光源強度
        // 環境光在沒有物體的狀況下沒用
        // 不透明物體的顏色是反射光的顏色，在初始化紋理處可設置ambient屬性，表示物體反射環境光的能力
        var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
        scene.add( ambientLight );

        // 初始化點光源，參數爲顏色，亮度，照射的最遠距離
        var pointLight = new THREE.PointLight( 0xffffff, 0.8 );

具體能夠看入門指南中的光與影，另外除了光，你還須要瞭解光對不一樣材質的做用才能很好的獲得你想要的效果，對於這一點，入門指南中材質章節有很好的解釋。大體的意思以下：

1. BasicMaterial-基礎材質直接用color屬性設置材質顏色，不會受光照影響，不會有高光陰影部分。
2. MeshLambertMaterial-漫反射材料，顏色主要爲光照在物體上漫反射到咱們眼睛中的顏色，color屬性表示物體對散射光的反射能力，若是光源爲白光0xffffff，color設置爲0x00ff00，即能反射綠光，那麼物體就會呈現綠色，而若是光源爲紅光，那麼物體就不會反射光，表現爲黑色。emissive表現物體自發光的能力，通常在反射光弱的地方（如背光部分）會比較明顯。ambient表示材料對環境光的反射能力，環境光通常是給場景一個基礎的光亮，要與其餘光源區別開來。
3. MeshPhongMaterial-phone材質，有鏡面反射的效果。其餘屬性與漫反射材質同樣，有兩個獨有的屬性，specular和shininess，specular表示鏡面反射部分對光的反射能力。shininess控制高光的光斑的大小。

而後回到源碼

// 將點光源做爲相機的子對象，點光源的位置即相機的位置
        camera.add( pointLight );
        scene.add( camera );

文檔中說

能夠經過.add( object )方法來將對象進行組合，該方法將對象添加爲子對象

camera繼承自object3D，用這個屬性將點光源添加爲子對象，而後點光源的位置就會隨相機的位置改變，就像你拿着一個手電筒同樣。

// 加載紋理
        var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' );
        // wrapS表示紋理在水平方向如何包裹，wrapT表示在垂直方向,使用RepeatWrapping，紋理將簡單地重複到無窮大  ??
        map.wrapS = map.wrapT = THREE.RepeatWrapping;
        // 沿着軸，經過具備最高紋素密度的像素的樣本數  ??
        map.anisotropy = 16;
        // 初始化Phong網孔材料，具備鏡面高光的光澤表面
        var material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } );

加載紋理這部分我不是很理解，感興趣能夠看下官網。

而後是構建幾何體部分，推薦看入門指南中的基礎幾何形狀和官網。其中比較有趣的是

// 構建二維對象數組
        var points = [];
        for ( var i = 0; i < 50; i ++ ) {
            points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, ( i - 5 ) * 2 ) );
        }
        // 車牀幾何體，由二維對象數組造成的曲線繞x軸旋轉一週得到
        object = new THREE.Mesh( new THREE.LatheBufferGeometry( points, 20 ), material );
        object.position.set( - 100, 0, - 200 );
        scene.add( object );

這個能夠用來構造花瓶等曲面軸對稱物體，其中的二維對象數組就像咱們學的一元函數同樣，在座標系中能夠表示出各類曲線，而後繞x軸旋轉一週獲得立體圖形。這個的關鍵就是怎麼獲得你想要形狀的數學表達式，這個就須要數學功底了，不知道有沒有畫一條線就能獲得近似表達式的軟件。

// 對該對象和子對象應用的回調函數
        scene.traverse( function ( object ) {
            // 若是對象爲網格對象
            if ( object.isMesh === true ) {

                object.rotation.x = timer * 5;
                object.rotation.y = timer * 2.5;

            }

        } );

這個traverse方法也是繼承自object3D，這裏用來給場景中的全部mesh物體加上循環調用的函數，使其不斷旋轉。

下面是最近蒐集的好資料

1. three.js學習羣羣主的博客，至關詳細。https://blog.csdn.net/qq_3010...
2. three.js正統的學習網站 http://learningthreejs.com/
3. 挺詳細的博文 https://www.cnblogs.com/cathe...
4. 有人寫的文檔 https://teakki.com/p/58a3ef1b...
5. 對光源的講解 http://www.hangge.com/blog/ca...