자바스크립트를 사용하여 모델 및 모델 항목 변환하기
이 경험을 사용하면 응용 프로그램 매개변수를 관찰하고 매개변수 변경 시 작업을 수행할 수 있습니다.
1. ThingWorx Studio를 엽니다.
2. 내 프로젝트 페이지에서 상단 오른쪽 코너의 녹색 + 기호를 클릭하여 새 프로젝트를 만듭니다.
3. 프로젝트 만들기 페이지에서 프로젝트 이름 필드에 프로젝트의 이름을 입력하고 서버 필드에 사용자의 experience service URL을 입력합니다.
4. 프로젝트 유형으로 AR을 선택하고 만들기를 클릭합니다.
5. 3D 캔버스에서 모델 위젯을 캔버스로 드래그 앤 드롭합니다.
6. 세부 정보 창에서 리소스 필드 옆의 녹색 + 기호를 클릭하여 리소스 파일을 추가합니다.
|
|
이 자습서에서는 blue_pump.pvz 파일을 사용할 것입니다.
|
7. 이제 모델 항목 위젯을 모델로 드래그 앤 드롭합니다.
8. 이제 2D 단추 세 개를 추가해 보겠습니다. 2D 캔버스 보기를 위해 캔버스 도구 모음에서 2D를 클릭합니다.
9. 세 단추 위젯을 가운데 패널 캔버스로 드래그 앤 드롭합니다.
◦ 첫 번째 단추의 텍스트 필드에 Move Model을 입력합니다.
◦ 두 번째 단추의 텍스트 필드에 Move Model Item을 입력합니다.
◦ 세 번째 단추의 텍스트 필드에 Reset을 입력합니다.
| 본 자습서에서는 단추 색상에 기본 제공되는 스타일을 적용했습니다. 자세한 내용은 테마 항목을 참조하십시오. |
10. Move Model 단추를 선택하여 속성을 확인합니다.
11. 세부 정보 창에서 클릭 이벤트 옆의 JS 아이콘을 클릭하고 moveModel();를 표현식 상자에 입력합니다.
이 단추를 클릭하면 moveModel 자바스크립트 함수가 실행됩니다.
12. Move Model Item 단추를 선택하여 속성을 확인합니다.
13. 세부 정보 창에서 클릭 이벤트 옆의 JS 아이콘을 클릭하고 moveModelItem();를 표현식 상자에 입력합니다.
이 단추를 클릭하면 moveModelItem 자바스크립트 함수가 실행됩니다.
14. 재설정 단추를 선택하여 속성을 확인합니다.
15. 세부 정보 창에서 클릭 이벤트 옆의 JS 아이콘을 클릭하고 reset();를 표현식 상자에 입력합니다.
이 단추를 클릭하면 reset 자바스크립트 함수가 실행됩니다.
16. 데이터 창에서 다음 두 개의 응용 프로그램 매개변수를 만듭니다.
◦ xCoordModel—모델의 X 좌표 값 제어
◦ zCoordModelItem—모델 항목의 Z 좌표 값 제어
17. 이제 바인딩을 생성합니다.
◦ 프로젝트 창의 model-1에 xCoordModel 응용 프로그램 매개변수를 드래그 앤 드롭합니다. 바인딩 대상 선택 창에서 X 좌표를 선택합니다.
◦ 프로젝트 창의 modelItem-1에 zCoordModelItem 응용 프로그램 매개변수를 드래그 앤 드롭합니다. 바인딩 대상 선택 창에서 Z 좌표를 선택합니다.
18. 프로젝트 창에서 Home.js를 클릭합니다. 자바스크립트 편집기에 다음을 입력합니다.
$scope.app.params.xCoordModel = 0;
$scope.app.params.zCoordModelItem = 0.198;
$scope.reset = function() {
$scope.app.params.xCoordModel = 0;
$scope.app.params.zCoordModelItem = 0.198;
};
$scope.moveModel = function() {
$scope.app.params.xCoordModel += 0.1;
};
$scope.moveModelItem = function() {
$scope.app.params.zCoordModelItem += 0.1;
};
19. 미리 보기를 클릭합니다. Move Model 단추를 클릭하면 전체 모델이 이동합니다. Move Model Item 단추를 클릭하면 모델 항목만 이동합니다.
상위 주제
