Programming raw WebGL is a bit tedious. Knowing about how it works is important in graphics, but in order not to spend too much time on low level calls, libraries on top of it have been built. One such library is Three.js, that we will be using quite often. That library provides a lot of often used things with simple interfaces. In some of the future tasks we will be implementing couple of those things ourselves (and not using Three.js built-in classes). Such requirements will be noted in the task descriptions.

Current task is again about drawing an equilateral triangle. Take a look at the base code:
https://cglearn.eu/files/course/1/tasks/HelloThreeJS.zip

Although this example is using WebGL, the Three.js library hides a lot of things present in the Hello WebGL task. For example:

• The shaders are generated automatically. There are a couple of standard shaders that people use depending on what objects they have and how they want to render them. Three.js takes into account what objects you are using and generates the corresponding shaders. Later we will see how to use custom shaders, because often times you might want to do something very specific in them.
• The vertices are sent to the GPU in the background. You do not have to call the buffers yourself.
• The draw calls are also wrapped behind the renderer object's render() method.

The overall structure of a Three.js application consists of:

1. Construct a renderer, scene (to store your objects in) and a camera (to view your objects with).
2. Construct a 3D object (THREE.Mesh for example) by constructing a corresponding geometry and a material for it.
3. Add your objects to the scene.
4. Render the specified scene with a renderer with a specified camera.

Three.js also provides quite good classes for storing and manipulating vectors, matrices, faces etc. Take a look at the instructions in the task and the Three.js documentation.

The result should be like the image on the right. Three.js automatically assigns a black background. Just like in previous tasks the drawTriangle(position) function should work with different positions and the triangle should be positioned to its center.

Note that it is required that you set up a local HTTP server to see the results. This is true for most of the JS tasks as well. To see how to do it, watch the video or read the development environment setup guide.

Correctly formatted code is expected. Please indent the code correctly and avoid bad coding practices, such as magic numbers.