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