Individual chapter sandboxes for Oct 2021 Codrops article "Creating the Effect of Transparent Glass and Plastic in Three.js" (link).
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.
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.
01
: BasicIcosahedronGeometry
withMeshNormalMaterial
(link)02
: Change toMeshPhysicalMaterial
(link)03
: Add a light to see the material (link)04
: Addtransmission
option to make transparent (link)05
: Add Background plane (link)06
: The magic of thethickness
option (link)07
: Thickness continued with a sphere (link)08
: Frosted glass usingroughness
option (link)09
: Different geometries explored (link)10
: AddingenvMap
(link)11
: Addingclearcoat
(link)12
: AddingnormalMap
(link)13
: Adding post-processing (link)14
: Using withInstancedMesh
(link)15
: Full GUI (link)