Tennis scene

WebGL Report

Goal:

To upload a WebGL scene using the Three.js language to a hosting server.

What was done:

I started by filling in what is standard for most all Three.js applications. That includes the HTML framework and the Javascript constant parts. After this I added a simple plane, sphere and spotlight to the scene. I placed the plane at the bottom and the spotlight at the top, so the light would throw a shadow on the plane after I enabled send/receive shadows on the relevant objects.

I then added a texture to the sphere and plane, making it look like a tennis ball was above a sand playing field. I then started animating the objects, firstly by making the ball move up and down in a bouncing pattern. I also animated the light so that it looks as if the shadow is being thrown from side to side on the playfield below. The animated object had to be made global before they could be used in the "Animate()" function.

To make the scene more complete I added a tennis racket. This racket was then animated to rotate from a pivot point placed at the handle, positioned below the ball, and then synched up to make it look like the ball was being bounced in the air by the object. This object was imported using the .OBJ loader, complete with a .mtl for textures.

To finish up the project I modified the controls to work like first person controls. This means that the camera will rotate faster the further away the pointer is from the centre of the screen. The camera moves forward with the left mouse button, and backwards with the right.

What could have been done better:

The scene could use a skybox, just something simple like a blue sky.

I could also have added a model for the light, so that it is visible and shows that it moves back and forth.

The plane could also be a bit wider, but since there was a bug where the shadows would be cut out if scaled up this ended up looking worse.