資訊專欄INFORMATION COLUMN
摘要：另外如果想要在程序中開啟陰影的話首先需要把設置為，默認是關閉的，因為實現陰影的效果是比較消耗性能的。此時的陰影效果是這樣的至此，我們的場景還有物體的動畫效果就已經實現。
實現物體的旋轉、跳動以及場景陰影的開啟與優化
本程序將創建一個場景，并實現物體的動畫效果
運行的結果如圖：
完整代碼如下：
Three.js
其中OrbitControls.js和dat.gui.min.js這兩個文件都是Three.js自帶的兩個很好用的工具，第一個是可以讓攝像機有軌道地進行移動，而不用再自己寫函數去實現，第二個是一個輕量級的圖形用戶界面庫（GUI 組件），使用這個庫可以很容易地創建出能夠改變代碼變量的界面組件，方便我們測試程序。
另外如果想要在程序中開啟陰影的話首先需要把renderer.shadowMapEnabled設置為true，默認是關閉的，因為實現陰影的效果是比較消耗性能的。同時要把light的投擲陰影開啟light.castShadow = true，但是并不是所有的燈光都可以開啟，比如環境光就不可以。每一個需要產生陰影的物體也要開啟陰影，我們需要用地面來接收陰影，所以也需要開啟地面的接收陰影
plane.receiveShadow = true；
cube.castShadow = true;
sphere.castShadow = true;
可以看到，陰影是比較難看的，所以設置一些陰影的類型，PCFSoftShadowMap能讓邊緣柔和，但只是基于像素顆粒的邊緣柔和。我們可以先使用此類型，然后再提高陰影的分辨率light.shadowMapWidth = 8192;
light.shadowMapHeight = 8192;
默認的值應該是1024。
此時的陰影效果是這樣的
至此，我們的場景還有物體的動畫效果就已經實現。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103812.html
摘要：對于自身不能發光的物體，需要給場景添加光源從而達到可視的效果。中渲染陰影的開銷比較大，所以默認物體是沒有陰影的，需要單獨開啟。主要用于檢測動畫運行時的幀數，可以顯示表示每秒多少幀和每幀多少毫秒，越大越好，但太大會影響性能，一般為左右。 一、WebGL 與 three.js WebGL（Web Graphics Library）是一種3D繪圖協議，它允許把JavaScript和OpenG...
摘要：上帝覺得缺少了些生氣，便用泥巴捏了一個小人兒，不叫亞當，她叫小芳。接下來預先恭喜你，你可以成為這網頁世界的一個小上帝。使用可以向場景中發射光線。在下述案例中，從攝像機的位置向場景中鼠標的點擊位置發射光線。 先得擺出幾個關鍵詞：場景、燈光、模型、材質、貼圖與紋理、相機、渲染器。然后我開始裝模作樣地解釋： 上帝說，要有場景！于是就有了場景，場景去納這萬事萬物。 上帝說，要有光！于是就有了光...
摘要：上帝覺得缺少了些生氣，便用泥巴捏了一個小人兒，不叫亞當，她叫小芳。接下來預先恭喜你，你可以成為這網頁世界的一個小上帝。使用可以向場景中發射光線。在下述案例中，從攝像機的位置向場景中鼠標的點擊位置發射光線。 先得擺出幾個關鍵詞：場景、燈光、模型、材質、貼圖與紋理、相機、渲染器。然后我開始裝模作樣地解釋： 上帝說，要有場景！于是就有了場景，場景去納這萬事萬物。 上帝說，要有光！于是就有了光...
摘要：環境光的位置對呈現的效果無任何效果環境光的構造函數只有一個參數進制的顏色值。半球光點光源點光源的光線來自同一點，并向外發射。點光源的構造函數有三個參數，比平行光多了一個距離參數，光會從光源經過的距離一路衰減為。 Lightapi 光源的基類。 Light( color, intensity ) color 光源顏色的RGB數值 intensity 光源強度的數值。 看到的顏色 使...
閱讀 1329·2021-11-15 11:37
閱讀 2214·2021-09-23 11:21
閱讀 1300·2019-08-30 15:55
閱讀 2105·2019-08-30 15:55
閱讀 2815·2019-08-30 15:52
閱讀 2819·2019-08-30 11:12
閱讀 1573·2019-08-29 18:45
閱讀 1885·2019-08-29 14:04
