Interactive Graphic Systems 1st Project

Showcase of an Academic Project for Interactive Graphics Systems Course at FEUP

A interactive scene developed with Three.js.

Scene Description

• Our scene consists of a simple representation of the required objects, that being a table, and on top of that table, a spring, a newspaper, a cake with candles, and a jar with a single flower. On the walls there are 2 portraits as requested with the pictures of the 2 students, the "beetle" shape framed and, on the opposite wall, a window.

• In terms of lights implemented in our scene we have:

  • A point light serving as a ceiling light, positioned above everything else, pointing towards the center of the scene.

  • A spot light pointing towards the cake, represented with a lamp on one of the walls.

  • A directional light to simulate the light coming out of the window. This light has a slight yellow color to simulate the sun color effect.

• For cameras, we have the requested cameras, 4 perspective cameras, that include 2 cameras that are close-ups to better see the objects on the table ("Spring Close-up" and "Jar Close-up"), and 5 orthographic cameras to view the scene from every side (left, right, top, front, back)

• On our interface, we have two folders:

  • Spotlight folder, with a color picker ("light color"), that can change the color of the spot light

  • Camera folder, as it was given by the teachers, that allows to control the x coordinate of the perspective cameras, and allows to change the active camera, to switch from the list of multiple cameras.

Other things worth mention:

• The stem of our flower is a curve, as requested, made out of a Cubic Bézier Curve and utilizes the TubeGeometry as geometry to create the mesh.

• Our flower is made of 4 petals, created with a ExtrudeGeometry made out of a path that included Bézier curves.