광택 플라스틱

Plastic

둥근 모서리와 스튜디오 반사가 있는 사출 플라스틱 표면을 만듭니다.

다른 이름: PlasticGlossy plasticMolded plastic

WebGPU 를 지원하는 브라우저에서 움직입니다

이 기기에서는 데모를 그리지 못해 정지 화면을 보여 줍니다

React
// WebGPU 를 지원하는 브라우저에서만 그립니다.
import { Shader, Plastic } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <Plastic />
    </Shader>
  )
}
Vue
<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script setup lang="ts">
import { Shader, Plastic } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <Plastic/>
  </Shader>
</template>
Svelte
<!-- WebGPU 를 지원하는 브라우저에서만 그립니다. -->
<script>
  import { Shader, Plastic } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <Plastic />
</Shader>
Solid
// WebGPU 를 지원하는 브라우저에서만 그립니다.
import { Shader, Plastic } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <Plastic />
    </Shader>
  )
}
JavaScript
// WebGPU 를 지원하는 브라우저에서만 그립니다.
// <canvas id="canvas" style="width:100%;height:320px"></canvas> 가 페이지에 있어야 한다
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'Plastic',
    }
  ]
}, { disableTelemetry: true })

속성(props) · Plastic

값을 바꾸면 위 데모와 코드 탭에 바로 반영됩니다. 설명은 라이브러리 레지스트리의 영어 원문(MIT)입니다.

이름값기본값범위·선택지설명(원문)
originOrigin코드에서 지정center—Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.
centerCenter
x0.5y0.5
{"x":0.5,"y":0.5}x, y: 0 – 1Center position of the plastic shape
scaleScale10.1 – 3 (step 0.01)Scale of the plastic shape (1 = default size)
rotationRotation00 – 360 (step 1)Rotation of the plastic shape in degrees
colorAColor A#f5f5f7—Body color at the start of the gradient
colorBColor B#d9dade—Body color at the end of the gradient
stopsColors코드에서 지정null—Multi-stop gradient colors (overrides Color A / Color B when set)
gradientAngleGradient Angle900 – 360 (step 1)Direction of the body color gradient in degrees
colorSpaceColor Spacelinearlinear · oklch · oklab · hsl · hsv · lchColor space for gradient color interpolation
thicknessPuffiness0.50.05 – 1 (step 0.01)Puffiness — how far the rounded bevel reaches inward from the edge before the surface flattens
roughnessRoughness0.120 – 1 (step 0.01)Surface roughness — 0 = polished gloss with crisp mirror reflections, 1 = matte satin
reflectivityReflectivity10 – 2 (step 0.01)Strength of the environment reflections and specular highlights
crumpleCrumple0.250 – 1 (step 0.01)Surface crumple — irregular dents that break reflections into hard organic shapes, like blown or vacuum-formed plastic
crumpleScaleCrumple Scale10.5 – 10 (step 0.1)Size of the crumple dents — higher = smaller, denser dents
crumpleCoverageCrumple Coverage10 – 1 (step 0.01)How much of the surface is crumpled — 0 = pristine, 0.5 = patches of crumple, 1 = fully crumpled
seedSeed00 – 100 (step 1)Random seed — re-rolls the crumple pattern for reflection variety
edgeSoftnessEdge Softness0.050 – 1 (step 0.01)Softness of the shape boundary edge
lightAngleLight Angle3150 – 360 (step 1)Direction the studio key light comes from, in degrees
speedSpeed10 – 4 (step 0.01)Speed of the environment drift — the studio reflections slowly orbit the surface. 0 pauses.
shadingShading0.350 – 1 (step 0.01)Diffuse shading contrast — how strongly the body darkens away from the light
rimRim Light0.250 – 1 (step 0.01)Fresnel rim light intensity on grazing surfaces
rimColorRim Color#ffffff—Color of the fresnel rim light
shapeShape코드에서 지정{"type":"sphere3D","radius":0.35}—Serialized shape configuration (JSON)
shapeSdfUrlshapeSdfUrl코드에서 지정—URL to a pre-generated SDF .bin file
shapeTypeshapeType코드에서 지정—Active SDF shape type

모든 컴포넌트 공통: blendMode · opacity · visible · maskSource/maskType · boundingBox · id

광택 있는 장난감이나 매끈한 사출 부품처럼, 둥근 테두리에 반사광이 맺히고 표면 색이 부드럽게 이어집니다.

`colorA`와 `colorB`는 표면 그라디언트의 양 끝 색입니다. `thickness`를 올리면 모서리의 둥근 부분이 안쪽으로 더 들어오고, `roughness`는 선명한 광택을 부드러운 새틴으로 바꿉니다. `reflectivity`를 올리면 환경 반사가 강해집니다.

자체 표면을 생성하며 색을 단순하게 두면 윤곽이 잘 보입니다. 반사를 과하게 올리면 작은 배지나 아이콘의 형태가 번쩍임에 묻힐 수 있습니다.

언제 쓰나

장난감 같은 아이콘, 제품 버튼, 밝은 색상의 입체 배지에 어울립니다. 절제된 무광 재질이나 반사 없는 제품 표현이 필요할 때는 피하세요.

페이지로 열기 ↗