Learn Three.js with examples

I started learning Three.js not long ago and I was a bit sad because I couldn't find easily simple examples of Three.js

You will find here all my experiments with Three.js step by step. I still have a lot to learn so there will be probably some mistakes. Do not hesitate to contact me on Twitter or by commenting on Codepen.

All example are working with the Revision 71 of Three.js .

I will put all the examples on Codepen so you can directly see source codes and edit them to try by yourself.

Mamboleoo

16. Animate using GSAP

How to animate a mesh with the awesome GreenSock tool.

See the Pen 16. Animate using GSAP by Louis Hoebregts (@Mamboleoo) on CodePen.

Download source codes
Tags :
  • GreenSock
  • GSAP

15. Load .obj file

How to load an external obj file and add it into the scene.

See the Pen 15. Load .obj file by Louis Hoebregts (@Mamboleoo) on CodePen.

Download source codes
Tags :
  • OBJLoader

14. Combine faces & wireframe

How to display an object with the faces visible and its wireframe.

See the Pen 14. Combine faces & wireframe by Louis Hoebregts (@Mamboleoo) on CodePen.

Download source codes
Tags :
  • wireframe
  • createMultiMaterialObject

13. DOM interactions

How to connect some DOM elements with your 3D objects on ThreeJs.

See the Pen 13. DOM interactions by Louis Hoebregts (@Mamboleoo) on CodePen.

Download source codes
Tags :
  • DOM
  • applyMatrix4
  • project

12. Particles

How to generates particles and animate them.

See the Pen 12. Particles by Louis Hoebregts (@Mamboleoo) on CodePen.

Download source codes
Tags :
  • particles
  • pointCloud
  • vector3