小红砖 | 前端三维库之视图类(二)

原创
小红砖  前端三维库之视图类二

初始化主应用


接口说明

初始化主应用。


传入参数说明
名称描述类型必填示例
options入参object{}
options.host接口请求地址。默认是https:webapi.bos.xyzstring{host: 'https:webapi.bos.xyz'}
options.modelKey模型的keystring{modelKey: '16325014'}
options.devcode开发密钥string{devcode: 'devcode'}
options.viewport视图渲染的相关信息。默认是{}object{viewport: {}}
options.viewport.el渲染标签的id。默认是viewportstring{viewport: {el: 'viewport'}}
options.viewport.width渲染标签的宽度。默认是浏览器的宽度number{viewport: {width: 100}}
options.viewport.height渲染标签的高度。默认是浏览器的高度number{viewport: {heihgt: 100}}
options.viewport.autoUpdate浏览器窗口大小变化,是否自动刷新渲染标签的大小。默认是trueboolean{viewport: {autoUpdate: true}}
options.toolbar工具栏入参object{toolbar: {}}
options.toolbar.list开启工具栏功能配置。功能有'home'、'reset'、'roam'、'focus'、'select'、'hide'、'hide'、'isolate'、'color'、'sectioning'、'decompose'、'wire'、'setup'、'tree'、'attribute'、'measure'、'mark'、'snaphoot'array{toolbar: {list: ['home', 'reset']}}

返回参数说明
名称描述类型示例
app主应用的实例object

使用示例
Xhz.init(function(){
  var options = {
    modelKey: '163225014',
    devcode: 'devcode',
    viewport:
      autoUpdate: true
    }
  };
  var app = new Xhz.App(options);
);


视图类属性、操作


获取视图类实例

接口说明

获取视图类实例。


返回参数说明
名称描述类型示例
viewview的实例object

使用示例
var view = app.view;


渲染视图

接口说明

渲染视图


使用示例
view.render();

相关示例

点击进入示例库 阴影


视图缩放到包围盒大小

接口说明

将视图缩放到指定包围盒大小。


传入参数说明
名称描述类型必填示例
componentConfig入参object{}
componentConfig.keys构件的keyarray{keys: ['10001']}
componentConfig.zoom包围盒缩放比例。默认是0。当zoom > 0 模型缩小(包围盒变大),当zoom < 0 模型放大(包围盒变小)。number{zoom: 0}
componentConfig.zoom包围盒缩放比例。默认是0。当zoom > 0 模型缩小(包围盒变大),当zoom < 0 模型放大(包围盒变小)。number{zoom: 0}

使用示例
view.zoomToBox({keys: ['16325014_0eCIN5ePn2fBb7wECajS9F'], zoom: 2, strech: 100});


视图缩放到选中构件大小

接口说明

将视图缩放到选中构件的大小。


传入参数说明
名称描述类型必填示例
keys构件的key,不传时则缩放到模型大小。array['10001']

使用示例
view.zoomToSelected();

相关示例

点击进入示例库 构件聚焦


背景色

接口说明

设置场景的背景色。


传入参数说明
名称描述类型必填示例
color色值string'#f2f2f2'

使用示例
view.setSceneBackground('#f2f2f2');

相关示例

点击进入示例库 修改背景颜色


场景的尺寸

接口说明

设置场景的尺寸。


传入参数说明
名称描述类型必填示例
width场景宽度。默认值是浏览器宽度。number100
height场景宽度。默认值是浏览器高度。number100

使用示例
view.setSceneSize(100, 100);


重置视图

接口说明

重置视图。


传入参数说明
名称描述类型必填示例
sceneConfig入参object{}
sceneConfig.visible复位构件的可见性。true-是,false-否。默认是false。boolean{visible: true}
sceneConfig.highlight复位构件的高亮列表。true-是,false-否。默认是false。boolean{highlight: true}
sceneConfig.transparent复位构件的半透明列表。true-是,false-否。默认是false。boolean{transparent: true}
sceneConfig.color复位构件的颜色。true-是,false-否。默认是false。boolean{color: true}
sceneConfig.perspective复位视角。true-是,false-否。默认是false。boolean{perspective: true}

使用示例
view.resetScene({ highlight: true });

相关示例

点击进入示例库 设置高亮


打开网页全屏

接口说明

打开网页全屏。


传入参数说明
名称描述类型必填示例
domIddom标签的idstring'#viewport'

使用示例
view.openFullScreen('#viewport');


关闭网页全屏

接口说明

关闭网页全屏。


使用示例
view.closeFullScreen();


获取网页全屏标签

接口说明

获取网页全屏标签。


返回参数说明
名称描述类型示例
dom网页是否处于全部状态。true-是 false-否booleantrue

使用示例
var dom = view.getFullScreenDom();


判断全屏状态

接口说明

判断当前是否处于全屏状态


返回参数说明
名称描述类型示例
status网页是否处于全屏状态。true-是 false-否booleantrue

使用示例
var status = iew.isFullScreen();


获取标签实现网页全屏的方法

接口说明

获取标签实现网页全屏的方法。


传入参数说明
名称描述类型必填示例
domIddom标签的idstring'#viewport'

返回参数说明
名称描述类型示例
func实现网页全屏的方法function | undefinedundefined

使用示例
var func = view.getFullScreenFunc('#viewport');


监听网页全屏状态变化

接口说明

监听网页全屏查看状态发生变化的事件


传入参数说明
名称描述类型必填示例
eventType事件类型string'fullscreenChange'
callback回调函数functionfunction(event) {}

使用示例
view.on('fullscreenChange', function(event) {});


渲染天空盒背景

接口说明

渲染天空盒背景


传入参数说明
名称描述类型必填示例
textureCubeThree.js中的正方体材质加载器object

使用示例
const textureCube = new THREE.CubeTextureLoader().setPath( './images/').load(['negx.jpg', 'posx.jpg', ''posz.jpg, 'negz.jpg', 'posy.jpg', 'negy.jpg']);
view.setSkybox(textureCube);


获取场景对象

接口说明

获取场景对象


返回参数说明
名称描述类型示例
scenebos3d 中的场景对象object

使用示例
var scene = view.getScene();

相关示例

点击进入示例库 构件移动消失


相关文章

小红砖 | 前端三维库你不知道的那些事儿(一)

小红砖 | 前端三维库之模型类(二)

小红砖 | 前端三维库之构件类(二)

小红砖 | 前端三维库之相机类(二)

小红砖 | 前端三维库之标签类(二)

小红砖 | 前端三维库之系统类(二)

小红砖 | 前端三维库你不知道的那些事儿(三)

赞赏
0 点赞
评论
举报

评论区

不超过500字