How I learn WebGL threejs and 3D animations on browser

2025-03-24   blogpage programming howilearn sketch

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/<br>

- https://threejs-journey.com/#bruno-simon<br>

- https://www.youtube.com/watch?v=YK1Sw_hnm58<br>

-<br>

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