Autodesk Forge는 Autodesk입니다.Viewing.Viewer 3D 레벨에서 얻은 다양한 활동을 처리할 수 있습니다.이번에는 Extensions로 불리는 기능 확장의 구조와 이벤트 처리에 대해 설명한다.

Extensions 정보

Extensions를 사용하면 Viewer 요소(Viewer에서 지정한 DIV 요소) 이외에 Viewer를 조작할 수 있습니다.
예를 들어, HTML 버튼에서 Viewer의 카메라 제어 Enable/Disable을 전환합니다.
기본 Extension 제작 방법으로 추가할 Extension 파일 만들기

Autodesk.Viewing.상속 Extension 클래스 만들기

boolen을 되돌려주는 load () 방법 정의

boolen을 되돌려주는 unload () 방법 정의

고유 ID로 자체 등록

이렇게 하면 실현할 수 있다.이번에는 Autodesk의 튜토리얼에 따라 Viewer 내의 객체 선택 상태와 탐색 도구의 상태를 얻는 Extension을 만들어 얻은 정보를 화면에 표시해 봅니다.

Viewer 준비

참고이전 항목 기본 속눈썹 만들기.Autodesk 자습서가 가장 간단합니다.

Viewer에서 Event의 Extension 제작 수신

우선 클라이언트가 참고할 수 있는 위치에서 이벤트handler입니다.js라는 파일을 만듭니다.(반명은 Event Tutorial)
eventhandler.js

function EventsTutorial(viewer, options) {
    Autodesk.Viewing.Extension.call(this, viewer, options);
}

EventsTutorial.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
EventsTutorial.prototype.constructor = EventsTutorial;

EventsTutorial.prototype.onNavigationModeEvent = function (event) {
    var domElem = document.getElementById('MyToolValue');
    domElem.innerText = event.id;
};

EventsTutorial.prototype.onSelectionEvent = function (event) {
    var currSelection = this.viewer.getSelection();
    var domElem = document.getElementById('MySelectionValue');
    domElem.innerText = currSelection.length;
};

EventsTutorial.prototype.load = function () {
    this.onSelectionBinded = this.onSelectionEvent.bind(this);
    this.onNavigationModeBinded = this.onNavigationModeEvent.bind(this);
    this.viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, this.onSelectionBinded);
    this.viewer.addEventListener(Autodesk.Viewing.NAVIGATION_MODE_CHANGED_EVENT, this.onNavigationModeBinded);
    return true;
};

EventsTutorial.prototype.unload = function () {
    this.viewer.removeEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, this.onSelectionBinded);
    this.viewer.removeEventListener(Autodesk.Viewing.NAVIGATION_MODE_CHANGED_EVENT, this.onNavigationModeBinded);
    this.onSelectionBinded = null;
    this.onNavigationModeBinded = null;
    return true;
};

Autodesk.Viewing.theExtensionManager.registerExtension('EventsTutorial', EventsTutorial);

중요한 것은 앞서 설명한 Autodesk입니다.Viewing.Extension을 확장한 학급을 제작하고 있다고 한다.프로타입 확장을 사용하여load와 unload 방법을 실현했습니다.onSelection Event, onnavigation Mode Event는 활성 처리 프로그램입니다.HTML 내 MyToolValue 요소, MySeke ctionValue 요소의 innerText 정보를 업데이트하고 있습니다.이 프로세서들은 load 방법 내의addeventListener에 등록되어 있지만 Extension을 마운트 해제할 때 프로세서의 등록을 해제하기 위해 설치를 열심히 하고 있습니다.
마지막으로 register Extension이 만든 반에 등록했다.첫 번째 파라미터는 호출할 때의 ID이지만 클래스 이름과 통일되지 않아도 상관없다.

디스플레이에 사용할 HTML 파일 업데이트

DIV 요소(MySelectionValue, MyToolValue)를 추가하여 Extension에 추가된 정보를 표시합니다.나는 Express 템플릿으로 만들었기 때문에 PUG의 기록이다.작성된 Extension의 JS 파일을 가져오는 것을 잊지 마십시오.
layout.pug

doctype html
html
  head
    title= title
    meta(name='viewport', content='width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no')
    link(rel='stylesheet', href='/stylesheets/main.css')
    link(rel='stylesheet', href='https://developer.api.autodesk.com/modelderivative/v2/viewers/style.min.css', type='text/css')

  body
    block content
    script(src='https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js')
    script(src='javascripts/viewer.js')
    script(src='javascripts/eventhandler.js')

index.pug

extends layout

block content
  div#Buttons
    button#MyAwesomeLockButton Lock it!
    button#MyAwesomeUnlockButton Unlock it!
  div#MyViewerDiv
  div.my-custom-ui
    div Items selected:
        span#MySelectionValue 0
    div Navigaton tool:
        span#MyToolValue Unknown

Viewer3D로 Extension 읽기

Viewer에 등록하는 것은registerViewer의 매개 변수에 위에서 지정한 Extension의 로그인 이름을 포함하는 목록입니다.목록에는 쉼표로 구분하여 Extentions를 추가하는 것 외에 상기 절차에 따라 자바스크립트 파일을 만들고 가져옵니다.간단하네.
viewer.js(발췌문)

