1. 程式人生 > >《three.js開發指南》 筆記

《three.js開發指南》 筆記

3D物件基類THREE.Object3D。 第2章 使用構建Three.js場景的基礎     2.1建立場景
  1. .add(obj:Object);              在場景中新增物件
  2. .remove(obj:Object);        在場景衝移除物件
  3. .children();                        獲取該場景所有物件陣列;
  4. .getChildByName(name:String);    通過name屬性獲得子物件;
  5. .traverse(function);                        function(e:child)便利子物件;

  6. .fog                                                新增霧化效果;
  7. .overrideMaterial                            統一重置材質;
    2.2使用幾何和網格物件(THREE.Geometry(幾何)、THREE.Material(材質)、THREE.Mesh)(網格物件))
    幾何基類:THREE.Geometry;
                .vertices                               頂點陣列
                .faces                                    面數組
                .verticesNeedUpdate            
                .mergeVertices()
                .computeFaceNormals()        
                .clone()                                    克隆
    THREE.SceneUtils
    2.3選擇合適的相機 
      相機基類:THREE.Camera
       透視相機:THREE.PerspectiverCamera(fov?,aspect?,near?,far?)
            距離相機越遠,被渲染得越小。
       正投影相機:THREE.OrthographicCamera(left,right,top,bottom,near,far)
            以相同的尺寸渲染所有物件,而且不考慮物件與相機之間的距離。
第3章 使用Three.js裡的各種光源     3.1Three.js中的光源有:
    AmbientLight(環境光)、PointLight(點光源)、SpotLight(聚關燈光源)、DirectionalLight(方向光)、HemisphereLight(半球光)、AreaLight(面光源)、LensFlare(鏡頭炫光).
    3.2學習各種基礎光源
        3.2.1 THREE.AmbientLight
            AmbientLight光源的特點:AmbientLight光源的顏色會影響整個場景。AmbientLight的光線沒有特定的來源,而且這個光源也不會影響陰影的生成。不能把AmbientLight作為場景中唯一的光源。在使用其它光源的同時使用AmbientLight,目的是弱化陰影或者新增一些顏色。
            例:var amientLIght=new THREE.AmbientLight(ambientLightColor?:THREE.Color);
                scene.add(ambientLight);
        3.2.2 THREE.PointLight
            PointLight是一種單點發光,照射所有方向的光源。不生成陰影。    
屬性 賦值 描述
color(顏色) THREE.Color 光源顏色
intensity(強度) float 光源強度。預設值是1
distance(距離) float 光源照射的距離
position(位置) THREE.Vector3 光源所在的位置
visible(是否可見) boolean true,該光源開啟;false,該光源關閉。
        3.2.3 THREE.SpotLight     
                SpotLight具有錐形效果的光源。
                var spotLight=new THREE.SpotLight(color,intensity?,distance?,angle?,expoent?)
屬性 賦值 描述
castShaow(是否投影) boolean 預設值:false。true,可以生成陰影。
shadowCameraNear(投影近點) float 預設值:500。從距離光源的哪一點開始可以生成陰影。
shadowCameraFar(投影遠點) float 預設值:4000。到距離光源的哪一點結束生成陰影。
shadowCameraFov(投影現場) float 預設值:30。用於生成陰影的視場有多大。
shadowBias(陰影偏移) 預設值:0。用於偏置陰影的位置。
shadowCameraVisible(投影方式是否可見) boolean 預設值:false。true,可以看到光源在哪裡以及如何生成陰影。
shadowDrakness(陰影暗渡) float 預設值:0.5。定義渲染的陰影有多黑。場景渲染之後不能修改。
shadowMapWidth(陰影對映寬度) float 預設值:512。決定有多少畫素用來生成陰影。如果陰影的邊緣參差不齊或者看上去不那麼平滑,可以增加這個值。場景渲染以後不能修改。
shadowMapHeight(陰影對映高度) float 預設值:512。決定有多少畫素用來生成陰影。如果陰影的邊緣參差不齊或者看上去不那麼平滑,可以增加這個值。場景渲染以後不能修改。
distance(光線長度) float 預設值:0(光線無衰減)。 從燈光的position位置,開始衰減,衰減到distance的長度。
angle(圓錐角度) float(弧度) 預設值:Math.PI/3。光源射出的光柱有多寬。
target(目標點,圓錐圓心上的點) THREE.Object3D 決定光照的方向。obj3D.position
exponent(光照衰減指數) 預設值:10。光照強度衰減係數。
onlyShadow() boolean 預設值:false。true,只生成陰影,不新增任何光照。
            3.2.4 THREE.DirectionalLight -模擬遠處太陽的光源
                DirectionalLight特點:被光照亮的整兒區域接收到的光強是一樣的。                 var directionalLight=new THREE.DirectionalLight(THREE.Color)
屬性 賦值 描述
shadowCameraLeft int 預設值:-500。相機左側距離,不計算在範圍之外的物體的陰影
shadowCameraRight int     預設值:500。相機右側距離,不計算在範圍之外的物體的陰影
shadowCameraTop int 預設值:-500。相機上側距離,不計算在範圍之外的物體的陰影
shadowCameraBottom int 預設值:500。相機下側距離,不計算在範圍之外的物體的陰影
           3.2.5特殊光源              3.2.5.1 THREE.HemisphereLight (半球光光源)
                   HemisphereLight包含一個上方光線和地面光線。
                    var hemisphereLight=new HemisphereLight(color,groundColor,intensity)
            3.2.5.2 HTREE.AreaLight(平面光光源)
                    AreaLight額外引入js、額外延時渲染WebGLDeferredRenderer(WebGL的延遲渲染器)。             3.2.5.3 THREE.LensFlare 境外眩光                     var lensFlare=new THREE.LensFlare(texture?,size?,distance?,blending?,color?)
