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