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

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

1、啟動Tridiv建模

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

2、加載基本形狀

確?！癊ditor”被選中，然后點擊工具欄上4個基本形狀：立方體、圓柱體、棱柱或金字塔，選擇需要的基本形狀加載到編輯器。

3、修改基本形狀

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

4、設置顏色和透明度

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

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

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

6、設計復雜的對象

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

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

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

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

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