Creating the Effect of Transparent Glass and Plastic in Three.js

Individual chapter sandboxes for Oct 2021 Codrops article "Creating the Effect of Transparent Glass and Plastic in Three.js" (link).

Updates:

Changes will be made to this repo first, then ported to the CodeSandbox instances. This will remain the most up-to-date source for these demos.

Running:

To run these sandboxes, enter the sandbox to run:

$ cd 15

Install dependencies:

$ npm install

Then run the start npm script:

$ npm run start

You can capture screenshots by using the cmd/ctrl + S key combination when the window has focus. They will be saved in the ./output directory.

Sandboxes:

• 01: Basic IcosahedronGeometry with MeshNormalMaterial (link)
• 02: Change to MeshPhysicalMaterial (link)
• 03: Add a light to see the material (link)
• 04: Add transmission option to make transparent (link)
• 05: Add Background plane (link)
• 06: The magic of the thickness option (link)
• 07: Thickness continued with a sphere (link)
• 08: Frosted glass using roughness option (link)
• 09: Different geometries explored (link)
• 10: Adding envMap (link)
• 11: Adding clearcoat (link)
• 12: Adding normalMap (link)
• 13: Adding post-processing (link)
• 14: Using with InstancedMesh (link)
• 15: Full GUI (link)