Soumettre la recherche
Mettre en ligne
Three.js 一場從2D變成3D的冒險
•
Télécharger en tant que PPTX, PDF
•
12 j'aime
•
9,463 vues
智遠 成
Suivre
Lire moins
Lire la suite
Formation
Signaler
Partager
Signaler
Partager
1 sur 42
Télécharger maintenant
Recommandé
Acrhitecture deisign pattern_MVC_MVP_MVVM
Acrhitecture deisign pattern_MVC_MVP_MVVM
Dong-Ho Lee
Introduction to three.js
Introduction to three.js
yuxiang21
Intro to Three.js
Intro to Three.js
Kentucky JavaScript Users Group
NEXT.JS
NEXT.JS
Binumon Joseph
AR-VR Workshop
AR-VR Workshop
Mark Billinghurst
Domain-Driven-Design 정복기 1탄
Domain-Driven-Design 정복기 1탄
Suhyeon Jo
TF에서 팀 빌딩까지 9개월의 기록 : 성장하는 조직을 만드는 여정
TF에서 팀 빌딩까지 9개월의 기록 : 성장하는 조직을 만드는 여정
Seongyun Byeon
Build Immersive Worlds in Virtual Reality
Build Immersive Worlds in Virtual Reality
Unity Technologies
Recommandé
Acrhitecture deisign pattern_MVC_MVP_MVVM
Acrhitecture deisign pattern_MVC_MVP_MVVM
Dong-Ho Lee
Introduction to three.js
Introduction to three.js
yuxiang21
Intro to Three.js
Intro to Three.js
Kentucky JavaScript Users Group
NEXT.JS
NEXT.JS
Binumon Joseph
AR-VR Workshop
AR-VR Workshop
Mark Billinghurst
Domain-Driven-Design 정복기 1탄
Domain-Driven-Design 정복기 1탄
Suhyeon Jo
TF에서 팀 빌딩까지 9개월의 기록 : 성장하는 조직을 만드는 여정
TF에서 팀 빌딩까지 9개월의 기록 : 성장하는 조직을 만드는 여정
Seongyun Byeon
Build Immersive Worlds in Virtual Reality
Build Immersive Worlds in Virtual Reality
Unity Technologies
Component based models and technology
Component based models and technology
Saransh Garg
Natural Interfaces for Augmented Reality
Natural Interfaces for Augmented Reality
Mark Billinghurst
Mobile Browser Internal (Blink Rendering Engine)
Mobile Browser Internal (Blink Rendering Engine)
Hyungwook Lee
COMP 4010 - Lecture4 VR Technology - Visual and Haptic Displays
COMP 4010 - Lecture4 VR Technology - Visual and Haptic Displays
Mark Billinghurst
Android application model
Android application model
magicshui
Decoding Svelte and SvelteKit: Unveiling the Key Distinctions
Decoding Svelte and SvelteKit: Unveiling the Key Distinctions
Tien Nguyen
MOBILITY X DATA : 모빌리티 산업의 도전 과제
MOBILITY X DATA : 모빌리티 산업의 도전 과제
Seongyun Byeon
AUGMENTED REALITY Documentation
AUGMENTED REALITY Documentation
Venu Gopal
An Introduction to Vuejs
An Introduction to Vuejs
Paddy Lock
Augmented reality intro for mobile apps
Augmented reality intro for mobile apps
Heather Downing
Computer Vision Introduction
Computer Vision Introduction
Camera Culture Group, MIT Media Lab
萩の月問題 - 第14回 #日曜数学会
萩の月問題 - 第14回 #日曜数学会
Junpei Tsuji
Augmented reality ppt
Augmented reality ppt
Sourav Rout
Augmented reality
Augmented reality
Rishabh Srivastava
COMP 4010 - Lecture 5: Interaction Design for Virtual Reality
COMP 4010 - Lecture 5: Interaction Design for Virtual Reality
Mark Billinghurst
Computer vision
Computer vision
Shiva Krishna Chandra Shekar
Virtual reality
Virtual reality
Amit Sinha
Comp4010 Lecture8 Introduction to VR
Comp4010 Lecture8 Introduction to VR
Mark Billinghurst
Real Time Eye Blinking and Yawning Detection
Real Time Eye Blinking and Yawning Detection
ijtsrd
NoSQL 위에서 MMORPG 개발하기
NoSQL 위에서 MMORPG 개발하기
Hoyoung Choi
Contenu connexe
Tendances
Component based models and technology
Component based models and technology
Saransh Garg
Natural Interfaces for Augmented Reality
Natural Interfaces for Augmented Reality
Mark Billinghurst
Mobile Browser Internal (Blink Rendering Engine)
Mobile Browser Internal (Blink Rendering Engine)
Hyungwook Lee
COMP 4010 - Lecture4 VR Technology - Visual and Haptic Displays
COMP 4010 - Lecture4 VR Technology - Visual and Haptic Displays
Mark Billinghurst
Android application model
Android application model
magicshui
Decoding Svelte and SvelteKit: Unveiling the Key Distinctions
Decoding Svelte and SvelteKit: Unveiling the Key Distinctions
Tien Nguyen
MOBILITY X DATA : 모빌리티 산업의 도전 과제
MOBILITY X DATA : 모빌리티 산업의 도전 과제
Seongyun Byeon
AUGMENTED REALITY Documentation
AUGMENTED REALITY Documentation
Venu Gopal
An Introduction to Vuejs
An Introduction to Vuejs
Paddy Lock
Augmented reality intro for mobile apps
Augmented reality intro for mobile apps
Heather Downing
Computer Vision Introduction
Computer Vision Introduction
Camera Culture Group, MIT Media Lab
萩の月問題 - 第14回 #日曜数学会
萩の月問題 - 第14回 #日曜数学会
Junpei Tsuji
Augmented reality ppt
Augmented reality ppt
Sourav Rout
Augmented reality
Augmented reality
Rishabh Srivastava
COMP 4010 - Lecture 5: Interaction Design for Virtual Reality
COMP 4010 - Lecture 5: Interaction Design for Virtual Reality
Mark Billinghurst
Computer vision
Computer vision
Shiva Krishna Chandra Shekar
Virtual reality
Virtual reality
Amit Sinha
Comp4010 Lecture8 Introduction to VR
Comp4010 Lecture8 Introduction to VR
Mark Billinghurst
Real Time Eye Blinking and Yawning Detection
Real Time Eye Blinking and Yawning Detection
ijtsrd
NoSQL 위에서 MMORPG 개발하기
NoSQL 위에서 MMORPG 개발하기
Hoyoung Choi
Tendances
(20)
Component based models and technology
Component based models and technology
Natural Interfaces for Augmented Reality
Natural Interfaces for Augmented Reality
Mobile Browser Internal (Blink Rendering Engine)
Mobile Browser Internal (Blink Rendering Engine)
COMP 4010 - Lecture4 VR Technology - Visual and Haptic Displays
COMP 4010 - Lecture4 VR Technology - Visual and Haptic Displays
Android application model
Android application model
Decoding Svelte and SvelteKit: Unveiling the Key Distinctions
Decoding Svelte and SvelteKit: Unveiling the Key Distinctions
MOBILITY X DATA : 모빌리티 산업의 도전 과제
MOBILITY X DATA : 모빌리티 산업의 도전 과제
AUGMENTED REALITY Documentation
AUGMENTED REALITY Documentation
An Introduction to Vuejs
An Introduction to Vuejs
Augmented reality intro for mobile apps
Augmented reality intro for mobile apps
Computer Vision Introduction
Computer Vision Introduction
萩の月問題 - 第14回 #日曜数学会
萩の月問題 - 第14回 #日曜数学会
Augmented reality ppt
Augmented reality ppt
Augmented reality
Augmented reality
COMP 4010 - Lecture 5: Interaction Design for Virtual Reality
COMP 4010 - Lecture 5: Interaction Design for Virtual Reality
Computer vision
Computer vision
Virtual reality
Virtual reality
Comp4010 Lecture8 Introduction to VR
Comp4010 Lecture8 Introduction to VR
Real Time Eye Blinking and Yawning Detection
Real Time Eye Blinking and Yawning Detection
NoSQL 위에서 MMORPG 개발하기
NoSQL 위에서 MMORPG 개발하기
Three.js 一場從2D變成3D的冒險
1.
Three.js 一場從2D變成3D的冒險
2.
成 智 遠
mike 米蘭營銷策劃股份有限公司 互動設計師 Mail : a3804430@hotmail.com
3.
什麼是Three.js
4.
three.js是JavaScript編寫的WebGL第三方庫。提供了非常多的3D 顯示功能。 Three.js 是一款運行在瀏覽器中的3D
引擎,你可以用它 創建各種三維場景,包括了攝影機、光影、材質等各種對象。
5.
開發工具介紹
6.
一樣還是 Sublime text
3 外掛 Three.js Autocomplete
7.
在寫three.js前你所要了解 三維世界是怎麼一回事!!! 不然你會死得很難看…
8.
座標 場景 物件 環境光 聚光 材質 貼圖攝影機 算圖引擎 格式
9.
用3D軟體操作講解3維世界!!! 只看ppt會很難懂,所以沒聽到的就自行上網查資料吧…
10.
終於可以講到code的部分了XD 基本知識都具備了,開始動手寫吧!!!
11.
我們來說說開發流程
12.
1.場景 2.物件 5.算圖引擎 材質 貼圖 3.燈光 環境光 聚光 6.算圖 4.攝影機
13.
引入three.js的lib
14.
先來創建一個場景
15.
建立物件級材質貼圖
16.
建立燈光
17.
建立攝影機
18.
建立算圖引擎
19.
算圖
20.
完整的code
21.
成功啦~我們創造了一個cube
22.
基本的3D物件可以透過three.js的內 建方法創建,像是方塊、圓形、平面 等等,但是如果要在複雜一點的就可 能需要在專業的3D軟體製作完成後再 匯入three.js中
23.
接下來我們來匯入 外部的3D模型
24.
Three.js讀取的模型副檔名 為.obj,貼圖則是.mtl
25.
我們從官方下載來的整包 lib裡面其實有許多額外的 擴充功能…
26.
在這包js裡面有許多你有需要才要 引入的功能 three.js-masterexamplesjs
27.
我們在這找到這3支js然後引入
28.
引入外部模型
29.
new THREE.OBJLoader(); 加載進來的3D模型是不帶材質的 new THREE.OBJMTLLoader() 加載進來的3D模型是可以添加材質的
30.
然後稍微修改一下render的方式
31.
這是一個不斷對算圖更新的方法, 當畫面有進行任何更動時可以不斷 更新!!! window.requestAnimationFrame();
32.
如果發現模型變成全黑的,還出現以下錯誤訊息
33.
請檢查你的.mtl的貼圖路徑對不對!!!
34.
可以成功看到模型被載入,還有了貼圖
35.
接下來我要跟畫面產生互動!!!
36.
我們剛剛載入的js包裡面有一個 OrbitControls.js 找到載入,它是一個對攝影機產生滑鼠 的互動方法,只要簡單幾行code就可以 達到簡單的互動
37.
路徑在此,載入!!!
38.
使用它的方法 記得new它得時候要把攝影機(camera)帶入 然後對render()監聽change事件
39.
看!我可以用滑鼠改變它的角度了
40.
其實也沒這麼難啦~~~
41.
Q&A時間
42.
謝謝大家
Télécharger maintenant