In this workshop, we have learned how to install and use three.js in about 3 hours !
Three.js is a powerful tool that makes use of WebGL to render 3D computer animations in HTML canvas and without much efforts. The source code can be found here.
- Begin your project in your localhost (to avoid CORS problems) by making those files inside your project folder :
-
Do the following commands in your project folder :
npm init
andnpm install three
. If done correctly, you should have a package.json and a package-lock.json files, as well as a node_modules folder. -
Import three.js in you script using this line at the beginning of your Javascript file :
import * as THREE from "./node_modules/three/build/three.module.js";`.
In short, we did this :
How did we do this in 3 hours ?!
-
We installed three.js together to make sure everyone was starting from the same point and that it wouldn't be a problem later;
-
We did an Hello Cube : we created our first three.js scene, then we put a camera and a cube;
-
We learned how to animate this cube using
requestAnimationFrame
; -
We played a little bit with our cube : we learned how to use AxesHelper, OrbitControls and how to map textures (in this case, the dice textures) to this cube;
-
We created a rollDice and stopDice function, and did a stopBuffer to prevent the dice from stopping halfway through two faces;
-
We answered to various questions and since we had a little bit of extra time, we did a little bonus and showed how to load 3D models.
-
Thanks to everyone who followed the workshop. I didn't think it would go so well, but everyone seemed to achieve the dice, you can all be proud of you !
-
Thanks to the coaches at BeCode for letting us present this workshop !
-
From Olivia Fantinel : I couldn't thank enough Joffrey Bienvenu who helped me a lot with three.js on this previous project, and to Yannick Coopman and Jonathan Deschuyteneer for presenting this workshop with me, I'm really glad I could work on a technology as fun and as interesting as three.js and I couldn't have withou you !
-
threejs.org - Official website, and the documentation.
-
threejsfundamentals - Really nice tutorials about three.js.
-
three.js journey - Big course about three.js.
-
Élisée - A french game developer who is currently using three.js for his new project Sparks.land. Don't hesitate to follow him on Twitch where he streams himself while he codes the game.
-
KenShape - A little indie 3D modeling tool to make isometric 3D models from 2D pixel art that Olivia showed at the end of the workshop.
-
Blender - A free and open 3D modeling tool that is much more complete.