Three.js For Jarek:

Controls use W,A,S,D to move (Camera has a light)

if not working use the mouse right/left click to move:

  • Right click to move forwards
  • Left click to move backwards

Jarek Report:

The Task: The task of the three.js is to make a interesting scene or implement a small game on a WebGL.

Implementations:The implementations of the game is done by creating a lamp object into the scene. The scene's direct light has been disabled and the background image on the HTML has been set to black to darken the room. Afterwards a spot light is attached to the lamps head along side with orbiting cube lights to illuminate the room. A sphere object is also created and has a rotation animation added with a texture. The camera itself has a light for the user to explore around the scene.

light1.position = camera.position;

Sets the light1 to the camera's position so that the user can see around the scene.

light2.position.y += delta/3;

Sets the light 2 position on y axis and to add a slow transform up every 1 second.

sphere1.position.y += delta/3;

sphere1.rotation.y += delta/4;

Same with the sphere the position of y axis is increased by every second and is then divided by 1/3 or 1/4 of a second to slow down the speed of the sphere.

var loader = new THREE.OBJMTLLoader();
loader.addEventListener('load', function (event)
{
model = event.content;
model.position.y = 0;
scene.add(model);
});
loader.load('assets/lamp.obj');

The function above creates a 3d model object and assigns variables to the model. Then a loader is called to assign the asset to the model loader to know what object is to be added into the scene.

The object is created by calling a 3d object from the assets folder into the scene then attaching a mesh texture onto it, this is then added to the scene. After a spot light is created and is set a transform to the head of the lamp and is then added to the scene.

The improvements: The improvements will be to add more animations on the sphere so that It will introduce something new. Also to add more orbiting cubes to the scene to have a more interesting scene for the user to have.

More information

Published 149 days ago
StatusIn development
CategoryOther
PlatformsHTML5
AuthorMrTopFish