> For the complete documentation index, see [llms.txt](https://docs.hits.ai/docs-ko/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hits.ai/docs-ko/project-feature-ko/3d-viewer-1.md).

# 3D Viewer

3D Viewer를 통해 하이퍼 바인딩/디자인/스크리닝 계산 후 단백질-리간드의 3차원 결합 구조를 분석할 수 있습니다.

3D Viewer는 단백질-약물의 3차원 결합 구조 분석을 위한 다양한 기능을 제공합니다. 3D Viewer는다음 세 곳에서 열람할 수 있습니다.

1. **\[ My Bench ]** 탭 내 **\[ 분자 목록 ]** 탭 페이지
2. 분자 **\[ 상세보기 ]** 페이지
3. **\[ 하이퍼 디자인 ]** 페이지

#### 방법 1. \[ 분자 목록 ] 탭 페이지에서 열람하기

<figure><img src="https://1649178184-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy5VfWhOSeLc5bLACn0p2%2Fuploads%2FT5KOBn0beTvIoNNTRFjc%2Fimage.png?alt=media&amp;token=abf388e6-17fd-46d2-b88e-ace7beff2c6b" alt=""><figcaption></figcaption></figure>

위 그림과 같이 **\[ My Bench ]** 탭의 **\[ 분자 목록 ]** 탭에서 1번한 개이상의 분자를 선택하면 2번의 **\[ 3D View ]** 아이콘이 활성화 됩니다. 해당 아이콘을 누르면 3D Viewer 창이 열리게 됩니다.&#x20;

#### 방법 2. 분자 \[ 상세보기 ] 페이지에서 열람하기

<figure><img src="https://1649178184-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy5VfWhOSeLc5bLACn0p2%2Fuploads%2FBhDNfDhnRaeRxG4fejgT%2Fimage.png?alt=media&amp;token=30984a65-020d-46e9-89cc-e934bf55dd16" alt=""><figcaption></figcaption></figure>

두번째 방법은 **\[ 분자목록 ]** 창에서 **\[ 분자 상세보기 ]** 창으로 들어가서 3D Viewer로 진입하는 방법입니다.

목록에서 분자 목록 오른쪽 **\[ ... ]** 아이콘을 클릭한 후, **\[ 상세보기 ]**&#xB97C; 클릭하면 상세보기 창으로 넘어가게 됩니다.

<figure><img src="https://1649178184-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy5VfWhOSeLc5bLACn0p2%2Fuploads%2FLMN71zWgvSrOSnB1IoWd%2Fimage.png?alt=media&amp;token=e69a4bc6-ecdc-4bf8-b8a5-17983e818d81" alt=""><figcaption></figcaption></figure>

여기서 **\[ 3D structure ]** 옆  **\[ View ]** 아이콘을 클릭하면 3D Viewer 창이 열리게 됩니다.

#### 방법 3. 하이퍼 디자인 페이지에서 열람하기

<figure><img src="https://1649178184-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy5VfWhOSeLc5bLACn0p2%2Fuploads%2FZalmRDjg3LNvH99VUPT2%2Fimage.png?alt=media&amp;token=88a8c30a-9790-4d0a-a752-dcd725261440" alt=""><figcaption></figcaption></figure>

마지막 방법으로 하이퍼 디자인을 진행하는 경우, 위 그림과 같이 하이퍼 디자인 페이지로 넘어간 후 분자를 개별적으로 선택하거나(1번) 전체 선택(2번)을 체크하고 3번 **\[ 3D View ]** 아이콘을 클릭하여 3D Viewer 페이지를 열 수 있습니다.

다음으로 3D Viewer 페이지에 있는 기능들을 살펴보도록 하겠습니다.

<figure><img src="https://1649178184-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy5VfWhOSeLc5bLACn0p2%2Fuploads%2F7P4Xxk3xwTosRC1C5nDV%2Fimage.png?alt=media&amp;token=09800966-c515-48f4-8215-e3a198261d40" alt=""><figcaption></figcaption></figure>

1. 등록된 단백질 구조 이름
2. Receptor 정보 관련 탭
3. 결합 부위 표시 관련 탭
4. 원자 간 상호작용 관련 탭
5. 표시 가능 분자 목록 탭
6. 선택된 분자의 2D 그림
7. 페이지 배경색 설정 (Dark/Bright, 기본 배경색 Dark)
8. 3D Viewer 페이지 확장/축소 토글
9. 3D Viewer 닫기 토글
10. 왼쪽 탭 접기
11. 오른쪽 탭 접기
12. 3D Viewer 전체화면/창화면 토글

2번 Receptor 정보 관련 탭의 경우, 단백질을 등록할 때 Receptor로 지정한 부분들에 대한 표시 여부 탭으로, 단백질의 2차구조/골격부분/잔기정보/원자정보를 표기합니다. 2차 구조는 "Cartoon" 형식, 골격은 "Ribbon" 형식, 잔기 정보는 텍스트, 원자 정보는 아래 그림과 같이 박스 형식으로 3D 화면 오른쪽 아래에 표기됩니다.

<figure><img src="https://1649178184-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy5VfWhOSeLc5bLACn0p2%2Fuploads%2FTXdX6i8qZ1k3XWYeyYXo%2Fimage.png?alt=media&amp;token=7480021e-0add-44c2-97a1-0d92e671fdbc" alt=""><figcaption></figcaption></figure>

3번 Binding site 표시 관련 탭은 3D 창 내 binding site 주위 단백질 잔기 표현을 조절할 수 있습니다.

* **\[ Surface Near Clipping ]**: 3D 상 가장 화면에 가까이 있는 원자부터 3D창에서 숨김
* **\[ Surface Radius Clipping ]**: 3D 상 분자 구조 중심에서 가장 먼 원자부터 3D창에서 숨김
* **\[ Surface Opacity ]**: 단백질의 표면 투명도
* **\[ Pocket Radius ]**: 단백질 잔기 표시 반경
* **\[ Residues with ligand interaction ]**: 분자와 상호작용하는 잔기만 보기

4번 원자 간 상호작용 관련 탭은 단백질-분자 간 여러 상호작용 종류의 표시 여부를 고를 수 있는 탭입니다.

* **\[ Intra-receptor interactions ]**: 단백질 내부 상호작용 표시 여부
* **\[ Hydrophobic ]**(검은색): 소수성 상호작용
* **\[ Hydrogen Bond ]**(파란색): 수소 결합 (강한 기준)
* **\[ Weak Hydrogen Bond ]**(하늘색): 약한 수소 결합 (약한 기준)
* **\[ Backbone Hydrogen Bond ]**(남색): 단백질 골격 구조 간 수소 결합 (2차 구조 관련 수소 결합)
* **\[ Water Hydrogen Bond ]**(파란색): 물로 인해 발생하는 수소 결합
* **\[ Halogen Bond ]**(밝은 초록색): 할로겐 결합
* **\[ Metal Coordination ]**(보라색): 금속 배위 결합
* **\[ Ionic interaction ]**(노란색): 이온 결합
* **\[ Cation Pi ]**(주황색): 양이온-π 상호작용
* **\[ Pi Stacking ]**(녹색): π-적층 결합 (샌드위치, T-shape 포함)

5번 표시 가능 분자 목록 탭에는 각 분자마다 토글 가능한 두 개의 아이콘이 있습니다.&#x20;

<figure><img src="https://1649178184-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy5VfWhOSeLc5bLACn0p2%2Fuploads%2FBIyzMP3mRidtWcWnzhiq%2Fimage.png?alt=media&amp;token=b25b6b55-28ae-487a-890c-818cabe423e4" alt=""><figcaption></figcaption></figure>

돋보기 모양의 아이콘은 한번 클릭하면 아이콘이 파란색으로 바뀌며(활성화) 해당 분자를 중심으로 receptor와의 상호작용이 나타나게 됩니다. 한번 더 클릭하게 되면 다시 아이콘이 회색으로 바뀌며(비활성화) 전체 시스템 형상으로 줌아웃하게 됩니다.

눈동자 모양은 표시 여부에 대한 아이콘으로, 한번 클릭해 활성화하게 되면 3D 창에서 해당 분자가 표시 됩니다. 한번 더 클릭하게 되면 눈동자 옆에 자물쇠 모양이 추가되는데, 이는 기존 표시 상태와는 달리 다른 분자를 선택해도 분자 형상이 3D 창에 표시가 남아있게 됩니다.

이상 3D Viewer 툴에 대한 설명이었습니다.