為網站添加3D元素

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

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

1、啟動Tridiv建模

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

2、加載基本形狀

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

3、修改基本形狀

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

4、設置顏色和透明度

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

5、紋理環繞對象

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

6、設計復雜的對象

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

7、優化光設置和CSS代碼

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

8、添加3D對象到網站上

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