屬性 賦值 描述
texture     紋理材質。決定眩光的樣子。
size 大小。-1為原始大小。   
distance
blending     材質融合型別。
color 眩光的顏色

     第4章 使用three.js的材質
            4.1材質共有屬性:基礎屬性,融合屬性,高階屬性。
基礎屬性:
屬性 賦值 描述
uuid     材質唯一ID
name 材質名稱
opacity     材質透明度,(0.0 ,1.0)只有在 transparent = true 才使用。透明是渲染畫素時,待渲染值與已存在值共同作用 計算出渲染後像素值,達到混合的效果
transparent 是否支援材質透明
overdraw 當三角面之間產生間距,發生圖形走樣時。 填充畫素,確保圖形保真,消除走樣.通常取值範圍在0.0=1.0之間
visible 是否可見
side 材質的單雙面。THREE.FrontSide 材質只附著正面;THREE.BackSide 材質只附著背面;THREE.DoubleSide 模型雙面都附著材質;
needsUpdate 當設定為true時,標記材質已經更新.

融合屬性:
屬性     賦值     描述
blending 預設值:THREE.SrcAlphaFactor。材質混合方式;
blendsrc 預設值:THREE.SrcAlphaFactor。混合顏色的源顏色因子
blenddst 預設值:THREE.OneMinusSrcAlphaFactor。混合顏色的目標顏色因子
blendEquation 預設值:THREE.AddEquation 相加。混合方程式
高階屬性:       
屬性     賦值     描述 
depthTest     深度測試,預設為true,如果設定為false,在場景中遠處的物件不被近處的物件遮擋
depthWrite 允許或禁止向深度緩衝區寫入資料,預設為true,指定是否允許向深度緩衝區寫入資料
polygonOffset、
polygonOffsetFactor、
polygonOffsetUnits
多邊形位移,當兩個面共面時,會出現十分難看的z - fighting 問題。多邊形位移因子。多邊形位移單位。
alphaTest alpha測試,取值範圍0.0-1.0
        4.2.1簡單的材質THREE.MeshBasicMaterial
        MeshBasicMaterial不受光照影響。
屬性 賦值 描述
color     THREE.Color 顏色    
wireframe boolean 是否以線框方式渲染幾何體
wireframeLinewidth float 線框寬度
wireframeLinecap string 線框端點型別,參照LineBasicMaterial的定義
wireframeLinejoin string 線框連線型別,參照LineBasicMaterial的定義
shading number 著色方式
THREE.SmoothShading平滑著色:用多種顏色進行繪製
每個頂點都是單獨進行處理的,各頂點和各圖元之間採用均勻插值。
vertexColors number 頂點顏色
fog     霧化
           4.2.2基於深度著色的THREE.MeshDepthMaterial
MeshDepthMaterial外觀由物體到相機的距離決定。該材質的顏色由預設屬性設定。
屬性 賦值 描述
wireframe
wireframeLinewidth
            4.2.3聯合材質
        示例:
HTML5移動web開發指南筆記

需要注意的是,Opera公司釋出的OperaMobile和OperaMini兩款移動Web瀏覽器 雖然都適用於手機瀏覽器,但兩者是有區別的。OperaMobile僅用於Android和Symbian 智慧手機,而OperaMini則適用於幾乎所有的手機。由於OperaMini的渲染過程在服務 器端,因此

Three.js 開發基礎知識

Three.js是一個用來簡化WebGL開發的JavaScript庫,比如繪製一個三維立方體,使用WebGL需要100多行,那Three.js只要10幾行就能夠完成。本文通過建立一個立方體來簡單介紹Three.js的基礎知識。Three.js中的基本概念Three.js包含3

VR開發 入門 使用Three.js 開發的WebVR demo

使用Three.js,並且參考網上開源的程式碼,終於實現了第一個VR程式。 線上演示: https://ritterliu.github.io/WebVR_Demo/ <!DOCTYPE html> <html> <head>

【帶著canvas去流浪(11)】Three.js入門學習筆記

目錄 一. 資料推薦及建議 二. Three.js中的基本概念 三.重點筆記 四.補充示例 示例程式碼託管在:http://www.github.com/dashnowor

Three.js 開發機房(三)

之前三節都沒涉及到機房,只是一些零零散散的知識點,這一節我們就開始正式畫外牆。 首先我了明顯理解以下啥是牆?其實說白了就是一個長方體,長不確定,寬一般也就是40cm,高也就是兩米,這就是一個簡單的牆,當然很多牆上都有窗戶、門啥的,其實也就是在長方體的固定的位置掏個洞,然後放上我們需要方的東西,比如門,窗戶。

Three.js 開發機房(四)

這一節我們講講怎麼畫機櫃,其實機櫃如果作的複雜一點、逼真一點可以用3D建模工具,不過一般的專案中也不用做的那麼麻煩,那我們就可以將機櫃抽象以下,首先它是一塊具有長寬高的立方體鐵塊,然後我們從中間在掏掉一個小一號的立方體同時掏出出一個門的位置就好了,程式碼如下 initCabient() {

【轉】Nodejs學習筆記(一)--- 簡介及安裝Node.js開發環境

ack 目錄 javascrip 難度 時間 網站開發 clas jetbrains 常用 目錄 學習資料 簡介 安裝Node.js npm簡介 開發工具 Sublime Node.js開發環境配置 擴展:安裝多版本管理器 學習資料   1.深入淺出Node.j