Mesh 201 자습서 2장: 공유하지 않는 로컬 HTML 파일을 WebSlate에 로드
이제 모두 설정되었고 프로젝트를 사용해 볼 기회가 있으므로 WebSlates에서 웹 콘텐츠를 스크립팅해 보겠습니다. WebSlate는 기본적으로 큰 대화형 화면입니다. 이를 사용하여 대시보드, 웹 페이지, 사진 및 비디오를 보거나 지도, 다이어그램 및 데이터와 상호 작용할 수 있습니다. 스테이션 1에서는 공유하지 않는 로컬 HTML 파일을 WebSlate에 로드합니다.
장면에 WebSlate 추가
StartingPoint 장면을 엽니다.
장면 창에서 앞에 배치되어 있고 아래 그림과 같은 스테이션 1을 보고 있는지 확인합니다.
스테이션에는 설명이 포함된 텍스트와 로드 단추가 있는 개체가 이미 있습니다. 단추 아래에 WebSlate를 추가한 다음 사용자가 단추를 클릭하면 공유하지 않는 HTML 파일이 WebSlate에 로드되도록 로드 단추에 연결된 스크립트 그래프를 업데이트하여 스테이션을 완료합니다.
추가 및/또는 작업할 모든 WebSlates는 MeshWebSlates GameObject의 계층 구조 내에 포함됩니다.
필요한 경우 Hierarchy에서 staticSceneObjects 개체를 축소합니다.
MeshWebSlates를 확장한 다음, 1 - LocalWebslate라는 자식 개체를 확장합니다.
프로젝트 창에서 WebSlateFramed 프리팹을 검색합니다. 검색 필터의 전체 또는 패키지에서 선택해야 합니다.
프로젝트 창에서 WebSlateFramed를 끌어온 다음 계층 구조에서 2- LocalWebslate 및 ChapterLabel 사이의 공간에 놓아 2의 첫 번째 자식 개체인 LocalWebSlate입니다.
이제 WebSlate가 장면에 있지만 원하는 크기나 위치가 없습니다.
이를 변경해봅시다.
계층 구조에서 WebSlateFramed가 선택되어 있는지 확인하고 검사기에서 Transform 구성 요소의 배율 값을 다음으로 업데이트합니다.
배율: X = 2.5, Y = 1.5, Z = 1
이것이 훨씬 낫네요!
WebSlate의 URL 변경
계층 구조에서 WebSlateFramed 프리팹을 확장합니다.
WebSlate라는 WebSlateFramed의 자식 개체를 선택합니다.
검사기에서 WebSlate 구성 요소로 이동하여 현재 URL 속성(WebSlate의 기본 URL)이 모든 Microsoft의 홈페이지로 설정되어 있는지 확인합니다.
Microsoft Mesh의 홈페이지를 가리키도록 URL을 변경해 보겠습니다.
현재 URL 텍스트 상자의 URL 끝에 "mesh"를 추가합니다.
단추 스크립트 열기
계층에서 ChapterLabel을 확장한 다음 작업을 확장한 다음 LoadButton을 선택합니다.
검사기에서 "LOAD HTML"이라는 이름의 LoadButton을 볼 수 있습니다. 구성 요소의 원본 속성이 Graph로 설정되고 "LoadButtonLocalStart"라는 스크립트 자산 파일에 연결됩니다. LoadButton GameObject에는 스크립트에서 사용할 변수도 있습니다.
팁
스크립트의 Source 속성에는 그래프 및 포함의 두 가지 옵션이 있습니다. 각각에는 장점과 단점이 있습니다. Unity 스크립트 머신 문서에서 자세히 알아볼 수 있습니다. 메시 클라우드 스크립팅에 연결할 때 이 "원본" 형식이 더 유연하기 때문에 여기서 Graph 옵션을 사용합니다.
스크립트 컴퓨터 구성 요소에서 그래프 편집 단추를 클릭합니다.
프로젝트 및 콘솔 탭 옆에 스크립트 그래프 창을 대기합니다. 해당 탭을 클릭하여 내용을 확인합니다.
팁: 스크립트 그래프 창에서 공간을 더 확보하려면 3점 단추를 클릭한 다음 최대화(Maximize)를 선택하거나 창의 오른쪽 위 모서리에 있는 전체 화면 단추를 클릭할 수 있습니다.
중요: 스크립트의 두 번째 노드 이름은 Mesh Interactable Body: Is Selected Locally입니다. 사용할 수 있는 두 개의 "메시 상호 작용 가능한 본문" 노드가 있습니다. 이러한 노드를 사용하면 상호 작용 이벤트와 같은 Visual Scripting과 Mesh 상호 작용 가능 개체를 사용하거나 시각적 스크립트를 통해 매니풀 가능한 대상 변환을 수정할 수 있습니다. 이벤트를 트리거하는 사용자만 이벤트를 경험하도록 하려면 "로컬로 선택됨"이라는 노드를 사용합니다. 이벤트의 모든 참석자가 이를 경험하도록 하려면 "선택됨"이라고만 표시된 노드를 선택합니다. 아래 이미지의 차이점을 참조하세요. 각 노드 위의 텍스트는 동작을 확인하는 데 도움이 될 수 있습니다.
.
현재 스크립트에서는 "로컬로 선택됨"과 함께 노드를 사용합니다. 즉, 참석자가 로드 단추를 클릭하면 연결된 WebSlate에 로드되는 새 HTML 페이지만 표시됩니다.
WebSlate 개체 변수 만들기
스크립트 그래프가 이미 시작되었습니다. 스테이션 1에서 로드 단추를 사용하여 HTML 페이지를 로드 하는 데 필요한 작업을 완료합니다.
가장 먼저 해야 할 일은 WebSlateFramed GameObject의 자식인 WebSlate GameObject 값이 있는 개체 변수를 만드는 것입니다.
- 새 변수 이름 필드에 "WebSlate"라는 이름을 입력한 다음 Enter 키를 누릅니다.
.
- 형식 드롭다운을 클릭한 다음 검색하여 "WebSlate"를 선택합니다.
.
- 계층 구조에서 WebSlate GameObject를 끌어 새 변수의 값 필드에 놓습니다.
.
HTML 페이지 가져오기
If 노드의 제어 출력 포트를 클릭한 다음 오른쪽으로 끌어옵니다. 그러면 유사 항목 찾기가 열립니다. 경고: 유사 항목 찾기를 열면 Unity 인터페이스 외부의 아무 곳이나 클릭하지 마세요. 이렇게 하면 유사 항목 찾기가 닫히고 스크립트 그래프에서 예측할 수 없는 동작이 발생합니다.
유사 항목 찾기에서 "웹 슬레이트: HTML 콘텐츠 로드(Html 자산)"를 검색한 다음 선택합니다. 이름이 매우 유사한 두 개의 노드가 있습니다.
Html 콘텐츠가 아니라 Html 자산이라는 것을 원합니다.
새로 만든 WebSlate 개체 변수를 끌어온 다음 생성되는 노드를 HTML 콘텐츠 로드 노드의 위쪽과 왼쪽에 놓습니다.
개체 변수 가져오기 노드의 데이터 출력 포트를 HTML 콘텐츠 로드 노드의 첫 번째 데이터 입력 포트에 연결합니다.
스크립트 그래프의 변수 가져오기 노드에 로드하려는 웹 페이지가 이미 있습니다. 변수 가져오기 노드의 데이터 출력 포트에서 커넥터를 끌어서 HTML 콘텐츠 로드 노드의 데이터 입력 포트에 연결합니다.
작업 테스트
Unity에서 프로젝트를 저장합니다.
경고: 현재 프로젝트에 저장하면 정보 텍스트 상자의 텍스트가 사라질 수 있는 버그가 있습니다.
재생 모드로 전환하면 텍스트가 다시 나타납니다. 다른 역을 통해 작업할 때 이 점을 염두에 두어야 합니다.
Unity 편집기 재생 단추를 누릅니다.
스테이션 1 앞에 배치하고 WebSlate에 Microsoft Mesh 홈페이지가 표시됩니다.
로드 단추를 클릭합니다. WebSlate는 스크립트 그래프에서 연결한 변수에서 "헬로 월드"이라는 페이지를 로드하고 표시합니다.
이 페이지는 단추의 스크립트 그래프에 있는 HTMLAsset 변수에서 가져옵니다.
팁: 스크립트 작동 방식에 대한 추가 인사이트를 얻으려면 [로드] 단추를 클릭할 때 스크립트 그래프에서 확인합니다. 노드 간의 커넥터는 정보 팁과 애니메이션을 표시합니다.
완료되면 Unity 편집기 재생 단추를 클릭하여 재생 모드를 종료합니다.