Three开发笔记(二)
生活随笔
收集整理的這篇文章主要介紹了
Three开发笔记(二)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 1. 學習使用Three.js 中的光源
- THREE. AmbientLight
- THREE. Color
- THREE. PointLight
- THREE. SpotLight
- THREE. DirectionalLisht
- THREE. HemisphereLight
- THREE. AreaLight
- THREE. LensFlare
- 2. 使用 Three.js 的材質
- 分類
- 基礎屬性 THREE. Material
- 混合屬性
- 高級屬性
- MeshBaseMaterial
- THREE. MeshDepthMaterial
- 聯合材質
- THREE. MeshNormalMaterial
- THREE. MeshFaceMaterial
- THREE. MeshPhongMaterial
- THREE. ShaderMaterial 創建自己的著色器
- THREE. LineBaseMaterial
- THREE. LineDashMaterial
1. 學習使用Three.js 中的光源
不同種類的光源
| THREE. AmbientLight | 基本光源，該光源的顏色將會疊加到場景現有物體的顏色上 |
| THREE. PointLight | 點光源，從空間的一個點向所有方向發射光線，點光源不能用來創建陰影 |
| THREE. SpotLight | 光源有聚光的效果，類似臺燈、天花板上的吊燈或手電筒，這種光源可以投射陰影 |
| THREE. DirectionalLIght | 無線光，光源發出的光線可以看作是平行，類似太陽光，可創建陰影 |
| THREE. HemisphereLight | 特殊光源，可通過模擬反光面和光線微弱的天空來創建更加自然的室外光線，不提供陰影相關功能 |
| THREE. AreaLight | 可指定散發光線的平面，不是一個點，不投射陰影 |
| THREE. LensFlare | 不是光源，可為場景中的光源家鏡頭光暈效果 |
THREE. AmbientLight
顏色將應用到全局，將場景中所有物體渲染為相同顏色
THREE. SpotLight 光源來產生陰影
THREE. Color
| set(value) | 十六進制顏色值，可以是字符串，數值，THREE. Color |
| setHex(value) | 十六進制數字值 |
| setRGB(r, g, b) | RGB 值顏色，范圍 0~1 |
| setHSL(h, s, l) | HSL 值顏色，范圍 0~1 |
| setStyle(style) | css 顏色 |
| copy(color) | 復制顏色對象 |
| copyGammaToLinear(color) | 伽馬色彩轉換到線性色彩，內部使用 |
| copyLinearToGamma(color) | 線性色彩轉換到伽馬色彩，內部使用 |
| convertGammaToLinear(color) | 伽馬色彩轉換到線性色彩 |
| convertLinearToGammacolor) | 線性色彩轉換到伽馬色彩 |
| getHex() | 十六進制值 |
| getHexString() | 十六進制字符串 |
| getStyle() | css 顏色 |
| getHSL(optionalTarget) | HSL 顏色值 |
| offsetHSL(h, s, l) | 將 h, s, l 添加到當前顏色 h, s, l |
| add(color) | 將 r, g, b 添加到當前顏色 |
| addColors(color1, color2) | 內部使用，color1, color2 相加 |
| addScalar(s) | 內部使用，當前顏色 RGB 分量上 |
| multiply(color) | 內部使用，當前顏色與 THREE.color 對象的 RGB 值相乘 |
| multiplyScalar(s) | 內部使用，當前顏色與 RGB 值相乘 |
| lerp(color, alpha) | 內部使用，找出介于對象和顏色和提供顏色之間的顏色，alpha 定義當前顏色與提供顏色的差距 |
| lerp(color, alpha) | 內部使用，找出介于對象和顏色和提供顏色之間的顏色，alpha 定義當前顏色與提供顏色的差距 |
| equals(color) | THREE. Color 顏色對象的 RGB 值與當前值相等與否 |
| fromArray(array) | 與 setRGB 方法具有相同的功能，只是 RGB 值通過數字數組傳入 |
| toArray | 返回三元素組[r, g, b] |
| clone() | 復制當前顏色 |
THREE. PointLight
THREE. PointLight 從特定的一點向所有方向發射光線，點光源
| color(顏色) | 光源顏色 |
| distance(距離) | 光源照射的距離，默認 0，以為光的強度不會隨距離增加而減少 |
| intensity(強度) | 光源照射的強度, 默認 1 |
| position(位置) | 光源在場景中的位置 |
| visible(是否可見) | true 光源打開，false 光源關閉 |
THREE. SpotLight
從特定一點發射錐形光線，聚光燈光源
其他屬性同 THREE. PointLight
| angle(角度) | 光源發射出的光速寬度，單位弧度， 默認值 Math. PI/3 |
| caseShadow(投影) | 光源是否產生投影 |
| exponent(光強衰減指數) | 光線強度遞減的速度 |
| onlyShadow(僅陰影) | 光源只生成陰影，不會再場景中添加任何光照 |
| shadowBias(陰影偏移) | 偏置陰影的位置，默認 0 |
| shadowCameraFar(投影遠點) | 到距離光源光源那個位置可生成陰影，默認值為 5000 |
| shadowCameraFov(投影視場) | 用于生成陰影的視場有多大，默認值為 50 |
| shadowCameraNear(投影近點) | 到距離光源光源那個位置開始生成陰影，默認值為 50 |
| shadowCameraVisible(陰影方式可見) | 光源陰影設置可見與否 |
| shadowDarkness(陰影暗度) | 陰影渲染的暗度，在場景渲染后無法更改，默認 0.5 |
| shadowMapWidth, shadowMapHeight(陰影映射寬度和高度) | 決定有多少像素用來生成陰影，若陰影鋸齒狀或不光滑，增加此值，渲染后無法更改，默認 512 |
| target(目標) | 光源只想場景中的特定對象或位置 |
陰影使用可能遇到的問題
- 陰影模糊，增加shadowMapWidth 和shadowMapHeight，或保證用于計算陰影區域緊密包圍在對象周圍(shadowCameraNear,shadowCameraFar,shadowCameraFov)
- 產生陰影與接收陰影設置，光源生成陰影，幾何體是否接受或投射陰影castShadow 和 receiveShadow
- 薄對象渲染陰影時可能出現奇怪的渲染失真，可通過 shadowBias 輕微偏移陰影來修復
- 調整 shadowDarkness 來改變陰影的暗度
- 陰影更柔和，可在 THREE. WebGLRenderer 設置不同 shadowMapType。默認 THREE. PCFShadowMap, 柔和：PCFSoftShadowMap
THREE. DirectionalLisht
從而為平面發射光線，光線彼此平行，平行光源，光強是一樣的其他屬性同 SpotLight
//陰影區域 directionalLight.shadowCameraNear = 2; directionalLight.shadowCameraFar = 200; directionalLight.shadowCameraLeft = -50; directionalLight.shadowCameraRight = 50; directionalLight.shadowCameraTop = 50; directionalLight.shadowCameraBottom = -50;//創建更好的陰影效果 directionalLight.shadowCascade = true; //將陰影生成分裂，靠近攝像機十點會產生更具細節的陰影，遠離攝像機十點陰影的細節更少 directionalLight.shadowCascadeCount;shadowCascadeBias; shadowCascadeWidth; shadowCascadeHeight; shadowCascadeNearZ; shadowCascadeFarZ;THREE. HemisphereLight
戶外光照效果
var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6); hemiLight.position.set(0, 500, 0); scene.add(hemiLight);| groundColor | 從地面發出的光線顏色 |
| color | 從天空發出的光線顏色 |
| intensity | 光線照射強度 |
THREE. AreaLight
長方體的發光區域
使用 WebGLDeferredRenderer
THREE. LensFlare
鏡頭光暈
flare = new THREE.LensFlare(texture, size, distance, blending, color, opacity);
| texture(紋理) | 圖片紋理，用來決定光暈的形狀 |
| size(尺寸) | 光暈大小，單位像素，值-1，使用紋理本身的尺寸 |
| distance(距離) | 從光源 0 到攝像機 1 的距離，將鏡頭光暈防止在正確位置 |
| blending(混合) | 為光暈提供多種材質，混合材質，默認 THREE. AdditiveBlending |
| color(顏色) | 光暈顏色 |
2. 使用 Three.js 的材質
| MeshBasicMaterial(網格基礎材質) | 給幾何體賦予一種簡單顏色，可顯示幾何體線框 |
| MeshDepthMaterial(網格深度材質) | 從攝像機到網格的距離決定如何給網格上色 |
| MeshNormalMaterial(網格法向材質) | 根據法向量計算物體表面的顏色 |
| MeshFaceMaterial(網格面材質) | 容器，可為幾何體的各個表面指定不同的材質 |
| MeshLambertMaterial(網格 Lambert 材質) | 考慮光照影響，用于創建暗淡、不光亮的物體 |
| MeshPhongMaterial(網格 Phong 式材質) | 考慮光照影響，用于創建光亮的物體 |
| ShaderMaterial(著色器材質) | 允許自定義的著色器程序，直接控制頂點的繁殖方式和像素的著色方式，與 THREE. BufferedGeometry 一起使用 |
| LineBaseMaterial(直線基礎材質) | 用于 THREE. Line 幾何體，創建著色的直線 |
| LineDashMaterial(虛線材質) | 同上，允許創建出虛線效果 |
分類
- 基礎屬性：最常用，可控制物體的不透明度，是否可見以及被應用
- 融合屬性：每個物體都有一系列的融合屬性，決定物體與背景的融合
- 高級屬性：可控制底層 WebGL 上下午對象渲染物體的方式
基礎屬性 THREE. Material
| id(標識符) | 用來識別材質，并在材質創建時復制，第一個材質的值從 0 開始，每新增一個材質這個值加 1 |
| uuid(通用唯一識別碼) | 生成的唯一 ID, 內部使用 |
| name(名稱) | 給材質賦予名稱，用于調試的目的 |
| opacity(不透明度) | 定義物體的透明度，與 transparent 一起使用，范圍 0~1 |
| transparent(是否透明) | true: 使用指定的不透明度的渲染物體，false: 物體不透明只是著色更加明亮，若使用 alpha 通道的紋理，設置為 true |
| overdraw(過度描繪) | THREE. CanvasRender 時多邊形會被渲染得稍微大一點，設 true |
| visible(是否可見) | 材質是否可見，false 場景中不見該物體 |
| side(側面) | 幾何體的哪一面應用材質，默認 THREE. FrontSide（前面，外側）, THREE. BackSide（背面，內側）, THREE. DoubleSide(雙側) |
| needsUpdate(是否更新) | true: 更新材質屬性 |
混合屬性
| blending(融合) | 物體上材質與背景如何融合，一般融合模式 THREE. NormalBlending，只顯示材質上層 |
| blendsrc(融合源) | 自定義融合模式，物體（源），背景（目標），默認 THREE. SrcAlphaFactor，使用 alpha 透明度通道融合 |
| blenddst(融合目標) | 默認 THREE. OneMinusSrcAlphaFactor, 也是用透明度融合，值 1 |
| blendequation(融合公式) | 默認相加 AddEquation |
高級屬性
| depthTest | 可打開 GL_DEPTH_TEST 參數，控制是否使用像素深度來計算心像素值 |
| depthWrite | 內部屬性，用來決定材質是否影響 WebGL 深度緩存，二維貼圖時設 false |
| polygonOffset, polygonOffsetFactor, polygonOffsetUnits | 控制 WebGL 的 POLYGON_OFFSET_FILL 特性 |
| alphatest | 范圍 0~1，某個像素小于該值則不顯示，移除一些與透明度相關的毛邊 |
MeshBaseMaterial
var meshMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff });var meshMaterial = new MeshBasicMaterial(); material.color = new THREE.Color(0xff0000);| color(顏色) | 設置材質的顏色 |
| wireframe(線框) | 將材質渲染成線框 |
| wireframeLinewidth(線框線寬) | 線框中線的寬度 |
| wireframeLinecap(線框線段端點) | 可選 butt 平, round 圓, square 方，默認 round，WebGLRenderer 不支持 |
| wireframeLinejoin(線框線段連接點) | 同上 |
| shading(著色) | 可選 THREE. SmoothShading(默認), THREE. NoShading, THREE. FlatShading |
| vertexColors(頂點顏色) | 默認 THREE. NoColors, 設置后采用 THREE. Geometry 對象的 colors 屬性 CanvasRenderer 不起作用 |
| fog(霧化) | 是否受全局霧化效果影響 |
THREE. MeshDepthMaterial
| wireframe(線框) | 是否顯示線框 |
| wireframeLinewidth(線框線寬) | 線框中線的寬度 |
聯合材質
var cubeMaterial = new THREE.MeshDepthMaterial(); var colorMaterial = new THREE.MeshBasicMaterial({color: controls.color,transparent: true, //blending: THREE.MultiplyBlending, //混合模式，與背景相互作用 }); var cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, [colorMaterial,cubeMaterial, ]); cube.children[1].scale.set(0.99, 0.99, 0.99); //避免畫面閃爍THREE. MeshNormalMaterial
使用 THREE. ArrowHelper 添加法向量
for (var f = 0, fl = sphere.geometry.faces.length; f < fl; f++) {var face = sphere.geometry.faces[f];var centroid = new THREE.Vector3(0, 0, 0);centroid.add(sphere.geometry.vertices[face.a]);centroid.add(sphere.geometry.vertices[face.b]);centroid.add(sphere.geometry.vertices[face.c]);centroid.divideScalar(3);var arrow = new THREE.ArrowHelper(face.normal, centroid, 2, 0x3333ff, 0.5, 0.5);sphere.add(arrow); }| wireframe(線框) | 是否顯示線框 |
| wireframeLinewidth(線框線寬) | 線框中線的寬度 |
| shading | 設置著色方法，THREE. FlatShading 平面著色, THREE. SmoothShadding 平滑著色 |
THREE. MeshFaceMaterial
材質容器，允許集合體的每個面指定不同的材質
var mats = []; mats.push(new THREE.MeshBasicMaterial({color: 0x009e60 })); mats.push(new THREE.MeshBasicMaterial({color: 0x009e60 })); mats.push(new THREE.MeshBasicMaterial({color: 0x0051ba })); mats.push(new THREE.MeshBasicMaterial({color: 0x0051ba })); mats.push(new THREE.MeshBasicMaterial({color: 0xffd500 })); mats.push(new THREE.MeshBasicMaterial({color: 0xffd500 })); mats.push(new THREE.MeshBasicMaterial({color: 0xff5800 })); mats.push(new THREE.MeshBasicMaterial({color: 0xff5800 })); mats.push(new THREE.MeshBasicMaterial({color: 0xc41e3a })); mats.push(new THREE.MeshBasicMaterial({color: 0xc41e3a })); mats.push(new THREE.MeshBasicMaterial({color: 0xffffff })); mats.push(new THREE.MeshBasicMaterial({color: 0xffffff }));var faceMaterial = new THREE.MeshFaceMaterial(mats);//魔方 for (var x = 0; x < 3; x++) {for (var y = 0; y < 3; y++) {for (var z = 0; z < 3; z++) {var cubeGeom = new THREE.BoxGeometry(2.9, 2.9, 2.9);var cube = new THREE.Mesh(cubeGeom, faceMaterial);cube.position.set(x * 3 - 3, y * 3, z * 3 - 3);group.add(cube);}} }THREE. MeshPhongMaterial
創建光亮材質，屬性與暗淡材質 THREE. MeshLambertMaterial 基本屬性一樣
| ambient | 環境色，顏色與環境色相乘，默認白色 |
| emissive | 材質發射的顏色，默認黑色，不收其他光照影響的顏色 |
| specular | 指定材質光亮程度及高光部分的顏色，設為與color相同顏色，類似金屬材質，設為灰色grey則更像塑料 |
| shininess | 鏡面高光部分的亮度，默認值30 |
| metal | true金屬效果，效果微弱 |
| wrapAround | true啟用辦lambert光照技術，光下降更微妙，網格粗糙黑暗地區瑩陰影柔和且分布更加均勻 |
| wrapRGB | true可使用THREE. Vector3控制光下降的速度 |
THREE. ShaderMaterial 創建自己的著色器
著色器可講Three.js中的JavaScript網格轉換為屏幕上的像素，可指定對象如何渲染，如何覆蓋或修改Three.js庫中的默認值
| wireframe | 是否顯示線框 |
| wireframeLinewidth | 線框中線的寬度 |
| shading | 設置著色方法，THREE. FlatShading 平面著色, THREE. SmoothShadding 平滑著色 |
| vertexColors | 給每個頂點定義不同的顏色，對CanvasRenderer不起作用，對WebGLRenderer起作用 |
| fog | 是否受全局無話效果影響 |
| fragmentShader | 定義的每個傳入像素的顏色（必傳） |
| vertexShader | 允許你修改傳入的定點位置（必傳） |
| uniforms | 可想你的著色器發信息，同樣的信息會發送給每一個頂點和片段 |
| defines | 轉換成#define代碼片段，這些片段可以設置著著色程序里的額外全局變量 |
| attributes | 可修改每個頂點和片段，用來傳遞每個位置數據和法向量相關的數據 |
| lights | 定義光照數據是否傳遞給著色器，默認false |
-
vertexShader：它會在幾何體的每個頂點上執行，可用這個著色器改變頂點的位置來對集合體進行變換
-
fragmentShader: 它會在集合體的每一個片段上執行，在VertexShader里，會返回這個特定片段應該顯示的顏色
THREE. LineBaseMaterial
用于線段的基礎材質
| color | 線的顏色，指定vertexColors該屬性會被忽略 |
| linewidth | 線的寬度 |
| linecap | 線段端點，可選只butt(平)，round(圓)，square(方)，默認round |
| linejoin | 線段連接，可選只butt(平)，round(圓)，square(方)，默認round |
| vertexColor | 每個頂點指定一種顏色 |
| fog | 當前材質是否受全局無話效果影響 |
THREE. LineDashMaterial
屬性與THREE. LineBaseMaterial一樣，可指定虛線與空白間隙的長度來創建出虛線效果
| scale | 放縮dashSize和gapSize |
| dashSize | 虛線長度 |
| gapSize | 虛線間隔寬度 |
總結
以上是生活随笔為你收集整理的Three开发笔记(二)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python 修改pdf_Python
- 下一篇： （笔记） RN React Native