CaseBuilderAcrylicMaterials

The four material families of the case-3d color→material adapter (#1934), each painting a whole case one color: clear acrylic (full transmission), translucent red acrylic (transmission + colored attenuation, opacity 0.6), an opaque 3DP filament (matte, non-transmissive), and the red/green silk stripe approximation. Transmission is lit by a RoomEnvironment PMREM env map; opacity stays 1 (translucency is physical). three.js loads only client-side via dynamic import.

Product-Specific Blocks

Clear acrylic

Translucent red acrylic (opacity 0.6)

Opaque 3DP filament

Red/green silk stripe

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Dev harness for issue #1934 — showcases the four material families the // color-record adapter (`materials.ts`) produces, each painting a whole 3u-40hp // case one color: clear acrylic, translucent red acrylic (opacity 0.6), an // opaque 3DP color, and the red/green silk stripe approximation. Side-by-side // screenshots of these four are the acceptance-criteria deliverable; browser // tooling is out of scope for this worktree, so the manager screenshots the // live catalog. `render()` stays pure/sync/SSR-safe per the story contract — // all WebGL work happens inside AssembledCaseViewer's mount effect. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { AssembledCaseViewer } from './assembled-case-viewer'; const SHOWCASE_CASE = '3u-40hp'; const meta: StoryMeta = { title: 'CaseBuilderAcrylicMaterials', category: 'Product-Specific Blocks', description: 'The four material families of the case-3d color→material adapter (#1934), each painting a whole case one color: clear acrylic (full transmission), translucent red acrylic (transmission + colored attenuation, opacity 0.6), an opaque 3DP filament (matte, non-transmissive), and the red/green silk stripe approximation. Transmission is lit by a RoomEnvironment PMREM env map; opacity stays 1 (translucency is physical). three.js loads only client-side via dynamic import.', usage: `import { AssembledCaseViewer } from '@/src/components/case-builder/case-3d/assembled-case-viewer';\n\n<AssembledCaseViewer netCaseId="3u-40hp" material="acrylic" defaultColorId="clear" />`, }; export default meta; export const ClearAcrylic = defineStory({ name: 'Clear acrylic', render: () => ( <AssembledCaseViewer netCaseId={SHOWCASE_CASE} material="acrylic" defaultColorId="clear" /> ), }); export const TranslucentRedAcrylic = defineStory({ name: 'Translucent red acrylic (opacity 0.6)', render: () => ( <AssembledCaseViewer netCaseId={SHOWCASE_CASE} material="acrylic" defaultColorId="red" /> ), }); export const OpaqueThreeDp = defineStory({ name: 'Opaque 3DP filament', render: () => ( <AssembledCaseViewer netCaseId={SHOWCASE_CASE} material="3dp" defaultColorId="green" /> ), }); export const StripeFilament = defineStory({ name: 'Red/green silk stripe', render: () => ( <AssembledCaseViewer netCaseId={SHOWCASE_CASE} material="3dp" defaultColorId="red-green-silk" /> ), });