var viewerApp;
var options = {
    env: 'AutodeskProduction',
    getAccessToken: function (onGetAccessToken) {
        var accessToken = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
        var expireTimeSeconds = 60 * 30;
        onGetAccessToken(accessToken, expireTimeSeconds);
    }
};
var documentId = 'urn:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

Autodesk.Viewing.Initializer(options, function onInitialized() {
    viewerApp = new Autodesk.Viewing.ViewingApplication('MyViewerDiv');
    // 追加のExtensionを指定
    var config3d = {
        extensions: ['EventsTutorial']
    };
    // Viewerに登録
    viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D, config3d);
    viewerApp.loadDocument(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
});

npm start 등을 통해 실행된 후 다음과 같습니다.화면에서 선택한 객체 수는 SELECTION -CHANGED_EVENT 스냅 디스플레이와 동시에 NAVIGATIONMODE_CHANGED_EVENT에서 화면 아래 탐색 도구 선택의 모드 이름을 가져와 표시합니다.

Viewer3D를 통해 얻을 수 있는 이벤트의 종류

벤츠Viewer3D Doc는 확인할 수 있지만 디스플레이와 관련된 상당히 작은 단계에서 활동할 수 있다.
이벤트 이름
설명
AGGREGATE_SELECTION_CHANGED_EVENT
다중 모델 컨텍스트에서 선택한 객체의 목록이 변경됩니다.
ANIMATION_READY_EVENT
animation 정확하게 초기화할 때 불이 나요.
CAMERA_CHANGE_EVENT
카메라가 변할 때 불이 난다
CUTPLANES_CHANGE_EVENT
Cutting planes 변경 시 발화
ESCAPE_EVENT
ESC 키를 눌렀을 때 발화
EXPLODE_CHANGE_EVENT
Explode tool 사용 시 언제든지 발화
EXTENSION_LOADED_EVENT
Viewer Extention 읽기 중 발화
EXTENSION_UNLOADED_EVENT
Viewer Extention이 Unload에 의해 발화됨
FINAL_FRAME_RENDERED_CHANGED_EVENT
Viewer가 표시할 프레임을 모두 표시할 때 불이 납니다. (늘어진 형상과 적용할 Effect 등이 없습니다.)
FIT_TO_VIEW_EVENT
조작 중 불이 나다
FRAGMENTS_LOADED_EVENT
fragments 요구에 따라 읽을 때 불이 납니다
FULLSCREEN_MODE_EVENT
화면 모드 변경 시 발화
GEOMETRY_LOADED_EVENT
Model/Dragon 읽기 종료 시 발화
HIDE_EVENT
Viwer 객체 숨기기 중 발화
HYPERLINK_EVENT
모형에 삽입된 하이퍼링크를 클릭하면 불이 납니다
ISOLATE_EVENT
Viewer가 대상을 격리할 때 불이 납니다. (보이지 않거나 높은osted 상태일 때)
LAYER_VISIBILITY_CHANGED_EVENT
2D 레이어의 Visuability 변경 시 발화
LOAD_MISSING_GEOMETRY
뷰에서 잃어버린 기하학적 변화를 볼 수 있을 것 같을 때 불이 나요.
MODEL_ROOT_LOADED_EVENT
초기 모형의 선언의 취득과 해석이 끝났을 때 불이 났다
MODEL_UNLOADED_EVENT
모형이 뷰어에 남겨졌을 때 불이 났어요.
NAVIGATION_MODE_CHANGED_EVENT
탐색 도구 변경 시 발화
OBJECT_TREE_CREATED_EVENT
인스턴스 트리 생성 성공 시 발화
OBJECT_TREE_UNAVAILABLE_EVENT
분석 인스턴스 트리 실패 시 발화
PREF_CHANGED_EVENT
사용자 성능 속성 변경 시 발화
PREF_RESET_EVENT
사용자 성능 속성 재설정 시 발화
PROGRESS_UPDATE_EVENT
Model/Draging이 읽히면 계속 불이 납니다(읽을 수 있는 비율)
RENDER_OPTION_CHANGED_EVENT
렌더링 옵션 변경 시 발화
RENDER_PRESENTED_EVENT
렌더기가 준비되었을 때 불이 납니다
RESET_EVENT
모형이 초기 상태로 재설정되었을 때 불이 났습니다
RESTORE_DEFAULT_SETTINGS_EVENT
UI를 사용하면 사용자가 기본 설정을 다시 시작할 때 화재가 발생합니다.기타 AutodeskViewing.PREF_CHANGED_EVENT 전체 소환 시 발화
SELECTION_CHANGED_EVENT
선택한 객체 변경 시 발화
SHOW_EVENT
뷰어가 객체 세트를 표시할 때 발화
TEXTURES_LOADED_EVENT
Model/Drawing의 무늬를 다운로드한 후 불이 났습니다.
TEXTURES_LOADED_EVENT
도구가 Activate/Deactivate 상태가 되면 불이 납니다.
VIEWER_INITIALIZED
Viewer 완전 초기화 후 발화
VIEWER_RESIZE_EVENT
Viewer 사이즈가 바뀌었을 때 불이 났어요.
VIEWER_STATE_RESTORED_EVENT
Viewer 상태 회복 중 발화
VIEWER_UNINITIALIZED
Viewer Unitalize 상태에서 발화