Context

This project was the final project for the course titled "3D Modeling" during the first semester of the fourth year.

Description and goal

The goal of this project was to use the Three.js library to:

1. render a table tennis table, whose legs are revolutions of two Bézier curves joined by a G1 spline[*]
2. simulate the ball's trajectory using Bézier curves: quadratic and cubic[**]

[*] A G1 junction between two Bézier curves means that the tangents at the junction point have the same direction or slope. This ensures that the curves do not visually meet at a "corner" or "break."

[**] A quadratic Bézier curve has 3 control points, while a cubic curve has 4.

Tech Stack

• Javascript Additional librairies :
  • three.js

Concepts used and developped

• Bézier curves
• 3D Rendering
• 3D Orientation et orthonormal coordinate system

Implementation

The table

The table is made up of its base, its surface and, finally, the rim.

• Each leg in the base is formed by the rotation of two Bézier curves joined by a G1 transition, and duplicated four times.
• The surface is a textured plane.
• The rim is a collection of parallel and perpendicular segments that give it its shape.

The paddles

The paddles consist of cylinders whose height is much smaller than their radius, with another cylinder to hold them in place. The same concept is applied to the other side, rotated by 90° (or π/2 rad).

Trajectory

The rackets move parallel to the side of the table. This movement occurs in both directions.

The ball’s trajectory is more complex. It is formed by Bézier curves on a plane perpendicular to the table’s surface. The idea behind the trajectory is to keep these curves fixed whilst varying the plane on which they lie, subjecting it to rotations and translations in order to adjust the trajectory and simulate the serve and the ball’s responses.

Results

The results are presented in the report in the repository of the code. This report is in french.

Final thoughts

Working with the Three.js library and 3D modelling was a wonderful experience. There is room for improvement in several areas, particularly regarding the organisation, clarity and cleanliness of the code, as well as the approach taken. These aspects were not fully addressed due to the limited time allocated to this project.

How to run

Clone the repository and run a local web server in the directory. Access the index.html file to run the simulation or click on the Lancer la balle button in the controls menu.

Code

The code is available in this GitHub repository (TBA).