Enviar pesquisa
Carregar
Three.js 一場從2D變成3D的冒險
•
Transferir como PPTX, PDF
•
12 gostaram
•
9,463 visualizações
智遠 成
Seguir
Leia menos
Leia mais
Educação
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 42
Baixar agora
Recomendados
Reflections on XR & AI in Education - iLRN Opening Keynote Kent Bye
Reflections on XR & AI in Education - iLRN Opening Keynote Kent Bye
Kent Bye
5分でわかる Unity点群
5分でわかる Unity点群
UnityTechnologiesJapan002
Joseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about Architecture
Hironori Washizaki
Deferred decal
Deferred decal
민웅 이
Three.js
Three.js
Wonjun Hwang
유인호, <드래곤하운드>비주얼이펙트 연출, NDC2019
유인호, <드래곤하운드>비주얼이펙트 연출, NDC2019
devCAT Studio, NEXON
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
アジャイル品質のパターンとメトリクス Agile Quality Patterns and Metrics (QA2AQ) 20240225
アジャイル品質のパターンとメトリクス Agile Quality Patterns and Metrics (QA2AQ) 20240225
Hironori Washizaki
Recomendados
Reflections on XR & AI in Education - iLRN Opening Keynote Kent Bye
Reflections on XR & AI in Education - iLRN Opening Keynote Kent Bye
Kent Bye
5分でわかる Unity点群
5分でわかる Unity点群
UnityTechnologiesJapan002
Joseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about Architecture
Hironori Washizaki
Deferred decal
Deferred decal
민웅 이
Three.js
Three.js
Wonjun Hwang
유인호, <드래곤하운드>비주얼이펙트 연출, NDC2019
유인호, <드래곤하운드>비주얼이펙트 연출, NDC2019
devCAT Studio, NEXON
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
アジャイル品質のパターンとメトリクス Agile Quality Patterns and Metrics (QA2AQ) 20240225
アジャイル品質のパターンとメトリクス Agile Quality Patterns and Metrics (QA2AQ) 20240225
Hironori Washizaki
20220810_JDLA合格者の会_CDLE_LT_06.pdf
20220810_JDLA合格者の会_CDLE_LT_06.pdf
Akihiro ITO
Vulkan 1.0 Quick Reference
Vulkan 1.0 Quick Reference
The Khronos Group Inc.
빠른 렌더링을 위한 오브젝트 제외 기술
빠른 렌더링을 위한 오브젝트 제외 기술
YEONG-CHEON YOU
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
Ken Morishita
[1023 박민수] 깊이_버퍼_그림자_1
[1023 박민수] 깊이_버퍼_그림자_1
MoonLightMS
Holy smoke! Faster Particle Rendering using Direct Compute by Gareth Thomas
Holy smoke! Faster Particle Rendering using Direct Compute by Gareth Thomas
AMD Developer Central
전형규, Vertex Post-Processing Framework, NDC2011
전형규, Vertex Post-Processing Framework, NDC2011
devCAT Studio, NEXON
Deferred shading
Deferred shading
Frank Chao
OpenCVで作るスタンプAR
OpenCVで作るスタンプAR
Takashi Yoshinaga
Computer Graphics - Lecture 01 - 3D Programming I
Computer Graphics - Lecture 01 - 3D Programming I
💻 Anton Gerdelan
AR Foundation: Merging AR Platforms
AR Foundation: Merging AR Platforms
Matteo Baraldi
UI아트 작업자를 위한 언리얼엔진4 UMG #1
UI아트 작업자를 위한 언리얼엔진4 UMG #1
Hong-Gi Joe
유니티 그래픽 최적화, 어디까지 해봤니 (Optimizing Unity Graphics) Unite Seoul Ver.
유니티 그래픽 최적화, 어디까지 해봤니 (Optimizing Unity Graphics) Unite Seoul Ver.
ozlael ozlael
Web App Platform Strategy
Web App Platform Strategy
dynamis
C++20에서 리플렉션 기능 구현
C++20에서 리플렉션 기능 구현
Bongseok Cho
Direct3D 12 Summary
Direct3D 12 Summary
shobomaru
知らないと損するアプリ開発におけるStateMachineの活用法(full版)
知らないと損するアプリ開発におけるStateMachineの活用法(full版)
Ken Morishita
Realidad virtual
Realidad virtual
Dayana Narvaez
Developing and optimizing a procedural game: The Elder Scrolls Blades- Unite ...
Developing and optimizing a procedural game: The Elder Scrolls Blades- Unite ...
Unity Technologies
Hierachical z Map Occlusion Culling
Hierachical z Map Occlusion Culling
YEONG-CHEON YOU
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
jakepaige317
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书
jakepaige317
Mais conteúdo relacionado
Mais procurados
20220810_JDLA合格者の会_CDLE_LT_06.pdf
20220810_JDLA合格者の会_CDLE_LT_06.pdf
Akihiro ITO
Vulkan 1.0 Quick Reference
Vulkan 1.0 Quick Reference
The Khronos Group Inc.
빠른 렌더링을 위한 오브젝트 제외 기술
빠른 렌더링을 위한 오브젝트 제외 기술
YEONG-CHEON YOU
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
Ken Morishita
[1023 박민수] 깊이_버퍼_그림자_1
[1023 박민수] 깊이_버퍼_그림자_1
MoonLightMS
Holy smoke! Faster Particle Rendering using Direct Compute by Gareth Thomas
Holy smoke! Faster Particle Rendering using Direct Compute by Gareth Thomas
AMD Developer Central
전형규, Vertex Post-Processing Framework, NDC2011
전형규, Vertex Post-Processing Framework, NDC2011
devCAT Studio, NEXON
Deferred shading
Deferred shading
Frank Chao
OpenCVで作るスタンプAR
OpenCVで作るスタンプAR
Takashi Yoshinaga
Computer Graphics - Lecture 01 - 3D Programming I
Computer Graphics - Lecture 01 - 3D Programming I
💻 Anton Gerdelan
AR Foundation: Merging AR Platforms
AR Foundation: Merging AR Platforms
Matteo Baraldi
UI아트 작업자를 위한 언리얼엔진4 UMG #1
UI아트 작업자를 위한 언리얼엔진4 UMG #1
Hong-Gi Joe
유니티 그래픽 최적화, 어디까지 해봤니 (Optimizing Unity Graphics) Unite Seoul Ver.
유니티 그래픽 최적화, 어디까지 해봤니 (Optimizing Unity Graphics) Unite Seoul Ver.
ozlael ozlael
Web App Platform Strategy
Web App Platform Strategy
dynamis
C++20에서 리플렉션 기능 구현
C++20에서 리플렉션 기능 구현
Bongseok Cho
Direct3D 12 Summary
Direct3D 12 Summary
shobomaru
知らないと損するアプリ開発におけるStateMachineの活用法(full版)
知らないと損するアプリ開発におけるStateMachineの活用法(full版)
Ken Morishita
Realidad virtual
Realidad virtual
Dayana Narvaez
Developing and optimizing a procedural game: The Elder Scrolls Blades- Unite ...
Developing and optimizing a procedural game: The Elder Scrolls Blades- Unite ...
Unity Technologies
Hierachical z Map Occlusion Culling
Hierachical z Map Occlusion Culling
YEONG-CHEON YOU
Mais procurados
(20)
20220810_JDLA合格者の会_CDLE_LT_06.pdf
20220810_JDLA合格者の会_CDLE_LT_06.pdf
Vulkan 1.0 Quick Reference
Vulkan 1.0 Quick Reference
빠른 렌더링을 위한 오브젝트 제외 기술
빠른 렌더링을 위한 오브젝트 제외 기술
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
iOS/Androidアプリエンジニアが理解すべき「Model」の振る舞い
[1023 박민수] 깊이_버퍼_그림자_1
[1023 박민수] 깊이_버퍼_그림자_1
Holy smoke! Faster Particle Rendering using Direct Compute by Gareth Thomas
Holy smoke! Faster Particle Rendering using Direct Compute by Gareth Thomas
전형규, Vertex Post-Processing Framework, NDC2011
전형규, Vertex Post-Processing Framework, NDC2011
Deferred shading
Deferred shading
OpenCVで作るスタンプAR
OpenCVで作るスタンプAR
Computer Graphics - Lecture 01 - 3D Programming I
Computer Graphics - Lecture 01 - 3D Programming I
AR Foundation: Merging AR Platforms
AR Foundation: Merging AR Platforms
UI아트 작업자를 위한 언리얼엔진4 UMG #1
UI아트 작업자를 위한 언리얼엔진4 UMG #1
유니티 그래픽 최적화, 어디까지 해봤니 (Optimizing Unity Graphics) Unite Seoul Ver.
유니티 그래픽 최적화, 어디까지 해봤니 (Optimizing Unity Graphics) Unite Seoul Ver.
Web App Platform Strategy
Web App Platform Strategy
C++20에서 리플렉션 기능 구현
C++20에서 리플렉션 기능 구현
Direct3D 12 Summary
Direct3D 12 Summary
知らないと損するアプリ開発におけるStateMachineの活用法(full版)
知らないと損するアプリ開発におけるStateMachineの活用法(full版)
Realidad virtual
Realidad virtual
Developing and optimizing a procedural game: The Elder Scrolls Blades- Unite ...
Developing and optimizing a procedural game: The Elder Scrolls Blades- Unite ...
Hierachical z Map Occlusion Culling
Hierachical z Map Occlusion Culling
Último
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
jakepaige317
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书
jakepaige317
educ6506presentationtc3302771-240427173057-06a46de5.pptx
educ6506presentationtc3302771-240427173057-06a46de5.pptx
mekosin001123
EDUC6506_ClassPresentation_TC330277 (1).pptx
EDUC6506_ClassPresentation_TC330277 (1).pptx
mekosin001123
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
黑客 接单【TG/微信qoqoqdqd】
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
mekosin001123
Último
(6)
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书
educ6506presentationtc3302771-240427173057-06a46de5.pptx
educ6506presentationtc3302771-240427173057-06a46de5.pptx
EDUC6506_ClassPresentation_TC330277 (1).pptx
EDUC6506_ClassPresentation_TC330277 (1).pptx
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
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.
謝謝大家
Baixar agora