three.js outputs

week three – thursday 1st august

task one: independent study
After playing around with three.js and learning the basics of what we could make and how to modify lighting, environment and how to include snippets we were tasked with creating three outputs of our own for independent study.

stars
This output initially started with a yellow octahedron with a deep navy black background to mimic the night sky. Using the snippet called ‘particle’ the octahedron was multiplied and distributed along the canvas randomly using ‘vertex.x = 1000 * Math.random() – 500; ‘ where ‘x’ was replaced with z and y to randomise all axis for all mesh. Then the positions are modified to be set on a rotation of 0.0005 as well as the camera position slowly rotating to create a sense of atmosphere.

dragon knots
This output began with a knot design from the three.js drop-down menu. The materiality for this design was set to normal but on the back side. The background colour (red) was selected to contrast with the colours within the knot. This colour palette reminded me of the common colours that dragons are depicted as, so this output was named ‘dragon knots’.
Similar again to the stars output, the snippet used duplicated the knots 200 times over, using ‘mesh.position.y = Math.random() * 3200 – 3200;’ to randomise the z,x and y axis for each mesh. In addition to this the camera position was used from the swing snippet and changes the x and the y axis of the camera to swing the camera angle out and back into the centre of the knot outputs.

purple circle
This output is a simple purple ring with Lambert shading in a standard purple colour. I used different intensity and colours for lighting to enhance the rendering of this ring.
I applied the ‘leave trails’ snippet and limited the horizontal (x) axis to the centre of the window so that the rotation and trail of the ring remained within the diameter of the ring. The low opacity of the ring combined with these modifications means that it appears as if this ring is creating a sphere as it loops over & within itself.