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