iT邦幫忙

2024 iThome 鐵人賽

DAY 29
0
自我挑戰組

初階網頁學習與製作系列 第 29

Day-29 A-Frame (7) 光環的材質 💍

  • 分享至 

  • xImage
  •  

今天的程式碼主要新增了第二個具有金屬光澤的旋轉圓環,讓場景更加豐富且具視覺效果。

首先,原有的無光澤圓環保留在畫面中,並繼續保持其粗糙且無光澤的外觀,通過將 metalness 設為 0、roughness 設為 1,使圓環的表面呈現出粗糙的質感,並且持續繞著 Y 軸旋轉。

新增的部分是一個具有金屬光澤的圓環。這個圓環的材質屬性與無光澤的圓環不同,通過將 metalness 設為 1 和 roughness 設為 0,使其表面變得光滑且反光,模擬出像金屬一樣的效果。這個金屬圓環的位置設置為比無光澤圓環更遠的位置( position="3 1 -5" ),避免它們彼此重疊。此外,這個金屬圓環的旋轉動畫也是反向進行的,繞著Y軸反向旋轉,與無光澤圓環形成對比。
新增程式碼:
https://ithelp.ithome.com.tw/upload/images/20241013/20169460vttx1YVPW0.png

執行結果:
https://ithelp.ithome.com.tw/upload/images/20241013/20169460EuObSFhXNY.png
https://ithelp.ithome.com.tw/upload/images/20241013/20169460jn9yC08wcn.png
今日Github連結:
https://github.com/HUIYUK/iron-race/blob/main/day%2029_Aframe.html
參考資料:
https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame#conclusion


上一篇
Day-28 A-Frame (6) 天使光環+旋轉 👼
下一篇
Day-30 完賽~~🎉
系列文
初階網頁學習與製作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言