HTML5 3D 옷 스윙 애니메이션 특수 효과_html5 튜토리얼 기술-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5 3D 옷 스윙 애니메이션 특수 효과_html5 튜토리얼 기술

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:45 PM

3dhtml5

HTML5 Canvas를 기반으로 한 또 하나의 3D 애니메이션 명작입니다. 바람에 펄럭이는 3D 옷 스윙 애니메이션 특수 효과로 매우 사실적입니다. 옷 위에 마우스를 올리면 옷이 흔들리는 애니메이션이 나타납니다. 마우스를 클릭하면 옷이 더욱 심하게 흔들리게 됩니다.

온라인 데모 소스 코드 다운로드

HTML 코드

XML/HTML 코드클립보드에 콘텐츠 복사

div 스타일="너비:500px;여백 :10px 자동">
캔버스 id="cv" 너비="480" 높이="300">캔버스>
p>"2D 캔버스의 3D" 데모피>
p>커서를 이동하여 이동 / 클릭하여 스윙< ;/피>
div>

주로 3D 효과를 처리하는 데 사용되는 P3D 라이브러리 JS 코드

JavaScript 코드클립보드에 콘텐츠 복사

window.P3D = {
텍스처: null,
g: null
};
P3D.clear = 함수(f, w, h) {
var g = 이것.g;
g.beginPath();
g.fillStyle = f;
g.fillRect(0, 0, w, h);
}
P3D.num_cmp = 함수(a,b){반환 a-b;}
P3D.drawTriangle = 함수(poss, uvs, shade_clr) {
var w = 이것.texture.width;
var h = 이것.texture.height;
var g = 이것.g;
var vAd = [ poss[1].x - poss[0].x , poss[1].y - poss[0].y ] ;
var vBd = [ poss[2].x - poss[0].x , poss[2].y - poss[0].y ] ;
var vA = [ uvs[1].u - uvs[0].u , uvs[1].v - uvs[0].v ] ;
var vB = [ uvs[2].u - uvs[0].u , uvs[2].v - uvs[0].v ] ;
vA[0] *= w;
vA[1] *= h;
vB[0] *= w;
vB[1] *= h;
var m = new M22();
m._11 = vA[0];
m._12 = vA[1];
m._21 = vB[0];
m._22 = vB[1];
var im = m.getInvert();
if (!im) return false;
var a = im._11 * vAd[0] im._12 * vBd[0];
var b = im._21 * vAd[0] im._22 * vBd[0];
var c = im._11 * vAd[1] im._12 * vBd[1];
var d = im._21 * vAd[1] im._22 * vBd[1];
var wu = uvs[0].u * w;
var hv = uvs[0].v * h;
var du = wu * a hv * b;
var dv = wu * c hv * d;
g.save();
g.beginPath();
g.moveTo(poss[0].x, poss[0].y);
g.lineTo(poss[1].x, poss[1].y);
g.lineTo(poss[2].x, poss[2].y);
g.clip();
g.transform(a, c, b, d, poss[0].x - du, poss[0].y - dv);
// 경계
var bx = [wu, wu vA[0], wu vB[0]];
var by = [hv, hv vA[1], hv vB[1]];
bx.sort(P3D.num_cmp);
by.sort(P3D.num_cmp);
var bw = bx[2] - bx[0];
var bh = by[2] - by[0];
if ((bx[0] bw)
if ((by[0] bh)
if (bx[0] >= 1) {bx[0]--; bw ;}
if (by[0] >= 1) {by[0]--; bh ;}
g.drawImage(이것.texture, bx[0], by[0], bw, bh, bx[0], by[0], bw, bh);
if (shade_clr) {
g.fillStyle = shade_clr;
g.fillRect(bx[0], by[0], bw, bh);
}
g.restore();
반환 참;
}
P3D.drawTestByIndexBuffer = 함수(pos_buf, ix_buf, 컬링) {
var g = 이것.g;
if ((ix_buf.length%3) != 0)
throw "잘못된 인덱스 버퍼 길이!";
var len = ix_buf.length/3;
var i, ibase, vbase;
var poss = [{},{},{}];
g.StrokeWidth = 1;
(i = 0, ibase = 0;i
{
vbase = ix_buf[ibase ]
poss[0].x = pos_buf[vbase ];
poss[0].y = pos_buf[vbase ];
vbase = ix_buf[ibase ]
poss[1].x = pos_buf[vbase ];
poss[1].y = pos_buf[vbase ];
vbase = ix_buf[ibase ]
poss[2].x = pos_buf[vbase ];
poss[2].y = pos_buf[vbase ];
// 외적의 z 구성요소
var Ax = poss[1].x - poss[0].x;
var Ay = poss[1].y - poss[0].y;
var Cx = poss[2].x - poss[1].x;
var Cy = poss[2].y - poss[1].y;
var 추출 = ( (((Ax * Cy) - (Ay * Cx))*추출)
g.beginPath();
g.StrokeStyle = 컬링 ? "#592" : "#0f0";
g.moveTo(poss[0].x, poss[0].y);
g.lineTo(poss[1].x, poss[1].y);
g.lineTo(poss[2].x, poss[2].y);
g.lineTo(poss[0].x, poss[0].y);
g.Stroke();
}
}
P3D.drawByIndexBuffer = 함수(pos_buf, ix_buf, tx_buf, culling, z_clip) {
var w, h;
var color_polygon = !this.texture;
if (this.texture) {
w = 이것.texture.width;
h = 이것.texture.height;
}
var g = 이것.g;
var m = new M22();
if (!culling) 컬링 = 0;
if ((ix_buf.length%3) != 0)
throw "잘못된 인덱스 버퍼 길이!";
var i, ibase, vbase, tbase, poss = [{},{},{}];
var len = ix_buf.length/3;
var uv_0u, uv_0v, uv_1u, uv_1v, uv_2u, uv_2v;
(i = 0, ibase = 0;i
{
tbase = ix_buf[ibase ]
vbase = tbase
poss[0].x = pos_buf[vbase ]; uv_0u = tx_buf[tbase ];
poss[0].y = pos_buf[vbase ]; uv_0v = tx_buf[tbase];
if (z_clip && (pos_buf[vbase] 1)) {ibase = 2; 계속;}
tbase = ix_buf[ibase ]
vbase = tbase
poss[1].x = pos_buf[vbase ]; uv_1u = tx_buf[tbase ];
poss[1].y = pos_buf[vbase ]; uv_1v = tx_buf[tbase];
if (z_clip && (pos_buf[vbase] 1)) { ibase; 계속;}
tbase = ix_buf[ibase ]
vbase = tbase
poss[2].x = pos_buf[vbase ]; uv_2u = tx_buf[tbase ];
poss[2].y = pos_buf[vbase ]; uv_2v = tx_buf[tbase];
if (z_clip && (pos_buf[vbase] 1)) {계속;}
var vAd = [ poss[1].x - poss[0].x , poss[1].y - poss[0].y ] ;
var vBd = [ poss[2].x - poss[0].x , poss[2].y - poss[0].y ] ;
var vCd = [ poss[2].x - poss[1].x , poss[2].y - poss[1].y ] ;
// 외적의 z 구성요소
if( (((vAd[0] * vCd[1]) - (vAd[1] * vCd[0]))*추출) < ; 0)
계속;
if (color_polygon) {
g.fillStyle = uv_0u;
g.beginPath();
g.moveTo(poss[0].x, poss[0].y);
g.lineTo(poss[1].x, poss[1].y);
g.lineTo(poss[2].x, poss[2].y);
g.fill();
계속;
}
var vA = [ uv_1u - uv_0u , uv_1v - uv_0v ];
var vB = [ uv_2u - uv_0u , uv_2v - uv_0v ];
vA[0] *= w;
vA[1] *= h;
vB[0] *= w;
vB[1] *= h;
m._11 = vA[0];
m._12 = vA[1];
m._21 = vB[0];
m._22 = vB[1];
var im = m.getInvert();
if (!im) { 계속;}
var a = im._11 * vAd[0] im._12 * vBd[0];
var b = im._21 * vAd[0] im._22 * vBd[0];
var c = im._11 * vAd[1] im._12 * vBd[1];
var d = im._21 * vAd[1] im._22 * vBd[1];
var wu = uv_0u * w;
var hv = uv_0v * h;
var du = wu * a hv * b;
var dv = wu * c hv * d;
g.save();
g.beginPath();
g.moveTo(poss[0].x, poss[0].y);
g.lineTo(poss[1].x, poss[1].y);
g.lineTo(poss[2].x, poss[2].y);
g.clip();
g.transform(a, c, b, d, poss[0].x - du, poss[0].y - dv);
// 경계
var bx = [wu, wu vA[0], wu vB[0]];
var by = [hv, hv vA[1], hv vB[1]];
bx.sort(P3D.num_cmp);
by.sort(P3D.num_cmp);
var bw = bx[2] - bx[0];
var bra = by[2] - by[0];
if ((bx[0] bw)
if ((by[0] bra)
if (bx[0] >= 1) {bx[0]--; bw ;}
if (by[0] >= 1) {by[0]--; 브래지어 ;}
g.drawImage(이것.texture, bx[0], by[0], bw, bh, bx[0], by[0], bw, 브래지어);
/*
if (shade_clr) {
g.fillStyle = shade_clr;
g.fillRect(bx[0], by[0], bw, bh);
}
*/
g.restore();
}
}
함수 Vec3(_x, _y, _z)
{
이것.x = _x || 0;
이것.y = _y || 0;
이것.z = _z || 0;
}
Vec3.prototype = {
0: 함수() {
이것.x = 이것.y = 이것.z = 0;
},
하위: 기능(v) {
이것.x -= v.x;
이것.y -= v.y;
이것.z -= v.z;
반품 이것;
},
추가: 기능(v) {
이것.x = v.x;
이것.y = v.y;
이것.z = v.z;
반품 이것;
},
copyFrom: 기능(v) {
이것.x = v.x;
이것.y = v.y;
이것.z = v.z;
반품 이것;
},
표준:기능() {
return Math.sqrt(this.x*this.x 이것.y*이것.y 이것.z *이것.z);
},
정규화: 함수() {
var nrm = Math.sqrt(this.x*this.x 이것.y*이것.y 이것 .z*이것.z);
if (nrm != 0)
{
이것.x /= nrm;
이것.y /= nrm;
이것.z /= nrm;
}
반품 이것;
},
smul: 기능(k) {
이것.x *= k;
이것.y *= k;
이것.z *= k;
반품 이것;
},
dpWith: 기능(v) {
반환 이것.x*v.x 이것. y*v.y 이것.z*v.z;
},
cp: 기능(v, w) {
이것.x = (w.y * v.z) - (w.z * v.y);
이것.y = (w.z * v.x) - (w.x * v.z);
이것.z = (w.x * v.y) - (w.y * v.x);
반품 이것;
},
toString: 함수() {
반품 이것.x ", " 이.y "," 이.z;
}
}
기능 M44(cpy)
{
if (cpy)
이것.copyFrom(cpy);
그밖에 {
이것.ident();
}
}
M44.prototype = {
식별자: 함수() {
이것._12 = 이것._13 = 이것._14 = 0;
이것._21 = 이것._23 = 이것._24 = 0;
이것._31 = 이것._32 = 이것._34 = 0;
이것._41 = 이것._42 = 이것._43 = 0;
이것._11 = 이것._22 = 이것._33 = 이것._44 = 1;
반품 이것;
},
copyFrom: 기능(m) {
이것._11 = m._11;
이것._12 = m._12;
이것._13 = m._13;
이것._14 = m._14;
이것._21 = m._21;
이것._22 = m._22;
이것._23 = m._23;
이것._24 = m._24;
이것._31 = m._31;
이것._32 = m._32;
이것._33 = m._33;
이것._34 = m._34;
이것._41 = m._41;
이것._42 = m._42;
이것._43 = m._43;
이것._44 = m._44;
반품 이것;
},
transVec3: 함수(out, x, y, z) {
out[0] = x * 이것._11 y * 이것._21 z * 이것._31 이것._41;
out[1] = x * 이것._12 y * 이것._22 z * 이것._32 이것._42;
out[2] = x * 이것._13 y * 이것._23 z * 이것._33 이것._43;
out[3] = x * 이것._14 y * 이것._24 z * 이것._34 이것._44;
},
transVec3Rot: 함수(out, x, y, z) {
out[0] = x * 이것._11 y * 이것._21 z * 이것._31;
out[1] = x * 이것._12 y * 이것._22 z * 이것._32;
out[2] = x * 이것._13 y * 이것._23 z * 이것._33;
},
perspectiveLH: 기능(vw, vh, z_near, z_far) {
이것._11 = 2.0*z_near/vw;
이것._12 = 0;
이것._13 = 0;
이것._14 = 0;
이것._21 = 0;
이것._22 = 2*z_near/vh;
이것._23 = 0;
이것._24 = 0;
이것._31 = 0;
이것._32 = 0;
이것._33 = z_far/(z_far-z_near);
이것._34 = 1;
이것._41 = 0;
이것._42 = 0;
이것._43 = z_near*z_far/(z_near-z_far);
이것._44 = 0;
반품 이것;
},
lookAtLH: 기능(aUp, aFrom, aAt) {
var aX = new Vec3();
var aY = new Vec3();
var aZ = new Vec3(aAt.x, aAt.y, aAt.z);
aZ.sub(aFrom).normalize();
aX.cp(aUp, aZ).normalize();
aY.cp(aZ, aX);
이것._11 = aX.x; 이것._12 = aY.x; 이것._13 = aZ.x; 이것._14 = 0;
이것._21 = aX.y; 이것._22 = aY.y; 이것._23 = aZ.y; 이것._24 = 0;
이것._31 = aX.z; 이것._32 = aY.z; 이것._33 = aZ.z; 이것._34 = 0;
이것._41 = -aFrom.dpWith(aX);
이것._42 = -aFrom.dpWith(aY);
이것._43 = -aFrom.dpWith(aZ);
이것._44 = 1;
반품 이것;
},
mul: 기능(A, B) {
이것._11 = A._11*B._11 A._12*B._21 A._13*B._31 A._14*B._41 ;
이것._12 = A._11*B._12 A._12*B._22 A._13*B._32 A._14*B._42 ;
이것._13 = A._11*B._13 A._12*B._23 A._13*B._33 A._14*B._43 ;
이것._14 = A._11*B._14 A._12*B._24 A._13*B._34 A._14*B._44 ;
이것._21 = A._21*B._11 A._22*B._21 A._23*B._31 A._24*B._41 ;
이것._22 = A._21*B._12 A._22*B._22 A._23*B._32 A._24*B._42 ;
이것._23 = A._21*B._13 A._22*B._23 A._23*B._33 A._24*B._43 ;
이것._24 = A._21*B._14 A._22*B._24 A._23*B._34 A._24*B._44 ;
이것._31 = A._31*B._11 A._32*B._21 A._33*B._31 A._34*B._41 ;
이것._32 = A._31*B._12 A._32*B._22 A._33*B._32 A._34*B._42 ;
이것._33 = A._31*B._13 A._32*B._23 A._33*B._33 A._34*B._43 ;
이것._34 = A._31*B._14 A._32*B._24 A._33*B._34 A._34*B._44 ;
이것._41 = A._41*B._11 A._42*B._21 A._43*B._31 A._44*B._41 ;
이것._42 = A._41*B._12 A._42*B._22 A._43*B._32 A._44*B._42 ;
이것._43 = A._41*B._13 A._42*B._23 A._43*B._33 A._44*B._43 ;
이것._44 = A._41*B._14 A._42*B._24 A._43*B._34 A._44*B._44 ;
반품 이것;
},
번역: 함수(x, y, z) {
이것._11 = 1; 이것._12 = 0; 이것._13 = 0; 이것._14 = 0;
이것._21 = 0; 이것._22 = 1; 이것._23 = 0; 이것._24 = 0;
이것._31 = 0; 이것._32 = 0; 이것._33 = 1; 이것._34 = 0;
이것._41 = x; 이것._42 = y; 이것._43 = z; 이것._44 = 1;
반품 이것;
},
transpose33: 함수() {
var t;
t = 이것._12;
이것._12 = 이것._21;
이것._21 = t;
t = 이것._13;
이것._13 = 이것._31;
이것._31 = t;
t = 이것._23;
이것._23 = 이것._32;
이것._32 = t;
반품 이것;
},
// OpenGL 스타일 회전
glRotate: 함수(각도, x, y, z) {
var s = Math.sin( angle );
var c = Math.cos( angle );
var xx = x * x;
var yy = y * y;
var zz = z * z;
var xy = x * y;
var yz = y * z;
var zx = z * x;
var xs = x * s;
var ys = y * s;
var zs = z * s;
var one_c = 1.0 - c;
/*
this._11 = (one_c * xx) c;
this._21 = (one_c * xy) - zs;
this._31 = (one_c * zx) ys;
이._41 = 0;
this._12 = (one_c * xy) zs;
this._22 = (one_c * yy) c;
this._32 = (one_c * yz) - xs;
이._42 = 0;
this._13 = (one_c * zx) - ys;
this._23 = (one_c * yz) xs;
this._33 = (one_c * zz) c;
이._43 = 0;

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

H5 : 웹 컨텐츠 및 디자인의 미래May 01, 2025 am 12:12 AM

H5 (HTML5)는 새로운 요소와 API를 통해 웹 컨텐츠와 디자인을 개선합니다. 1) H5는 시맨틱 태깅 및 멀티미디어 지원을 향상시킵니다. 2) 웹 디자인을 풍부하게하는 캔버스 및 SVG를 소개합니다. 3) H5는 새로운 태그와 API를 통해 HTML 기능을 확장하여 작동합니다. 4) 기본 사용에는이를 사용하여 그래픽 생성이 포함되며, 고급 사용량은 WebStorageapi와 관련이 있습니다. 5) 개발자는 브라우저 호환성 및 성능 최적화에주의를 기울여야합니다.

H5 : 웹 개발을위한 새로운 기능 및 기능Apr 29, 2025 am 12:07 AM

H5는 여러 가지 새로운 기능과 기능을 제공하여 웹 페이지의 상호 작용 및 개발 효율성을 크게 향상시킵니다. 1. Enhance SEO와 같은 시맨틱 태그. 2. 멀티미디어 지원은 오디오 및 비디오 재생 및 태그를 단순화합니다. 3. 캔버스 드로잉은 역동적 인 그래픽 드로잉 도구를 제공합니다. 4. 로컬 스토리지는 LocalStorage 및 SessionStorage를 통해 데이터 스토리지를 단순화합니다. 5. Geolocation API는 위치 기반 서비스의 개발을 용이하게합니다.

H5 : HTML5의 주요 개선Apr 28, 2025 am 12:26 AM

HTML5는 5 가지 주요 개선 사항을 제공합니다. 1. 시맨틱 태그는 코드 선명도 및 SEO 효과를 향상시킵니다. 2. 멀티미디어 지원은 비디오 및 오디오 임베딩을 단순화합니다. 3. 형태 향상은 검증을 단순화한다. 4. 오프라인 및 로컬 스토리지는 사용자 경험을 향상시킵니다. 5. 캔버스 및 그래픽 기능은 웹 페이지의 시각화를 향상시킵니다.

HTML5 : 표준과 웹 개발에 미치는 영향Apr 27, 2025 am 12:12 AM

HTML5의 핵심 기능에는 시맨틱 태그, 멀티미디어 지원, 오프라인 저장 및 로컬 스토리지 및 형태 향상이 포함됩니다. 1. 코드 가독성 및 SEO 효과를 향상시키는 시맨틱 태그 등. 2. 레이블로 멀티미디어 임베딩을 단순화하십시오. 3. ApplicationCache 및 LocalStorage와 같은 오프라인 스토리지 및 로컬 스토리지는 네트워크없는 작동 및 데이터 저장을 지원합니다. 4. 양식 향상은 처리 및 검증을 단순화하기 위해 새로운 입력 유형 및 검증 속성을 도입합니다.

H5 코드 예제 : 실제 응용 프로그램 및 튜토리얼Apr 25, 2025 am 12:10 AM

H5는 다양한 새로운 기능과 기능을 제공하여 프론트 엔드 개발 기능을 크게 향상시킵니다. 1. 멀티미디어 지원 : 미디어를 포함하고 요소를 포함하여 플러그인이 필요하지 않습니다. 2. 캔버스 : 요소를 사용하여 2D 그래픽 및 애니메이션을 동적으로 렌더링합니다. 3. 로컬 스토리지 : LocalStorage 및 SessionStorage를 통해 지속적인 데이터 저장을 구현하여 사용자 경험을 향상시킵니다.

H5와 HTML5 사이의 연결 : 유사성과 차이Apr 24, 2025 am 12:01 AM

H5 및 HTML5는 다른 개념입니다. HTML5는 새로운 요소 및 API를 포함하는 HTML의 버전입니다. H5는 HTML5를 기반으로 한 모바일 애플리케이션 개발 프레임 워크입니다. HTML5는 브라우저를 통해 코드를 구문 분석하고 렌더링하는 반면 H5 응용 프로그램은 컨테이너를 실행하고 JavaScript를 통해 기본 코드와 상호 작용해야합니다.

H5 코드의 빌딩 블록 : 주요 요소 및 그 목적Apr 23, 2025 am 12:09 AM

HTML5의 주요 요소에는 최신 웹 페이지를 작성하는 데 사용되는 ,,,,, 등이 포함됩니다. 1. 헤드 컨텐츠 정의, 2. 링크를 탐색하는 데 사용됩니다. 3. 독립 기사의 내용을 나타내고, 4. 페이지 내용을 구성하고, 5. 사이드 바 컨텐츠 표시, 6. 바닥 글을 정의하면, 이러한 요소는 웹 페이지의 구조와 기능을 향상시킵니다.

HTML5 및 H5 : 일반적인 사용법 이해Apr 22, 2025 am 12:01 AM

HTML5와 H5 사이에는 차이가 없으며, 이는 HTML5의 약어입니다. 1.HTML5는 HTML의 다섯 번째 버전으로 웹 페이지의 멀티미디어 및 대화식 기능을 향상시킵니다. 2.H5는 종종 HTML5 기반 모바일 웹 페이지 또는 응용 프로그램을 참조하는 데 사용되며 다양한 모바일 장치에 적합합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.