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