PROWAREtech
three js
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.