為網(wǎng)站添加3D元素

通過(guò)Tridiv我們可以創(chuàng)建3D標(biāo)志或者3D飛船等其他的3D元素，然后只需要簡(jiǎn)單地在網(wǎng)頁(yè)上插入一個(gè)代碼，即可將3D元素添加到自己的網(wǎng)站或者博客上。

按照本文的方法為網(wǎng)站添加3D元素，我們需要支持Webkit技術(shù)的瀏覽器。這包括Google的Chrome瀏覽器、蘋(píng)果公司的Safari瀏覽器、Opera和微軟集成在Windows 10的Edge瀏覽器。朱利安·卡尼爾開(kāi)發(fā)的Web服務(wù)Tridiv可以為這些瀏覽器提供一個(gè)3D元素的設(shè)計(jì)界面，通過(guò)這個(gè)界面，簡(jiǎn)單的操作即可創(chuàng)建復(fù)雜的3D對(duì)象加上漂亮的紋理，再將它們加入到自己的網(wǎng)站或者博客之中。加入的方式可以通過(guò)iFrame或縮短的Web地址來(lái)完成，Tridiv也可以提供HTML和完整的CSS代碼。我們可以根據(jù)自己的需要更改或添加其他的功能。在步驟1至步驟5，我們會(huì)向大家介紹Tridiv的基本操作，步驟6和步驟7是3D對(duì)象的優(yōu)化方法，最后則是將3D對(duì)象加入到網(wǎng)站的步驟。

1、啟動(dòng)Tridiv建模

打開(kāi)網(wǎng)站tridiv.com，要啟動(dòng)一個(gè)新的空白項(xiàng)目，點(diǎn)擊“Start using the app”或者選擇“Examples”中3個(gè)樣本中的一個(gè)。如果選擇之后沒(méi)有看到任何變化或者畫(huà)面扭曲，那么這意味著瀏覽器可能不支持WebKit技術(shù)。請(qǐng)確認(rèn)是否使用了上面介紹的幾種瀏覽器之一，如果是則可以嘗試更新瀏覽器，使用最新版本的瀏覽器進(jìn)行操作。

2、加載基本形狀

確保“Editor”被選中，然后點(diǎn)擊工具欄上4個(gè)基本形狀：立方體、圓柱體、棱柱或金字塔，選擇需要的基本形狀加載到編輯器。

3、修改基本形狀

現(xiàn)在我們可以看到基本形狀的小圓圈上有多個(gè)不同的圖標(biāo)，點(diǎn)擊物體，通過(guò)這些小圖標(biāo)，我們可以旋轉(zhuǎn)基本形狀的底座，改變大小，復(fù)制或從編輯器中刪除物體。

4、設(shè)置顏色和透明度

使用滑塊右側(cè)的“Opacity”，我們可以改變物體的透明度，設(shè)置為“0”使物體完全透明，設(shè)置為“1”將清除透明度。正下方是“Colors”按鈕，使用此按鈕可以指定物體各個(gè)側(cè)面的顏色。要選擇特定點(diǎn)顏色，我們必須采用16進(jìn)制顏色代碼，可以通過(guò)www.html-color-codes.info確定顏色代碼。

5、紋理環(huán)繞對(duì)象

如果要將圖像作為紋理粘貼在物體上，那么我們需要先將它上傳到自己的網(wǎng)站或者博客上，然后在Tridiv上點(diǎn)擊“images”并輸入所上傳圖片的URL。接下來(lái)，我們可以選擇是整個(gè)物體還是僅部分應(yīng)該覆蓋指定的紋理。

6、設(shè)計(jì)復(fù)雜的對(duì)象

現(xiàn)在我們可以根據(jù)自己的需要添加其他基本形狀，將它們移動(dòng)到合適的位置并調(diào)整顏色和紋理。利用這種簡(jiǎn)單的方式可以設(shè)計(jì)出各種3D對(duì)象，無(wú)論是簡(jiǎn)單的公司標(biāo)志還是星球大戰(zhàn)飛船這樣的復(fù)雜對(duì)象都沒(méi)有問(wèn)題。

7、優(yōu)化光設(shè)置和CSS代碼

構(gòu)建3D對(duì)象之后，轉(zhuǎn)到“Preview”。在這里我們可以在靜態(tài)或動(dòng)態(tài)的光源之間進(jìn)行選擇，可以調(diào)整光的亮度和改變背景顏色。由于動(dòng)態(tài)光的計(jì)算是非常復(fù)雜的，所以我們建議對(duì)星球大戰(zhàn)飛船之類(lèi)的復(fù)雜3D模型使用靜態(tài)光源。處理過(guò)程中，我們偶爾會(huì)看到Tridiv警告信息。除了完成物體的設(shè)計(jì)之外，Tridiv還將顯示最終的代碼。如果要更改或查看該代碼，則可以點(diǎn)擊“Edit on CodePen”，我們會(huì)被帶到一個(gè)新的網(wǎng)站，該網(wǎng)站會(huì)顯示HTML和CSS代碼以及我們?cè)O(shè)計(jì)的3D對(duì)象。如果出現(xiàn)的3D對(duì)象與Tridiv上顯示的不同，那么可以點(diǎn)擊“Settings”，轉(zhuǎn)到標(biāo)簽“CSS”并激活下一個(gè)對(duì)話(huà)框中的選項(xiàng)“AutoPrefixer”，點(diǎn)擊“Close”確認(rèn)關(guān)閉設(shè)置對(duì)話(huà)框。現(xiàn)在我們應(yīng)該能夠看到3D對(duì)象可以正確顯示了，并可以開(kāi)始按照自己的需要優(yōu)化代碼，完成后點(diǎn)擊“Save”存儲(chǔ)即可。

8、添加3D對(duì)象到網(wǎng)站上

切換回Tridiv的頁(yè)面，在“Preview”視圖中我們有兩種方式可以將3D對(duì)象加入到自己的網(wǎng)站或者博客上，點(diǎn)擊“Short URL”可以將3D對(duì)象保存到Tridiv并獲得一個(gè)該對(duì)象的Web地址，點(diǎn)擊“Embed”可以將3D對(duì)象作為一個(gè)iFrame，只需拷貝Tridiv提供的代碼并將其粘貼到網(wǎng)站或者博客上的適當(dāng)位置，即可將3D對(duì)象嵌入自己的網(wǎng)站。