運用ThreeJS 貼圖材質特性，將電影平面海報視覺3D 化

運用ThreeJS 貼圖材質特性，將電影Godzilla vs Kong 電影平面海報視覺3D 化. ... three.js javascript css ... ThreeJs教學影片(範例靈感來源). 當您輸入電子信箱、訂閱本公司之「電子報」時，我們會向您蒐集、處理、利用的個資為您的「電子信箱」以及「提交日期」，當您輸入電子信箱並送出時，即表示您同意我們使用您的個資，為保障您的權益，關於更多相關政策更新資訊，請務必閱讀我們的「隱私權政策」、「使用條款」及「免責聲明」。

如您不同意本網站之「隱私權政策」、「使用條款」及「免責聲明」，您可以隨時「取消訂閱」，謝謝您。

關閉 取消訂閱昕力資訊電子報 取消訂閱 關閉 關閉 是否確定取消註冊？將會永久刪除您在本站的帳號與資訊。

確定 取消 公告系統 × 目前無公告 首頁 網頁技術 javascript 運用ThreeJS貼圖材質特性，將電影平面海報視覺3D化 three.js javascript css 運用ThreeJS貼圖材質特性，將電影平面海報視覺3D化 黃育繡YuhsiuHuang 2021/05/1210:20:28 0 1179 ThreeJS簡介 ThreeJS是一套基於WebGL開發出的Javascript函式庫，讓網頁3D的開發者能在各瀏覽器中建立3D場景、動畫。

  基本元素要素 場景Scene、相機Camera、燈光Light、幾何結構Geometry、材質Material、渲染Renderer   相機透視觀念 透視相機(perspectiveProjection)畫面有遠近感，遠的物體比較小，近的比較大，符合現實人眼睛觀看的視角。

正交投影相機(OrthographicProjection) 畫面沒有遠近差異，全部物體看起來都在同樣的距離上。

  範例 SeethePenThreeJsexamplebyRachelHuang(@sky0956168023)onCodePen. ThreeJS其實是主要製作出3D互動畫面，但因為手邊沒3D模型。

剛好最近看到電影主題，覺得很適合運用ThreeJS貼圖材質特性與滑鼠移動來呈現偽3D效果。

  安裝 使用npm安裝threeJs與dat.gui  import'./style.css' import*asTHREEfrom'three' import*asdatfrom'dat.gui'   設置相機 PerspectiveCamera(fov,aspect,near,far) /** *Camera */ constcamera=newTHREE.PerspectiveCamera(75,sizes.width/sizes.height,0.1,100) camera.position.x=0 camera.position.y=0 camera.position.z=3 //z數值越大，相機越遠 scene.add(camera)   匯入圖片 運用TextureLoader引入圖片 //Textureloader constloader=newTHREE.TextureLoader(); constkingKong=loader.load('/img_kong.png') constkingKong_grey=loader.load('/img_kong_grey.png') constkingKong_alpha=loader.load('/img_kong_grey.png') constgodzilla=loader.load('/img_godzilla.png') constgodzilla_grey=loader.load('/img_godzilla_grey.png') constgodzilla_alpha=loader.load('/img_godzilla_grey.png') constbg=loader.load('/scene.png')   輔助 畫面右上角，方面一邊看畫面一邊調整數值 //Debug constgui=newdat.GUI()   宣告畫布 //Canvas constcanvas=document.querySelector('canvas.webgl')   設定場景並設定背景圖 //Scene constscene=newTHREE.Scene() scene.background=bg;   主角設置效果 產生一張幾何平面給予寬高。

PlaneBufferGeometry(width,height,widthSegments,heightSegments)   接下來是讓平面圖產生立體效果： displacement使用黑白圖像作為模型的凹凸貼圖 AlphaMap 運用色彩灰階來表現透明度，黑色完全透明，白色反之。

  以下兩張圖，可以看出金剛的凹凸感與背景的融合度的差異   除了這些設定，還可至官網參考更多詳細介紹。

//Objectskingkong constgeometry=newTHREE.PlaneBufferGeometry(3.5,4,64,64); //Materialskingkong constmaterial=newTHREE.MeshStandardMaterial({ color:'grey',//灰階 map:kingKong,//貼圖，顏色由color調節 displacementMap:kingKong_grey,//凹凸材質 displacementScale:.3,//材質凹凸數值設定 alphaMap:kingKong_alpha,//透明度設定 transparent:true//是否將幾何物件以外變成透明 }) //Objectsgodzilla constgeometry_god=newTHREE.PlaneBufferGeometry(5,3.5,80,40); //Materialsgodzilla constmaterial_god=newTHREE.MeshStandardMaterial({ color:'grey', map:godzilla, displacementMap:godzilla_grey, displacementScale:.3, alphaMap:godzilla_alpha, transparent:true })   接下來將加主角加到場景裡，並設定位置 //Mesh constplane=newTHREE.Mesh(geometry,material) constplane_god=newTHREE.Mesh(geometry_god,material_god) scene.add(plane) scene.add(plane_god) plane.position.x=1.8 plane.position.y=-0.2 plane.rotation.x=0 plane.rotation.y=0.2 plane_god.position.x=-2.8 plane_god.position.y=-0.6   利用滑鼠移動，增加一些互動效果 /** *mouseMove */ document.addEventListener('mousemove',mouseMove) letmouseX=0; letmouseY=0; functionmouseMove(event){ mouseX=event.clientX mouseY=event.clientY }   最後透過requestAnimationFrame()週期性的調用render方法將畫面渲染出。

consttick=()=> { plane.rotation.y=mouseX*0.00003 plane.rotation.x=mouseY*0.00003 plane_god.rotation.x=mouseY*0.00003 plane_god.rotation.y=mouseX*0.00003 //Render renderer.render(scene,camera) //Calltickagainonthenextframe window.requestAnimationFrame(tick) } tick()     結語 ThreeJs具備輕量函式庫的特性，可以運用在網頁需要3D的商品或場景上，像是小遊戲、品牌官網、強烈的視覺網站，等等。

它的優點就是對WebGL進行了良好的封裝，簡化了WebGL與 Javascript之間的溝通與操作。

巧妙的運用ThreeJs不僅讓網頁視覺風格明確，更能加深瀏覽者的深刻印象。

以下提供一些應用的場景範例： 品牌官網： https://fremtidensuddannelser.dk/en https://voiceofracism.co.nz 小遊戲範例： https://tympanus.net/Tutorials/TheAviator/ https://paperplanes.world/   圖片出處 GodzillavsKong 背景圖   參考資料 ThreeJs官網 ThreeJs教學影片(範例靈感來源)       0 點數申請 文章標題 : 運用ThreeJS貼圖材質特性，將電影平面海報視覺3D化 申請項目 : 檔案上傳 請選擇審查人員 暫存 確認 黃育繡YuhsiuHuang 相關文章 Async/awaithell Javascript的深淺拷貝 零延遲setTimeout(fn,0)的應用 JavaScript可選鏈運算符(?.)與空值合併運算符(??)介紹 javascriptES5之後實用語法 運用ThreeJS貼圖材質特性，將電影平面海報視覺3D化 最新文章 [讀懂]深入淺出Beanutils的不足與自定義 AngularCustomModal-共用元件實作-彈窗(3) AngularCustomModal-共用元件實作-彈窗(2) AngularCustomModal-共用元件實作-彈窗(1) AOS-Animate套件運用 Activiti事件監聽入門 最熱門文章 同作者文章 確定 取消 × 登入