flylikebird/three-mtl-test

测试three.js PBR材质中各个参数的影响因子和实际效果

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)