Release date:2017, July 30

Duration:02 h 51 m

Author:Engin Arslan

Skill level:Intermediate

Language:English

Exercise files:Yes

About this video WebGL is a low-level JavaScript API that enables creation and display of 3D content inside the browser using the GPU. Three.js is a high-level library that is built on top of WebGL. With the inevitable rise of VR and AR, 3D is bound to become a larger part of our lives and three.js makes creation of this content very easy. You need to run a simple server for local development purposes when working with Three.js to be able to load assets from your hard drive into the browser. Python offers a very simple way of starting up a server. You could also use third-party solutions like live-server, which automatically refreshes the browser when the sourced files change.

Transcript – [Narrator] WebGL is a low level JavaScript API…that enables creation and display of 3D content…inside the browser using the GPU.…It’s supported by every modem browser out there,…except for some older versions of IE and Android browser.…Unfortunately, since WebGL is a low-level API,…it can be a bit hard and tedious to use.…You need to write hundreds of lines of codes…to even perform even the simplest tasks.…Three.js on the other hand is an open-source JavaScript…library that abstracts away the complexity of WebGL…and allows us to create real-time 3D content…in a much easier manner.…

In this course, we will be learning…about this amazing technology.…Three.js have been around for a while…and have a great support and community behind it.…Visiting the Three.js website, you can check out the links…on the main page and see the amazing body of work…created using this library.…I will just quickly show you three of my favorites.…Here is a 3D data visualization…that displays the global oil imports and exports…for various countries.…

Table of Contents

0. Introduction

Welcome 55s

What you should know 35s

Using the exercise files 58s

1. Building a Simple scene

Introduction to three.js 2m 12s

Set up the environment 2m 37s

Scene essentials 5m 17s

Populate the scene 7m 42s

Create a ground plane 5m 27s

2. Three.js Scene Object

Three.js objects 1m 56s

requestAnimationFrameQ function 2m 22s

Other Object3D properties 5m 14s

Adding fog to the scene 3m 22s

3. Lights

Lighting in threejs 2m 23s

Light types 5m 25s

dat.GUI 2m 55s

Orbit controls 2m 31s

Shadows 1m 21s

Add more objects to the scene 2m 37s

SpotLight 4m 37s

DirectionalLight 4m 11s

AmbientLight 2m 37s

RectArea Light 52s

4. Animation

Random() function 2m 16s

Math.sin() and Math.cos() 4m 56s

Add noise 1m 38s

Camera 2m 14s

Animation rig 6m 19s

Animation rig, part 2 10m 35s

Tween.js 8m 13s

5. Materials and Textures

MeshBasicMaterial 1m 33s

MeshLambertMaterial and MeshPhongMaterial 4m 2s

MeshStandardMaterial 2m 27s

Texture maps 6m 27s

Roughness maps 3m 10s

Environment maps 4m 24s

6. Geometries

Primitive geometries 2 m 59s

Manipulating vertices 6m 5s

External geometries 4m 35s

7. Particles

Creating a particle system 7m 46s

Animating the particle system 6m 14s

Particle system from geometry 3m 28s

Stats.js 2m 10s

8. Post-processingng

Post-processing 1m 12s

EffectComposer 7m 48s

Other shaders 1m 25s

Conclusion Next steps 1m 53s

01. Welcome 02. What you Should Know 03. Using the Exercise Files 04. Introduction to Three js 05. Set Up the Environment 06. Scene Essentials 07. Populate the Scene 08. Create a Ground Plane 09. three js Objectives 10. RequestAnimationFrane Function 11. Other Object3D Properties 12. Adding Fog to the Scene 13. Lighting in Three js 14. Light Types 15. dat GUI 16. Orbit Controls 17. Shadows 18. Add MoreObjects to the Scene 19. SpotLight 20. Directional Light 21. Ambient Light 22. Rect Area Light 23. Random Function 24. Math Sin and Math Cos 25. Add Noise 26. Camera 27. Animation Rig 28. Animation Rig 2 29. Tween js 30. Mesh Basic material 31. Mesh Lambert Material and Mesh Phone Material 32. Mesh Standard Material 33. Texture Maps 34. Roughness Maps 35. Environment maps 36. Primitve Geometries 37. Manipulating Vertices 38. External Geometries 39. Creating Particle System 40. Animating the Particle System 41. Particle System from Geometry 42. Stats js 43. Post Processing 44. Effect Composer 45. Other Shaders 46. Next Steps Ex_Files_3D_Graphics_Web_ThreeJS.zip

  Channel    and      Group

下载说明：用户需登录后获取相关资源
1、登录后，打赏30元成为VIP会员，全站资源免费获取！
2、资源默认为百度网盘链接，请用浏览器打开输入提取码不要有多余空格，如无法获取 请联系微信 yunqiaonet 补发。
3、分卷压缩包资源 需全部下载后解压第一个压缩包即可，下载过程不要强制中断 建议用winrar解压或360解压缩软件解压！
4、云桥网络平台所发布资源仅供用户自学自用，用户需以学习为目的，按需下载，严禁批量采集搬运共享资源等行为，望知悉！！！
5、云桥网络-CG数字艺术学习与资源分享平台，感谢您的赞赏与支持！平台所收取打赏费用仅作为平台服务器租赁及人员维护资金 费用不为素材本身费用，望理解知悉！