Three.js, an advanced graphics library for the new decade
I’m excited about this one. This complements my skills as a 3d designer and my new path as a programmer perfectly. This is an introduction to the most beginner concepts of three.js for the people in my class.
Three JS has all of the same things to set up that you need for a real shoot in our real 3d world. You need a scene, or a 3d coordinate plane for you to work on. You need a camera for you to look at that world with, a light to illuminate your subject, and a renderer to display the image.
Another important concept is the idea of a Game Loop. A Game Loop is a function that runs continuously throughout a piece of code that serves to update things and perform different functions every frame. Say if you were writing a game, you would most likely need to check every frame that your protagonist had not collided with any world objects to create the most optimal playing experience. This is the last piece of three.js that allows for exciting functionality on the web. This loop we need to build ourselves, but it is just a standard JS function, everything else three supplies us with immediate grab and go implementation.
Object3D is the base class for most things in three.js and the object3d class represents things you can place inside your coordinate plane, or world. For instance, a 3d object is imported into three.js as a JSON object of coordinate points created by accessible software that is interpreted by threejs’s 3d object loader. From now on my examples are gonna come straight from https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html
and the three.js examples documentation
Geometry:
Geometry in three is any three-dimensional shape as defined by primitive polygons, or flat faces. Three.js has many default geometry types to choose from. In order to view something in the third dimension, we need to have something to view. This is why we start here, and why three.js’s “Hello World” is a cube on the screen.
The Camera:
While threejs has multiple cameras that we can choose to work with, I’m choosing the perspective camera for my first example. It gives us three parameters, a field of view angle, a far clipping plane, and a near clipping plane. Think of this as your eyes
A Light:
Without light our eyes would not be of any use. We need a light to bounce rays off of an object in order for it to be seen. An object can also be emissive, or emit its own light. We have many options in three.js for lights such as spot light, point light, area light, and hemisphere light. Look at the official documentation for examples.
The “Renderer”:
This is your brain! Without your brain your eyes wouldn't be able to do anything with the light they take in. The renderer in any 3d application takes the light data taken in by the camera, and turns it into a 2d image for us on the screen. A final project. Three.js makes all of these concepts immediately accessible to anybody who wants to bring their interface into the modern age of 3d.
