Experiments with Three.js

•

Student: Tzakopoulos Panagiotis

This is a student project. It is about a research on ThreeJs library. The goals of the research were to learn what ThreeJs is, what its capabilities are and what knowledge you gain within the deadline (1 month).

During this research, the student created several projects while he was experimenting with the library.

First Experiment

The first experimental project was a simulation of our solar system. For that he used the basics of ThreeJs such as

a. Renderer, Scene, Camera
b. Geometry
c. Material
e. Light

The goal for this project was to achieve the right dimensions for each of the planets included, the right shape, the right light source and the right movement.

Github link
https://github.com/ptzakopoulos/threejs-project-1-2/tree/main

YouTube Video
https://youtu.be/FotFmzdpyJ0

Second Experiment

The second project was made to experiment with Raycaster and the interaction between the 3D environment’s objects and the user. The 3D objects interact with the user’s mouse movement. The key point of this proects is Raycaster.

Github link
https://github.com/ptzakopoulos/threejs-project-1-2/tree/main

YouTube Video
https://youtu.be/J-_R6O2hbEA

Third Experiment

The third project is a combination of everything the student had learn while studying ThreeJs library. It is a completely free navigation of the user within the 3D space which looks more like a game experience.

Key points :
a. The combination of 3D Environment with css3dRenderer and window events
b. Cannon-es for real life physics

NOTE : Use W,A,S,D in order to navigate around the 3d space, F to interact with the object within 3d environment and E to access the ‘menu’ and Q to lock the cursor.

Github link
https://github.com/ptzakopoulos/threejs-project-3/tree/main

YouTube Video
https://youtu.be/S52dLRXiiLg