three.js 的渲染結(jié)構(gòu)
概述
- three.js 封裝了場景、燈光、陰影、材質(zhì)、紋理和三維算法，不必在直接用WebGL 開發(fā)項目，但有的時候會間接用到WebGL，比如自定義著色器。
- three.js 在渲染三維場景時，需要創(chuàng)建很多對象，并將它們關聯(lián)在一起。
- 下圖便是一個基本的three.js 渲染結(jié)構(gòu)
- Renderer 渲染器
- Renderer 是three.js 的主要對象。當你將一個場景Scene 和一個攝像機Camera 傳遞到渲染器的渲染方法中，渲染器便會將攝像機視椎體中的三維場景渲染成一個二維圖像顯示在canvas 畫布中。
- Scene 場景對象
- 場景對象是樹狀結(jié)構(gòu)的，其中包含了三維對象Object3D 和燈光對象Light；
- Object3D 是可以被直接渲染出來的，Object3D是網(wǎng)格對象Mesh和集合對象Group的基類；
- 場景對象可以定義場景的背景色和霧效；
- 在場景對象的樹狀結(jié)構(gòu)中，每個對象的變換信息都是相對的。比如汽車和汽車里的人，人的位置是相對于汽車而言的，當汽車移動了，人的本地坐標位坐標位雖然不變，但其視界坐標位已經(jīng)變了
- Camera 相機對象
- 按理說，相機對象是在場景里的，但是相機對象不在它所看的場景里，這就像我們自己看不見自己的眼睛一樣。因此，相機對象可以獨立于場景之外；
- 相機對象是可以作為其它三維對象的子對象的，這樣相機就會隨其父對象同步變換。
- Mesh 網(wǎng)格對象
- 網(wǎng)格對象由幾何體Geometry和材質(zhì)Material兩部分組成，Geometry 負責塑形，Material 負責著色；
- Geometry 和Materia 是可以被多個Mesh 對象復用的。比如要繪制兩個一模一樣的立方體，那只需要實例化兩個Mesh 即可，Geometry 和Materia可以使用一套。
- Geometry 幾何體對象
- 幾何體對象負責塑形，存儲了與頂點相關的數(shù)據(jù)，比如頂點點位、頂點索引、uv坐標等；
- three.js 中內(nèi)置了許多基本幾何體，也可以自定義幾何體，或者從外部的模型文件里加載幾何體。
- Material 材質(zhì)對象
- 材質(zhì)對象負責著色，繪制幾何體的表面屬性，比如漫反射、鏡面反射、光澤度、凹凸等；
- 材質(zhì)對象的許多屬性都可以用紋理貼圖表示，比如漫反射貼圖、凹凸貼圖等。
- Texture 紋理對象
- 紋理對象就是一張圖像。紋理圖像的圖像源可以是Image 圖片、canvas 畫布、Video 視頻等。
- Light 光源對象
- Light 對象不像Object3D 那樣依托于頂點，它更多的是像Object3D 里的材質(zhì)Material 那樣，作用于物體的樣式。
- Light 對象可以理解為在為幾何體添加了材質(zhì)后，再利用光效配合材質(zhì)對幾何體的樣式進行二次加工。
文章來源地址http://www.zghlxwxcb.cn/news/detail-678978.html
文章來源：http://www.zghlxwxcb.cn/news/detail-678978.html
到了這里，關于three.js(三)：three.js的渲染結(jié)構(gòu)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
