.

..

ThreeJS: A Survival Guide

A tutorial on the basics of THREE.js and a guide to more advanced features including examples, information about mesh materials both reflective and not, lighting, groups, textures and how to load them, displacement and alpha maps, and how to modify a scene during the window scroll event.

ThreeJS: Bouncing Ball

Two ways to create a bouncing ball using THREE.js; use sine/cosine or basic physics to bounce a ball.

ThreeJS: Cast Shadows

Cast object shadows and receive shadows from objects; how to create shadows in THREE.js, including how to configure a 3D model to cast and receive a shadow.

ThreeJS: Cover Background with Image without Stretching

How to set the background image to cover the scene without stretching it; how to make the background responsive for mobile apps using THREE.js.

ThreeJS: Create a Cube Array

How to create a cube grid array using THREE.js.

ThreeJS: Create an Egg

How to create a 3D egg object/geometry/mesh using the THREE.js LatheGeometry.

ThreeJS: Create Transparency with PNG Images

How to create transparency using Portable Network Graphics (PNG) images in THREE.js.

ThreeJS: How to Orbit a Body

How to make a 3D/mesh object (the satellite) orbit another object (the body) using THREE.js; how to make a celestial/solar system.

ThreeJS: Make an Object Appear to Follow the Mouse Cursor

How to make a mesh object appear to follow the mouse cursor by moving the camera in THREE.js.

ThreeJS: Make Objects Appear to Watch the Mouse Cursor or Touch Point

How to make mesh objects appear to watch the moving mouse cursor or point of touch on mobile devices in THREE.js.

ThreeJS: Move Camera Z-position Based on Object Size to Make a Responsive App

How to move the camera distance, or z-position, to fit an object within the size of the canvas or screen; how make an object fit within the confines of the canvas regardless of aspect ratio; how to make a mobile responsive web application using THREE.js.

ThreeJS: Performance Tips

How to increase and not to increase the performance of your THREE.js application.

ThreeJS: Raytracer Example

How to access individual objects on the canvas used by THREE.js.

ThreeJS: Transition from One Color to Another

How to gradually transition from one color to another using THREE.js with examples changing the scene background during the scroll event and animation event.

ThreeJS: Transparent Background

How to make the THREE.js canvas background transparent so that the HTML/CSS behind it can be seen.