threeJS中，那些會讓陰影失效的操作

CKJOKER 發布于2019-08-22 18:08 / 2521人閱讀

摘要：但后來發現，并不是陰影失效了，應該是它導致了上面提到的陰影攝像機的范圍發生了變化

本來以為不就設一個陰影嘛，網上這么多文章，隨便看一篇就知道怎么設置了，然而我卻花了整整一天才讓陰影出現...

很多博主說，在threeJS中要讓陰影顯示，只要滿足以下幾個基本條件。

渲染器開啟陰影渲染：renderer.shadowMapEnabled = true;

燈光需要開啟“引起陰影”：light.castShadow = true;

物體需要開啟“引起陰影”和“接收陰影”：mesh.castShadow = mesh.receiveShadow = true;

然而，沒學webGL直接擼THREE的初學者（我）有時候卻怎么都弄不出陰影，摸索了一天之后才發現，原來除了以上基本條件，還有很多其它的條件...少有博主把這些高級條件一次性列完，不過這位博主列出的則足夠全面，但是所用的threeJS版本過舊

以下列出我遇到過的情況：

馬賽克陰影

在點光源下的陰影都是馬賽克，開啟
renderer.shadowMapType=THREE.PCFSoftShadowMap;
可有效減少馬賽克，但不如用平行光的陰影完美。好在很少用點光源，晚一點再摸索一下

平行光

對于平行光，還需要設置 light.shadow.camera 下的這6個屬性：near、far、left、right、top、bottom。使陰影在這6個面描述的范圍內才能顯示，否則可能只顯示一部分或者不顯示陰影，如下圖

可以試試不設置這6個值，打印一下它們分別的默認值，特別小！物體挪遠一點就沒有陰影了。

要說明這6個屬性，還要先說light.shadow.camera，這是一個正交攝像機(OrthographicCamera)，與光源同一位置和朝向。這6個值一起設置了這個攝像機的可視區域，只有在可視區域內的物體才能產生投影與被投影。這6個值的說明在threeJS文檔的正交相機就有

題外話，最近玩手游吃雞，里面的陰影離人物遠的地方是不會顯示的，只會顯示人物附近10米內的陰影，估計就是這6個值設置的了吧。

并不是所有燈光都能引起陰影

這4種可以：DirectionalLight、PointLight、RectAreaLight、SpotLight

并不是所有材質都可以接收引起陰影

我也沒全部試過，試過可以的有：MeshLambertMaterial

不能把光源的position設為單位向量

如：light.position.set(-40, 60, -10).normalize()
添加光源的時候一般都會給光源設置一個位置，但是如果順手把這個位置設成單位向量了，那會出現怪異的問題：平行光下，有的物體能投陰影，有的球體卻不行，當時思考了很久怎么回事。但后來發現，并不是陰影失效了，應該是它導致了上面提到的陰影攝像機的范圍發生了變化

GPU云服務器云服務器服務器操作系統有那些服務器操作系統由那些進程關于JAVA中順序IO的基本操作會讓

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95540.html

Threejs之 .obj 模型投影

摘要：今天做項目的時候發現中模型投影與的投影有一點不同，寫個文章記錄一下，防止忘記，也希望能夠幫到大家如果對你的問題產生了幫助，就請點個贊吧原理模型投影的方法是通過遍歷中的元素，并給他們設置和核心代碼創建模型的完整代碼生成汽車模型這種方式沒有今天做項目的時候發現threejs中.obj模型投影與geometry的投影有一點不同，寫個文章記錄一下，防止忘記，也希望能夠幫到大家！如果對你的問題...

xavier 2019-08-26 10:15 評論0 收藏0
three.js 簡介

摘要：對于自身不能發光的物體，需要給場景添加光源從而達到可視的效果。中渲染陰影的開銷比較大，所以默認物體是沒有陰影的，需要單獨開啟。主要用于檢測動畫運行時的幀數，可以顯示表示每秒多少幀和每幀多少毫秒，越大越好，但太大會影響性能，一般為左右。一、WebGL 與 three.js WebGL（Web Graphics Library）是一種3D繪圖協議，它允許把JavaScript和OpenG...

yankeys 2019-08-22 15:14 評論0 收藏0
H5實例教學--ThreeJs 實現粒子動畫飄花效果

摘要：我們還需要在粒子超出效果展示區域時，把粒子重新賦予一個初始位置這樣，飄花瓣的效果，就完成了代碼下載鏈接密碼 showImg(https://segmentfault.com/img/bVKwfR?w=329&h=565); 粒子動畫在ThreeJs可以用幾種方式實現本次樣例使用Sprite類來構建粒子官方對Sprite類的解釋 Sprite A sprite is a plane t...

Andrman 2019-08-21 11:37 評論0 收藏0
H5實例教學--ThreeJs 實現粒子動畫飄花效果

摘要：我們還需要在粒子超出效果展示區域時，把粒子重新賦予一個初始位置這樣，飄花瓣的效果，就完成了代碼下載鏈接密碼 showImg(https://segmentfault.com/img/bVKwfR?w=329&h=565); 粒子動畫在ThreeJs可以用幾種方式實現本次樣例使用Sprite類來構建粒子官方對Sprite類的解釋 Sprite A sprite is a plane t...

GitCafe 2019-08-01 16:28 評論0 收藏0