天天看點

Three.js學習2_場景相關

  部分内容展示:

Three.js學習2_場景相關

    

Three.js學習2_場景相關

  場景相關内容, 下文将一一解釋

構造器Scene(),

屬性:

fog

overrideMaterial

autoUpdate

background

方法

toJSON

dispose

  構造一個場景, let scene = new THREE.Scene()

  該屬性表示線性霧, 就和實際生活中類似, 距離越遠, 可視度越低

Three.js學習2_場景相關

  效果如上圖所示

  用于覆寫場景中所有物體的材質, 關于材質在後續會講到.

  這裡簡單講解下物體, 每個物體由兩部分組成, 一個是幾何結構, 一個是用于展示的材質, 

  代碼及效果如下:  

Three.js學習2_場景相關

         

Three.js學習2_場景相關

  解釋: 

  3-7行建立材質, 10行場景覆寫所有材質, 12行建立正方體, 13-16行建立材質, 建立帶材質的正方體

  邏輯: 首先建立一個帶有材質的正方體, 如上左圖  ---->  10行語句直接将該正方體材質換成場景要求的, 如上右圖

  預設值為true,若設定了這個值,則渲染器會檢查每一幀是否需要更新場景及其中物體的矩陣。 當設為false時,你必須親自手動維護場景中的矩陣。還未使用過

  設定場景的背景, 可以是顔色, 照片, 或者是六個面組成的天空盒, 看起來就和真實環境十分類似

Three.js學習2_場景相關

       

Three.js學習2_場景相關

          更改背景顔色                          更改背景照片

  2行, 更改背景顔色, 3行更改背景圖檔

  傳回目前流行的JSON資料

  傳回結果

Three.js學習2_場景相關

  清除WebGLRenderer内部所緩存的場景相關的資料。

  

希望讀者在看完後能提出意見, 點個贊, 鼓勵一下, 我們一起進步. 加油 !!

繼續閱讀