iT邦幫忙

2022 iThome 鐵人賽

DAY 3
0
Modern Web

Three.js 的學習筆記系列 第 3

[Day 3] Three.js 的安裝

  • 分享至 

  • xImage
  •  

尋日寫錯咗今日先第三日

首先,我的電腦配置:
11th Gen Intel(R) Core(TM) i5-1135G7
16GB Ram
512 GB Hard Disk
Microsoft Windows 10 Home
Code Editor: Visual Studio Code https://code.visualstudio.com/
Git: https://git-scm.com/download/win

今次我會介紹嘅安裝方法有兩個

  1. 用terminal去安裝
  2. 從three.js.org 下載安裝

1)官方網頁terminal安裝方法:
https://threejs.org/docs/index.html#manual/en/introduction/Installation

In Visual Studio Code
https://ithelp.ithome.com.tw/upload/images/20220914/201289755xSUn0YUqj.jpg

輸入:

git clone https://github.com/designcourse/threejs-webpack-starter.git ThreeJS-Git-Material

https://ithelp.ithome.com.tw/upload/images/20220914/20128975AS6n1PB5pN.jpg

https://ithelp.ithome.com.tw/upload/images/20220914/20128975OqJ75vg2sN.jpg

如果出現上面問題就是因為沒有安裝Git
https://ithelp.ithome.com.tw/upload/images/20220914/20128975iwGnsHIeDX.jpg

正常安裝你會見到, 這就代表成功安裝
輸入:

cd ThreeJS-Git-Material

之後輸入:

npm i

https://ithelp.ithome.com.tw/upload/images/20220914/20128975aljXhAOYkH.jpg

就會見到安裝成功!
你可以輸入: npm run dev 來測試
https://ithelp.ithome.com.tw/upload/images/20220914/20128975F2XYT8PbPj.jpg

https://ithelp.ithome.com.tw/upload/images/20220914/20128975tbiLYIR9KX.jpg

2)從threejs.org 下載安裝
https://threejs.org/

https://ithelp.ithome.com.tw/upload/images/20220914/20128975tmtltht97r.jpg

Download 落嚟會係一個zip file, extract file
https://ithelp.ithome.com.tw/upload/images/20220914/20128975cFZ1ljQhV2.jpg

從build file copy three.min.js 去你programm嘅folder
https://ithelp.ithome.com.tw/upload/images/20220914/20128975jskdZMm4PX.jpg

https://ithelp.ithome.com.tw/upload/images/20220914/201289753JA6klZLs5.jpg

https://ithelp.ithome.com.tw/upload/images/20220914/20128975yoUmvI36BO.jpg

開index.html in Chrome, 按F12, click Console
https://ithelp.ithome.com.tw/upload/images/20220914/20128975vMp3nsGf9i.jpg

就會見到 script.js, three.min.js 運行中
”THREE” 就是three.min.js 中的其中一個Object, 當你喺console 按 object就會見到詳細嘅parameter
這樣就是代表成功安裝
第三日完!


上一篇
[Day 3] Three.js 四個重要元素
下一篇
[Day 4] Three.js 外傳(1) ...... Webpack 安裝
系列文
Three.js 的學習筆記12
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言