小红砖 | 前端三维库你不知道的事（一）

来源于👉【 知屋安砖】

写在前面

小红砖开放平台最近更新前端三维库界面；
1、整体三维浏览界面
2、快速上手教程文案更新
3、新版示例库上新
4、模型对比功能界面优化
此篇仅为大家总结三位前端库全局属性、初始化主应用、接口调用及提示消息。因此此篇文章会很长~

项目初始化

接口说明

项目进行初始化，加载内部依赖资源。

传入参数说明

名称	描述	类型	必填	示例
func	初始化完毕后执行得回调函数	function	是	function(){}

返回参数说明

名称	描述	类型	示例
undefined	无返回值

使用示例

Xhz.init(function(){});

全局属性

视图控制器

属性说明

设置视图控制器是否显示，需要在初始化主应用之前使用。

属性值说明

名称	描述	类型
Xhz.attr.EnableViewController	true-显示，false-隐藏；默认值是true	Boolean

使用示例

Xhz.attr.EnableViewController = false;

相关示例库
构件旋转

控制初始视角

属性说明

设置用户是否控制初始视角，需要在初始化主应用之前使用

属性值说明

名称	描述	类型
Xhz.attr.UserControlView	true-是，false-否；默认值是false	Boolean

使用示例

Xhz.attr.UserControlView = false;

选中构件材质

属性说明

设置构件中时的材质，需要在初始化主应用之前使用。

属性值说明

名称	描述	类型
Xhz.attr.SelectionColor	默认值是 {color: 0x3fad00, side: window.THREE && window.THREE.DoubleSide}	object

使用示例

Xhz.attr.SelectionColor = {color: 0x3fad00, side: window.THREE && window.THREE.DoubleSide};

抗锯齿

属性说明

设置是否抗锯齿，需要在初始化主应用之前使用。

属性值说明

名称	描述	类型
Xhz.attr.DisableAntialias	true-是，false-否；默认值是true	Boolean

使用示例

Xhz.attr.DisableAntialias = false;

自动合并构件

属性说明

设置是否自动合并构件，需要在初始化主应用之前使用。

属性值说明

名称	描述	类型
Xhz.attr.AutoMergeComponent	true-是，false-否；默认值是true	Boolean

使用示例

Xhz.attr.AutoMergeComponent = false;

合并构件的数量阈值

属性说明

设置自动合并构件的数量阈值，需要在初始化主应用之前使用。

属性值说明

名称	描述	类型
Xhz.attr.AutoMergeComponentCount	默认值是10000	number

使用示例

Xhz.attr.AutoMergeComponentCount = 20000;

显示构件差异

属性说明

设置鼠标覆盖构件时是否显示构件差异，需要在初始化主应用之前使用。

属性值说明

名称	描述	类型
Xhz.attr.Hover	true-是，false-否；默认值是false	Boolean

使用示例

Xhz.attr.Hover = true;

碰撞检测

属性说明

设置是否启用碰撞检测，需要在初始化主应用之前使用。

属性值说明

名称	描述	类型
Xhz.attr.EnableHitDetection	true-是，false-否；默认值是false	Boolean

使用示例

Xhz.attr.EnableHitDetection = true;

选中轮廓线

属性说明

设置是否开启选中轮廓线，需要在初始化主应用之前使用。

属性值说明

名称	描述	类型
Xhz.attr.EnableSelectionOutline	true-是，false-否；默认值是false	Boolean

使用示例

Xhz.attr.EnableSelectionOutline = true;

透明时可选中

属性说明

设置是否开启透明时可选中，需要在初始化主应用之前使用。

属性值说明

名称	描述	类型
Xhz.attr.EnableSelectionByTranslucent	true-是，false-否；默认值是false	Boolean

使用示例

Xhz.attr.EnableSelectionByTranslucent = true;

显示包围盒

属性说明

设置是否开启选中时显示包围盒，需要在初始化主应用之前使用。

属性值说明

名称	描述	类型
Xhz.attr.EnableSelectionBoundingBox	true-是，false-否；默认值是false	Boolean

使用示例

Xhz.attr.EnableSelectionBoundingBox = true;

设置渲染器的阴影

属性设置

设置渲染器的阴影是否出现。

属性值说明

名称	描述	类型
Xhz.attr.EnableSelectionBoundingBox	true-是，false-否；默认值是false	Boolean

使用示例

Xhz.attr.EnableShadow = true;

初始化主应用

接口说明

初始化主应用。

传入参数说明

名称	描述	类型	必填	示例
options	入参	object	否	{}
options.host	接口请求地址。默认是https:webapi.bos.xyz	string	否	{host: ‘https:webapi.bos.xyz’}
options.modelKey	模型的key	string	否	{modelKey: ‘16325014’}
options.devcode	开发密钥	string	否	{devcode: ‘devcode’}
options.viewport	视图渲染的相关信息。默认是{}	object	否	{viewport: {}}
options.viewport.el	渲染标签的id。默认是viewport	string	否	{viewport: {el: ‘viewport’}}
options.viewport.width	渲染标签的宽度。默认是浏览器的宽度	number	否 {viewport: {width: 100}}
options.viewport.height	渲染标签的高度。默认是浏览器的高度	number	否	{viewport: {heihgt: 100}}
options.viewport.autoUpdate	浏览器窗口大小变化，是否自动刷新渲染标签的大小。默认是true	boolean	否	{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: 'BuildingIOT_sysSupervise',
    devcode: 'e10e59bf0ee97213ca7104977877bd1a',
    viewport:
      autoUpdate: true
    }
  };
  var app = new Xhz.App(options);
);

示例

系统流向

相关阅读

• 视图类 | 前端三维库你不知道的事（二）

• 模型类 | 前端三维库你不知道的事（三）

• 构件类 | 前端三维库你不知道的事（四）

• 相机类 | 前端三维库你不知道的事（五）

• 标签类 | 前端三维库你不知道的事（六）

• 系统类 | 前端三维库你不知道的事（七）

• 调用类 | 前端三维库你不知道的事（八）

• 小红砖API2.0强势上线