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
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;
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.