ConnectionsLab

Week 11:

Class II, pt.2 | April 21st: “MAKE a simple page with one of the following libraries - D3, Three.js, Ml5, Aframe, Tone.js, Rivescript, Leaflet. Ensure that you work with a library that you have not worked with before. DOCUMENT your progress and learnings from the making of the webpage”

For this week’s assignment, I decided to work with Three.js. It was the JavaScript library whose examples appealed to me the most, particularly the Apple website since it made me understand the relevance of mastering this tool. My goal for this assignment was to use the documentation and online tutorials to learn the basics of Three.js and feel comfortable with it.

Wireframe and steps:

The wireframe for this website is very simple. I wanted the canvas to cover all the page, so I could focus on the implementation of different features from the library rather than on the UI. On the canvas, I render and animate one geometrical shape and experiment on different ways we can play with it on Three.js, such as changing the color, size, texture, etc.

The wireframe for this website is very simple. I wanted the canvas to cover all the page, so I could focus on the implementation of different features from the library rather than on the UI. On the canvas, I render and animate one geometrical shape and experiment on different ways we can play with it on Three.js (such as changing the color, size, texture, etc).

The first thing I learned from the documentation was how to create a scene with a spinning cube. The summary of the steps is the following one:

  1. Call the Three.js library on index.html.
  2. Create scene and camera objects.
  3. Add the orbit controls.
  4. Create geometrical shapes.
  5. Add materials and textures to shapes.
  6. Render the scene.
  7. Animate the scene.

The orbit control added from the library allow the user to rotate, and zoom in and out of the scene. This is a feature that I found very useful and that I will probably exploit in my final project.

For the conceptual part of my work, I wanted this to be a fun experience so I decided to add my friends’ pictures as textures to the cubes. In this way, my website’s audience is meant to be myself and my social group.

Preview:

This is the final result:

Click here to see my website