View and Data API Tips: how to make viewer full screen
By Daniel Du
If you have not heard of View and Data API, here is the idea, the View & Data API enables web developers to very easily display 3D (and 2D) models on a WebGL-enabled browser. please read this one first and get a key from http://developer.autodesk.com and start playing with the API. In this blog post, I will paste some code snippet of making the viewer into full screen mode. Hope it is helpful :
Following code snippet make the viewer full browser.
$('#btnFullBrowser').click(function () {
var vsmd = new Autodesk.Viewing.ViewerScreenModeDelegate(viewer);
var oldMode = vsmd.getMode();
console.log(oldMode);//kFullScreen, kFullBrowser, kNormal
if (vsmd.isModeSupported(Autodesk.Viewing.Viewer
.ScreenMode.kFullBrowser)) {
var newMode = Autodesk.Viewing.Viewer.ScreenMode.kFullBrowser;
vsmd.doScreenModeChange(oldMode, newMode)
//vsmd.setMode(newMode);
}
else {
console.log('ScreenMode.kFullBrowser not supported');
}
});
What exactly “full browser” means? it hides any other html elements and enlarges the viewer to make it fulfill the whole browser in current tab. For example, I have a test application like below, please note that I have a title in my application, and some buttons, also note that this application is just one of many browser tabs.
If you I click the ‘full browser ’ button to run following code snippet, here is what I get, the viewer is full of the current browser tab, actually my browser is just part of my desktop, I can see other windows like terminal window, my text editor window, etc. If I press “Escape” key, it returns to normal mode:
Following code demos making viewer full screen. With full screen mode, you will get an immersive experience, all other browser tabs and other windows are hidden, the viewer takes the whole screen, if you are doing a game or virtual reality application, like this one, you may want to use full screen mode.
$('#btnFullScreen').click(function () {
var vsmd = new Autodesk.Viewing.ViewerScreenModeDelegate(viewer);
var oldMode = vsmd.getMode();
console.log(oldMode);//kFullScreen, kFullBrowser, kNormal
if (vsmd.isModeSupported(Autodesk.Viewing.Viewer
.ScreenMode.kFullScreen)) {
var newMode = Autodesk.Viewing.Viewer.ScreenMode.kFullScreen;
vsmd.doScreenModeChange(oldMode, newMode)
//asmd.setMode(newMode);
}
else {
console.log('ScreenMode.kFullScreen not supported');
}
});
For more code samples, please go to our sample home page: https://developer-autodesk.github.io/
相关文章
- PowerShell-4.API调用以及DLL调用
- [windows菜鸟]Windows API函数大全(完整)
- ElasticSearch中profile API的使用
- 有道翻译 / 百度翻译Api
- 对一个前端使用AngularJS后端使用ASP.NET Web API项目的理解(2)
- Ubuntu宝塔面板设置网站 Apache Server API为Apache 2.0 Handler模式
- Solr7.4.0的API(Solrj)操作
- ASP.NET Web API 特性
- How to resolve CSRF protection error while adding service through Ambari api
- 一文带你了解Android音频API
- Bootstrap FileInput中文API整理
- How to set custom JsonSerializerSettings for Json.NET in MVC 4 Web API?
- 在Spark中自定义Kryo序列化输入输出API(转)
- ExtJs自学教程(1):一切从API開始
- API判断本机安装的Revit版本信息
- Revit Family API 添加对齐
- VS2015 define _WINSOCK_DEPRECATED_NO_WARNINGS to disable deprecated API warnings