1. 程式人生 > >Three.js學習筆記-Materials(材料)

Three.js學習筆記-Materials(材料)

Material##

抽象的所有材料的基類,展示了物件的外觀
建構函式
Material()
特性

  • alphaTest : Float 渲染的材質的opacity小於這個設定的值時將不會被渲染出來
  • blendDst: Integer 材料的混合必須設定為CustomBlend,這樣才能產生任何效果
  • blendDstAlpha: Integer 預設null
  • blendSrc 混合源,預設SrcAlphaFactor
  • blendSrcAlpha
  • blendEquation: Integer 應用混合時使用的混合方程,預設AddEquation
  • blendEquationAlpha: Integer 預設null
  • blending: Blending 設定為CustomBlending時才可用blendSrc,blendDst,blendEquation,預設NormalBlending 只顯示材質的上層
  • clipIntersection: Boolean 改變裁剪平面行為,只要交集被裁剪不是他們的結合,預設false
  • clipShadows 預設false,定義是否根據此材料上指定的剪裁平面剪裁陰影
  • colorWrite 渲染材料的顏色,預設true
  • customDepthmaterial: Material 投射的陰影是太陽光或點光源 預設undefined
  • customDistanceMaterail 用在點光源 預設undefined
  • defines/depthTest/depthWrite/depthFunc/flatShading/fog/id/name/opacity/needsUpdate 自動設為true
  • precision:String 覆蓋渲染器對此材料的預設精度,有highp/mediump/lowp,預設null
  • overdraw: Float 當使用CanvasRenderer時三角形之間出現間隙時,這是一種解決方法。0.5傾向於跨瀏覽器提供好的結果。預設值為0
  • opacity: 如果未設定材質的 transparent屬性為true,則材質任然保持完全不透明。該值只會影響顏色
  • lights: 預設true,表示材質受到燈光的影響
  • shadowSide : Integer 哪一個面投影陰影,預設null
  • type: 值為Material,找相應的型別/uuid/visible/userData
  • transparent: Boolean 預設false
  • side: Integer 定義那一面被渲染 THREE.FrontSide/BackSide/DoubleSide
  • uuid/visible/userData
  • overdraw: Float 使用CanvasRender時,三角形之間出現間隙,可以設定0.5給瀏覽器提供好的結果

方法

  • clone()/copy(material)/dispose()/setValue(value)/toJSON()/onBrforeCompline(shader,renderer)

LineBasicMaterial##

建構函式
LineBasicMaterial(parameters: Object) 可選的引數

  • color/linewidth/linecap 線的結尾樣式(butt,預設round,square,)/linejoin 相交的樣式(預設round,bevel,miter)
    特性
  • lights 是否收到光的影響,預設false

LineDashMaterial

建構函式
LineDashMaterial(parameters: Object) 可選的引數

  • color/linewidth/dashSize預設3/gapSize預設1/scale預設1,

MeshBasicMaterial

不會對光源有任何的反應,只會使用指定的顏色來渲染物體
建構函式
MeshBasicMaterial (parameters: Object)
特性

  • alphaMap: 一個灰度貼圖,控制表面的不透明度,黑絲透明,白色不透明
  • aoMap: 該紋理的紅色通道用來環境遮擋圖
  • aoMapIntensity: 預設1
  • color 預設0xffffff
  • combine 如何將便面顏色和envMap結合起來(存在的話),預設THREE.Multiply
  • isMeshBasicMaterial 預設true
  • envMap: 環境貼圖,預設null
  • lightMap(null)/lightMapIntersity(1)/lights 是否受燈光的影響,預設false
  • map (color貼圖,null)/morphTargets 材料是否啟用形態目標,預設false
  • reflectivity envMap對錶面的影響。預設1,完全影響/reflactionRatio 0~1 預設0.98
  • skinning 材料是否使用skinning,預設false
  • specularMap 鏡面圖,預設false
  • wireframe 預設false,渲染幾何體為線條
  • wireframeLinecap/wireframeLinejoin/wireframeLinewidth

MeshDepthMaterial

使用從攝像機到物體的距離來給網格上色
白色最近的,黑色最遠的
屬性

  • alaphMap/displacementMap/dissplacementScale
  • displacementBias/fog/map
  • morphTarget(false) 發生變形(將頂點發生位置變化)時需要設為true
  • skinning(false)
  • wireframe/wireframeLineWidth
  • depthPacking: Constant 編碼

