How I learn WebGL threejs and 3D animations on browser
threejs documentation
- https://threejs.org/manual/#en/fundamentals
- https://threejs.org/manual/#en/prerequisites > nice info on modern Javascript, what you should know:
- ES6 modules
- closures
- js ref
- this
- js ref
- ES5/ES6/ES7
- var is deprecated
- use for(elem of collection), never for(elem in collection)
- use forEach, map, filter extensively
- use destructuring
- object declaration shortcuts
- rest parameter and spread operator ...
- class
- getts and setters
- arrow functions
- promises and async/await
- template literals
- VS Code ESLint extension is recommended
-
- interactive scene editor https://threejs.org/editor/
- can make objects and then export
threejs forum - https://discourse.threejs.org/
Recommendations from reddit https://www.reddit.com/r/threejs/comments/r8oc73/what_are_some_good_resources_to_learn_threejs/ - https://discoverthreejs.com/ - https://threejs-journey.com/#bruno-simon - https://www.youtube.com/watch?v=YK1Sw_hnm58 -
Examples: - ferrari car - https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_car.html
Tutorial
- Creating a SimCity Game with Javascript and Three.js
-
- Fireship tutorial https://www.youtube.com/watch?v=Q7AOvWpIVHU
- https://threejs.org/manual/#en/fundamentals
- https://threejs.org/manual/#en/prerequisites
- js ref
- js ref
- promises
- async/await
- https://threejs.org/editor/
- https://discourse.threejs.org/
- https://www.reddit.com/r/threejs/comments/r8oc73/what_are_some_good_resources_to_learn_threejs/
- https://discoverthreejs.com/
- https://threejs-journey.com/#bruno-simon
- https://www.youtube.com/watch?v=YK1Sw_hnm58
- https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_car.html
- Creating a SimCity Game with Javascript and Three.js
- https://www.youtube.com/watch?v=Q7AOvWpIVHU