Three.js Models Update

In my post on Loading Models in Three.js I was using version 79. Three.js is now at version 100 and some changes have been made to how models are loaded. In this video I describe how to export glTF models from Blender and import them into Three.js. You can read the documentation on loading models Three.js Models Update

Three.js Loading Models

In my post on Geometry in Three.js I discussed the different types of primitives we have available. Primitives are a powerful tool but creating 3D objects with only primitives and code can only get you so far. For full control over your 3D models it is best to use a 3D modeling application and then Three.js Loading Models

Three.js Post Processing

Post-Processing is the addition of image effects or filters to your entire scene. This can change the feel of your scene and simulate interesting visual effects. Some examples are applying a sepia tone, or adding static the scene, giving it the feel of older television sets. To achieve this in Three.js we utilize shaders. The Three.js Post Processing

Three.js Lights and Cameras

Lights can really make the difference between a seemingly flat scene and a visual masterpiece. Think of any photo-realistic painting or photograph and then imagine it with poor lighting and the impact is just not the same. Cameras change the way we view our scenes altogether, think of the different types of lenses photographers use Three.js Lights and Cameras

Three.js Materials

Materials determine how the surface of our geometry is drawn in Three.js. If the Geometry is our skeleton, defining the shape, then the Material is our skin. There are a variety of different types of materials in Three.js all of which have different properties, like responding to lights, mapping textures, and adjusting opacity. Basic Material Three.js Materials

Three.js Geometry

Geometry defines the shape of the objects we draw in Three.js. Geometry is made up of a collection of vertices and often faces which combine three vertices into a triangle face. You can create your own custom geometry by defining these vertices and faces yourself, but Three.js also has a variety of common shapes for Three.js Geometry

Three.js Getting Started

Let’s set up a basic scene in Three.js. The first thing you need to do is include the Three.js library. You can download it at threejs.org. You can also use the CDN url from cdnjs https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js. The Renderer The first thing we need to do is create a renderer. Because Three.js supports multiple renderers we Three.js Getting Started

Three.js Introduction

Three.js is an open source javascript library for drawing 3d graphics on the web. It was created by Ricardo Cabello (aka. Mr. doob). It grew out of the work he had done for Flash on the Papervision 3D library. Originally it was created as a renderer agnostic API with a 2D Canvas and SVG Renderer. Three.js Introduction