This practice includes 6 exercises utilizing the Javascript 3D library Three.js, with increasing levels of difficulty.
You’ll require the live-server NPM package. Then, simply download and execute the live-server command inside the src/ directory. This will lead you to the starting menu, where you should be able to select the desired exercise. You can also view the project in this GitHub page.
This exercise consists on creating a scene and placing all the available Three.js primitives in it. Also, a floor with a crosses pattern must be created utilizing Three.js’s line segments.
This exercise takes from exercise 1. It renders the same scene twice in one page, one utilizing a perspective camera and fly controls and the other utilizing an orthogonal camera an orbit controls.
This exercise consists on creating a hollow cube, built from a set of vertices, normals and texture mapping coordinates which compose the set of triangles of the geometry.
This exercise consists on the creation of a robot arm with 6 degrees of freedom (DoF) utilizing Three.js’s primitives.
This exercise takes from exercise 4, and it consists in giving the robot arm the ability of picking up a set of randomly generated balls in the scene’s floor, and then throwing them inside a trash bin. For solving this exercise, the following libraries were used:
- Kinematics: For calculating the angles of the 6 Dof arm’s joints.
- three.interaction.js: As the event manager for making the scene balls clickable.
- TWEEN: As the animation engine library.
Kinematics and three.interaction.js were slightly modified in order to solve some bugs which prevented them from being imported.
This exercise simply consists on taking exercise 5 and converting it to a VR experience.