Three.js Sky-box

A 3D WebGL project using the Three.js javascript framework to create a 3D scene within a sky-box.

What's under the hood:

1. Gulp
2. Browsersync
3. Gulp-sass
4. Three.js

Demo

https://hghazni.github.io/Three.js-Skybox/

What have I learnt?

I've learnt a lot about several different fundamentals within Three.js to do with:-

1. Movement controls
2. Object loaders
3. Different object types
4. The Four main types of lighting
5. building geometric shapes through JavaScript
6. Adding custom textures
7. Affecting geometric shapes/objects with logic by getting them to do something
8. Understanding scale, camera distance and object/geometric-shape harmony

Overall it's been a great learning experience and I'm looking forward to using this as a foundation to build more dynamic 3D scenes with compelling camera paths/movement. I'll perhaps try using the Fly By controls for the next Three.js project.

Why Gulp/Browsersync/Gulp-sass?

Due to the 'same origin' policy (which is a Javascript security feature) I needed to run a local web server to enable the loading of external resources. That is why I'm using Gulp to run a local web server simply to bypass that.

I've added in Browsersync and Gulp-sass because I

a) Love browser-sync and can't be bothered to refresh constantly

b) These are my standard tools on most front end projects

Having these will improve my quality of life in my work-flow on this project (first world problems).

Why Three.js?

Mostly because I'm not creating a game engine from scratch I enjoy the idea of a little bit of abstraction. Everyones likes a bit abstraction every now and then right? Of course so Three.js is my standard go to for WebGL abstraction to make my building of this Skybox for all intensive purposes....a 'breeze' (famous last words.)