使用three.js可以方便的讓我們在網(wǎng)頁中做出各種不同的3D效果。如果希望2D繪圖內容，建議使用canvas來進行。但很多小伙伴不清楚到底如何為我們繪制和導入的圖形添加陰影效果，更是不清楚到底如何導入我們已經(jīng)制作好的3dmax資源。所以這篇教程將簡要介紹如何將我們用3dmax制作好的資源導入進來，以及如何為我們導入的資源，包括所有自己繪制的圖形添加陰影。也有很多小伙伴表示根本記不住這些八股文一般的代碼。其實，每次需要編寫代碼的時候參考官方案例即可，不必背誦代碼。如果編的多，那自然就記住了。如果編的少，我們也沒有必要付出大把時間背誦這些我們很少使用的代碼。
首先，先介紹如何導入3dmax的資源。這里注意，經(jīng)過我自己的測試，如果直接從本地打開文件的方式打開編寫的網(wǎng)頁，谷歌、IE等瀏覽器將無法顯示我們自己加載的資源，原因是由于本地打開文件后是file協(xié)議，所以瀏覽器會因為安全性問題阻止我們加載本地資源。而火狐瀏覽器卻可以正常打開。所以建議大家調試時使用火狐瀏覽器，或者使用tomcat、apache等先建立一個本地服務器，通過域名來訪問自己編寫的網(wǎng)頁。不推薦修改瀏覽器的安全性設置。
我們先用3dmax制作一個圖形，這里選擇其自帶的茶壺。用3dmax制作茶壺的教程網(wǎng)上實在太多，所以這里不再贅述，請不會的小伙伴搜索教程即可，幾步即可搞定。
當然，制作好了之后不要忘記導出。我們需要將其導出成為一個mtl文件和一個obj文件。這一步操作大多制作茶壺的教程也都有，同樣是點點鼠標就行。至于材質等，我們這里不多考慮，畢竟學習要從簡單開始。
導出如上圖的兩個文件之后，我們就可以參考官方的代碼導入我們自己的素材了。
首先，我們除了three.js文件之外，還需要引入個三源文件。一個是OBJLoader.js，一個是MTLLoader.js,一個是DDSLoader.js。這些是官方提供的加載我們本地資源的庫文件，可以從官網(wǎng)下載。https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_obj_mtl.html 這個網(wǎng)址既是官方案例。我們需要的文件也可以在這里下載到。
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉無線電——不安全的藍牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現(xiàn)JSON轉Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應用分析 2017-07-26
- 集合結合數(shù)據(jù)結構來看看(二) 2017-07-26
學習是年輕人改變自己的最好方式