사용 가이드로 건너뛰기
Three.js Materials작성자 CloudAI-X

Three.js Materials 스킬.

표면에 맞는 셰이딩 모델을 고른 뒤, 의도한 조명 아래에서 확인하세요.

  • 3D
  • Three.js
소스 검토 · Three.js MaterialsSKILL.md
작업 3D 결과물 • 근거가 있는 머티리얼 선택 • 맵 및 물리 속성 지정 • 투명도 및 리소스 검토 시작하기 전에 작동하는 Three.js 프로젝트와 렌더러가 필요합니다. 소스의 예제는 설치된 릴리스 기준으로 확인하세요. 추가 컨트롤과 로더는 선택한 경로에 따라 달라집니다.
편집 요약 · 소스 검토일 2026-10-07 · 생성된 예시 아님

01 기능 소개

Three.js Materials: 표면 동작 선택

머티리얼 모델, PBR 속성, 고급 표면, 투명도, 리소스 관리 패턴을 다룹니다.

소스 기반 워크플로실행 벤치마크 아님

작업 방식

Three.js Materials은 비조명, 조명, 물리 기반, 툰, 디버깅, 커스텀 셰이더 머티리얼을 비교합니다. 색상은 선택의 일부일 뿐이며, 모델마다 조명, 맵, 물리 속성이 메시에 미치는 영향이 달라집니다.

standard 및 physical 머티리얼 섹션은 roughness, metalness, clearcoat, transmission, sheen, iridescence를 다룹니다. 투명도, 깊이 동작, 복제, 해제도 포함됩니다. 이는 표면 제작 패턴이며, 임의의 매개변수 조합이 사실적으로 보인다는 보장은 아닙니다.

예상 결과물

  • 근거가 있는 머티리얼 선택
  • 맵 및 물리 속성 지정
  • 투명도 및 리소스 검토
예시 브리프 보기

브리프에서 검토까지

  1. 01
    마감 파악

    표면에 단색, 무광 조명 반응, 양식화, 고급 물리 동작 중 무엇이 필요한지 결정합니다.

  2. 02
    지원되는 속성 지정

    장면의 조명을 점검하면서 관련 맵과 속성을 사용합니다.

  3. 03
    트레이드오프 확인

    투명도, 깊이 동작, 셰이더 비용, 머티리얼 재사용을 검토합니다.

02 활용 상황

사용 시기

작동하는 Three.js 프로젝트와 렌더러가 필요합니다. 소스의 예제는 설치된 릴리스 기준으로 확인하세요. 추가 컨트롤과 로더는 선택한 경로에 따라 달라집니다.

적합한 경우

  • 표면 연구코팅, 직물 느낌, 금속, 투과 마감을 비교합니다.
  • 렌더링 진단노멀 및 깊이 머티리얼은 지오메트리 문제와 외관 문제를 구분하는 데 도움이 될 수 있습니다.

확인할 한계

  • 조명이 필요합니다물리 머티리얼이 자체 환경 조명을 제공하지는 않습니다.
  • 릴리스별 세부 사항맵 채널과 셰이더 훅은 실제 사용하는 Three.js 버전에서 확인해야 합니다.

준비할 입력

  • 마감 참고 자료의도한 표면과 핵심 특성을 제공하세요.
  • 텍스처 에셋사용 가능한 컬러 맵과 데이터 맵을 알려 주세요.
  • 장면 맥락조명, 환경, 렌더러, 기기 제약을 공유하세요.

03 핵심 결정

중요한 결정

  1. 예산 관련 결정

    단순한 셰이딩과 고급 물리 효과는 비용이 다릅니다.

  2. 투명도는 하나의 설정이 아닙니다

    불투명도, transmission, 깊이 쓰기, 정렬은 각각 따로 고려해야 합니다.

04 예시 브리프

집중 브리프로 시작하기

아래 예시 브리프는 테스트되지 않았습니다. 사용 전에 스킬의 설정을 확인하세요.

설정 검토

관련 threejs-skills 디렉터리를 에이전트 가이드로 사용하세요. Three.js 런타임이 아니며 장면 에셋을 설치하지도 않습니다.

업스트림 소스 파일
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-materials/SKILL.md

작동하는 Three.js 프로젝트와 렌더러가 필요합니다. 소스의 예제는 설치된 릴리스 기준으로 확인하세요. 추가 컨트롤과 로더는 선택한 경로에 따라 달라집니다.

하나의 결과물로 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약을 조정하세요.

예시 브리프
threejs-materials을 사용해 무광 폴리머 본체와 투명 보호 커버를 비교하세요. 각각에 적합한 가장 단순한 머티리얼을 고르고, 사용할 맵을 명시하며, transmission과 불투명도의 차이를 설명하세요. 설정을 권장하기 전에 두 가지를 같은 조명에서 점검하세요.

결과 점검

실제 출력을 다음의 관찰 가능한 기준과 비교하세요.

  • 머티리얼이 필요한 기능을 지원합니다.
  • 맵의 역할이 명확합니다.
  • 투명도와 비용을 실제 맥락에서 점검했습니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 작업 공간을 제공합니다. 이 목록은 스킬이 번들로 포함되어 있거나 외부 도구, 자격 증명, 소프트웨어 의존성이 포함된다는 뜻이 아닙니다.

05 출처 및 라이선스

소스 및 라이선스

이 페이지는 아래에 링크된 고정 소스 리비전을 설명합니다. 업스트림의 동작과 요구 사항은 바뀔 수 있습니다.

소스 소유자
CloudAI-X
라이선스
확인되지 않음 — 재사용 전에 업스트림 약관을 검토하세요.
검토한 스냅샷
2026-10-07 · b1c623076c66
편집 소스 요약
머티리얼 모델, PBR 속성, 고급 표면, 투명도, 리소스 관리 패턴을 다룹니다.

링크된 소스를 바탕으로 OpenDesign이 작성한 원본 요약입니다. 저장소 스타는 특정 시점의 인기 지표이며 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 질문

모든 머티리얼이 빛에 반응하나요?

아니요. MeshBasicMaterial은 비조명 머티리얼로 소개됩니다.

physical 머티리얼은 언제 유용한가요?

소스는 clearcoat, transmission, sheen 및 관련 고급 효과에 이를 사용합니다.

머티리얼을 재사용하면 드로 콜이 자동으로 합쳐지나요?

그렇게 가정하지 마세요. 리소스 재사용과 실제 드로 동작은 별도로 프로파일링해야 합니다.

OpenDesign

다음 디자인 반복을 위한 공간을 마련하세요.

브리프, 소스 자료, 디자인 작업을 로컬 작업 공간에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

업스트림 소스 파일
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-materials/SKILL.md