MeshLambertMaterial

用於暗淡的不光亮的物體(漫反射)
特性

  • emissive : Color 預設黑色black,材料發射出的光
  • emissiveMap/emissiveIntensity: Float 強度預設1

MeshNormalMaterial

將法向量對映到RGB顏色的材料

MeshStandarMaterial

特性

  • metalness 這種材料多像金屬,預設0.5
  • metalnessMap 紋理的藍色通道用來改變材料的金屬度

MeshPhongMaterial

有鏡面高光的有光澤的材料(鏡面反射)
特性

  • bumpMap/bumpScale 凹凸貼圖/凹凸貼圖對材料的影響0-1,預設1
  • shininess: Float 鏡面高光部分的亮度,預設30
  • specular: Color 決定了材料的光澤和光澤的顏色,預設0x111111

MeshToonMaterial

MeshPhongMaterial的擴充套件,帶有toon 陰影
特性

  • gradientMap 梯度圖,給toon 陰影,預設null

PointsMaterial

特性

  • size points的大小 預設1.0
  • sizeAttenuation 隨這距離的邊緣,點的大小變小,預設true

ShaderMaterial

定製著色器渲染的材料
[OpenGL ES著色語言1.0](https://www.khronos.org/files/opengles_shading_language.pdf)寫著色器
自定義的著色器的渲染材料只能通過WebGLRenderer來渲染,因為vertexShader 和fragmentShader屬性中的GLSL程式碼必須使用WebGL在GPU上編譯和執行
從Three r72開始不再支援在ShaderMatary中直接賦值屬性 BufferGeomery例項替代Geometry例項,用BufferAttribute例項去定義自定義屬性
從Three r77開始,WebGLRenderTarget或WebGLRenderTargetCube例項將不再被用作uniforms。必須使用它們的texture屬性
內建的屬性和uniforms連同程式碼一起傳遞給著色器。如果您不希望WebGLProgram向您的著色器程式碼新增任何內容,您可以使用RawShaderMatary而不是這個類
vertexShader頂點著色器首先執行;它接收屬性,計算/操作每個單獨頂點的位置,並將附加資料(變數)傳遞給片段著色器。fragmentShader片段(或畫素)著色器執行第二;它設定每個單獨的“片段”(畫素)呈現到螢幕上的顏色
著色器中有三種類型的變數uniforms, attributes, 和 varyings
uniforms可以訪問頂點著色器和片段著色器
uniforms, attributes就像常量一樣;您只能通過從JavaScript程式碼向緩衝區傳遞不同的值來修改它們的值
內建的uniforms, attributes可以檢視WebGLProgram
為了自定義atributes.uniforms必須子啊GLSL著色器程式碼中宣告,自定義uniforms必須在ShaderMaterial的uniforms屬性中,任何的自定義屬性都應該通過BufferAttribute例項來定義
要宣告一個自定義屬性,請參考BufferGeics獲得概述,並在BufferAttribute頁面中檢視BufferAttribute API的詳細資訊
在建立屬性時,為儲存屬性資料而建立的每個型別化陣列必須是資料型別大小的倍數。如果您的屬性是THREE.Vector 3型別,而您的BufferGeics中有3000個頂點,則必須建立長度為3000*3或9000
請注意,屬性緩衝區的值更改時不會自動重新整理。若要更新自定義屬性,請在幾何圖形的BufferAttribute上將需更新標誌設定為true
特性

  • clipping:Boolean 材料是否支援裁剪,預設false。true需要通過Uniform 中的clippingPlanes
  • defaultAttributeValues
  • defines 轉化成GLSL中的#define指令給頂點片段著色器
  • extensions: Object/fog:Boolean
  • fragmentShader: String 片段著色器GLSL程式碼
  • lights: Boolean 預設false
  • lineWidth: Float/program: WebGLProgram
  • skinning:Boolean 預設false
  • uniforms: Object /vertexColors: Number (THREE.NoColors/FaceColors/VertexColors)
  • vertexShader: String 頂點著色器GLSL程式碼

RawShaderMaterial

和上面的差不多,但內建的uniform和屬性不會自動新增到GLSL著色器程式碼中

ShadowMaterial

用來接收陰影,但其他的地方全是透明的
特性

  • transparent: 材料是否透明,預設true

SpriteMaterial

和Sprite一起使用的材料
特性

  • rotation: Radians 預設0