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

原创
159次浏览
前端三维示例小红砖三维模型
0点赞
评论
举报
2020-5-7

小红砖近日更新了前端三维库界面:


1.优化了整体三维浏览界面;

2.快速上手教程文案更新;

3.新版示例库更新;

4.模型对比功能界面优化;

点击蓝字,了解更多:小红砖界面优化,一起畅游三维世界!


为了让大家更加了解小红砖的前端三维库,我将会从以下4个方面为大家介绍。

一、全局属性
二、初始化主应用
三、接口调用及提示消息


项目初始化

接口说明

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


传入参数说明
名称描述类型必填示例
func初始化完毕后执行的回调函数functionfunction() {}

返回参数说明
名称描述类型示例
undefined无返回值

使用示例
Xhz.init(function(){});


一、全局属性


视图控制器

属性说明

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


属性值说明
名称描述类型
Xhz.attr.EnableViewControllertrue-显示,false-隐藏。默认值是true。boolean

使用示例
Xhz.attr.EnableViewController = false;

相关示例

点击进入示例库 构件旋转


控制初始视角

属性说明

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


属性值说明
名称描述类型
Xhz.attr.UserControlViewtrue-是,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.DisableAntialiastrue-是,false-否。默认值是true。boolean

使用示例
Xhz.attr.DisableAntialias = false;


自动合并构件

属性说明

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


属性值说明
名称描述类型
Xhz.attr.AutoMergeComponenttrue-是,false-否。默认值是true。boolean

使用示例
Xhz.attr.AutoMergeComponent = false;


合并构件的数量阈值

属性说明

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


属性值说明
名称描述类型
Xhz.attr.AutoMergeComponentCount默认值是10000。number

使用示例
Xhz.attr.AutoMergeComponentCount = 20000;


显示构件差异

属性说明

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


属性值说明
名称描述类型
Xhz.attr.Hovertrue-是,false-否。默认值是false。boolean

使用示例
Xhz.attr.Hover = true;


相关示例


点击进入示例库 构件查询


碰撞检测

属性说明

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


属性值说明
名称描述类型
Xhz.attr.EnableHitDetectiontrue-是,false-否。默认值是false。boolean

使用示例
Xhz.attr.EnableHitDetection = true;



选中轮廓线

属性说明

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


属性值说明
名称描述类型
Xhz.attr.EnableSelectionOutlinetrue-是,false-否。默认值是false。boolean

使用示例
Xhz.attr.EnableSelectionOutline = true;

相关示例

点击进入示例库 模型外轮廓


透明时可选中

属性说明

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


属性值说明
名称描述类型
Xhz.attr.EnableSelectionByTranslucenttrue-是,false-否。默认值是false。boolean

使用示例
Xhz.attr.EnableSelectionByTranslucent = true;


相关示例


点击进入示例库 透明


显示包围盒

属性说明

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


属性值说明
名称描述类型
Xhz.attr.EnableSelectionBoundingBoxtrue-是,false-否。默认值是false。boolean

使用示例
Xhz.attr.EnableSelectionBoundingBox = true;


设置渲染器的阴影

属性说明

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


属性值说明
名称描述类型
Xhz.attr.EnableSelectionBoundingBoxtrue-是,false-否。默认值是false。boolean

使用示例
Xhz.attr.EnableShadow = true;


相关示例


点击进入示例库 阴影


相关文章

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

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

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

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

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

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

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

0点赞
赞赏
评论

评论区

不超过500字