資訊專欄INFORMATION COLUMN
摘要：但后來發(fā)現(xiàn)，并不是陰影失效了，應(yīng)該是它導(dǎo)致了上面提到的陰影攝像機(jī)的范圍發(fā)生了變化
本來以為不就設(shè)一個(gè)陰影嘛，網(wǎng)上這么多文章，隨便看一篇就知道怎么設(shè)置了，然而我卻花了整整一天才讓陰影出現(xiàn)...
很多博主說，在threeJS中要讓陰影顯示，只要滿足以下幾個(gè)基本條件。
渲染器開啟陰影渲染：renderer.shadowMapEnabled = true;
燈光需要開啟“引起陰影”：light.castShadow = true;
物體需要開啟“引起陰影”和“接收陰影”：mesh.castShadow = mesh.receiveShadow = true;
然而，沒學(xué)webGL直接擼THREE的初學(xué)者（我）有時(shí)候卻怎么都弄不出陰影，摸索了一天之后才發(fā)現(xiàn)，原來除了以上基本條件，還有很多其它的條件...少有博主把這些高級(jí)條件一次性列完，不過這位博主列出的則足夠全面，但是所用的threeJS版本過舊
以下列出我遇到過的情況：
馬賽克陰影在點(diǎn)光源下的陰影都是馬賽克，開啟
renderer.shadowMapType=THREE.PCFSoftShadowMap;
可有效減少馬賽克，但不如用平行光的陰影完美。好在很少用點(diǎn)光源，晚一點(diǎn)再摸索一下
對(duì)于平行光，還需要設(shè)置 light.shadow.camera 下的這6個(gè)屬性：near、far、left、right、top、bottom。使陰影在這6個(gè)面描述的范圍內(nèi)才能顯示，否則可能只顯示一部分或者不顯示陰影，如下圖
可以試試不設(shè)置這6個(gè)值，打印一下它們分別的默認(rèn)值，特別??！物體挪遠(yuǎn)一點(diǎn)就沒有陰影了。
要說明這6個(gè)屬性，還要先說light.shadow.camera，這是一個(gè)正交攝像機(jī)(OrthographicCamera)，與光源同一位置和朝向。這6個(gè)值一起設(shè)置了這個(gè)攝像機(jī)的可視區(qū)域，只有在可視區(qū)域內(nèi)的物體才能產(chǎn)生投影與被投影。這6個(gè)值的說明在threeJS文檔的正交相機(jī)就有
題外話，最近玩手游吃雞，里面的陰影離人物遠(yuǎn)的地方是不會(huì)顯示的，只會(huì)顯示人物附近10米內(nèi)的陰影，估計(jì)就是這6個(gè)值設(shè)置的了吧。并不是所有燈光都能引起陰影
這4種可以：DirectionalLight、PointLight、RectAreaLight、SpotLight
并不是所有材質(zhì)都可以接收引起陰影我也沒全部試過，試過可以的有：MeshLambertMaterial
不能把光源的position設(shè)為單位向量如：light.position.set(-40, 60, -10).normalize()
添加光源的時(shí)候一般都會(huì)給光源設(shè)置一個(gè)位置，但是如果順手把這個(gè)位置設(shè)成單位向量了，那會(huì)出現(xiàn)怪異的問題：平行光下，有的物體能投陰影，有的球體卻不行，當(dāng)時(shí)思考了很久怎么回事。但后來發(fā)現(xiàn)，并不是陰影失效了，應(yīng)該是它導(dǎo)致了上面提到的陰影攝像機(jī)的范圍發(fā)生了變化
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/95540.html
摘要：今天做項(xiàng)目的時(shí)候發(fā)現(xiàn)中模型投影與的投影有一點(diǎn)不同，寫個(gè)文章記錄一下，防止忘記，也希望能夠幫到大家如果對(duì)你的問題產(chǎn)生了幫助，就請(qǐng)點(diǎn)個(gè)贊吧原理模型投影的方法是通過遍歷中的元素，并給他們?cè)O(shè)置和核心代碼創(chuàng)建模型的完整代碼生成汽車模型這種方式?jīng)]有 今天做項(xiàng)目的時(shí)候發(fā)現(xiàn)threejs中.obj模型投影與geometry的投影有一點(diǎn)不同，寫個(gè)文章記錄一下，防止忘記，也希望能夠幫到大家！如果對(duì)你的問題...
摘要：對(duì)于自身不能發(fā)光的物體，需要給場景添加光源從而達(dá)到可視的效果。中渲染陰影的開銷比較大，所以默認(rèn)物體是沒有陰影的，需要單獨(dú)開啟。主要用于檢測動(dòng)畫運(yùn)行時(shí)的幀數(shù)，可以顯示表示每秒多少幀和每幀多少毫秒，越大越好，但太大會(huì)影響性能，一般為左右。 一、WebGL 與 three.js WebGL（Web Graphics Library）是一種3D繪圖協(xié)議，它允許把JavaScript和OpenG...
摘要：我們還需要在粒子超出效果展示區(qū)域時(shí)，把粒子重新賦予一個(gè)初始位置這樣，飄花瓣的效果，就完成了代碼下載鏈接密碼 showImg(https://segmentfault.com/img/bVKwfR?w=329&h=565); 粒子動(dòng)畫在ThreeJs可以用幾種方式實(shí)現(xiàn)本次樣例使用Sprite類來構(gòu)建粒子 官方對(duì)Sprite類的解釋 Sprite A sprite is a plane t...
摘要：我們還需要在粒子超出效果展示區(qū)域時(shí)，把粒子重新賦予一個(gè)初始位置這樣，飄花瓣的效果，就完成了代碼下載鏈接密碼 showImg(https://segmentfault.com/img/bVKwfR?w=329&h=565); 粒子動(dòng)畫在ThreeJs可以用幾種方式實(shí)現(xiàn)本次樣例使用Sprite類來構(gòu)建粒子 官方對(duì)Sprite類的解釋 Sprite A sprite is a plane t...
閱讀 1093·2021-11-22 13:52
閱讀 1001·2019-08-30 15:44
閱讀 621·2019-08-30 15:43
閱讀 2488·2019-08-30 12:52
閱讀 3532·2019-08-29 16:16
閱讀 711·2019-08-29 13:05
閱讀 2997·2019-08-26 18:36
閱讀 2075·2019-08-26 13:46
