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

最新推荐文章于 2024-02-20 09:53:43 发布

Super_Calvin

最新推荐文章于 2024-02-20 09:53:43 发布

阅读量337

点赞数

分类专栏：知屋安砖社区文章标签：天空盒监听网页网页全屏标签视图大小

本文链接：https://blog.csdn.net/weixin_45544796/article/details/105955001

版权

知屋安砖社区专栏收录该内容

18 篇文章 12 订阅

订阅专栏

前端三维库-视图类

视图类属性及操作

来源于👉【知屋安砖】

视图类属性及操作

获取视图类实例

接口说明

获取视图类实例

返回参数说明

名称	描述	类型	示例
view	view的实例	object

使用示例

var view = app.view;

渲染视图

接口说明

渲染视图

使用示例

view.render();

相关示例库
阴影

视图缩放到包围盒大小

接口说明

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

传入参数说明

名称	描述	类型	必填	示例
componentConfig	入参	object	是	{}
componentConfig.keys	构件的key	array	是	{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’

相关示例库
修改背景颜色

场景尺寸

接口说明
设置场景的尺寸

传入参数说明

名称	描述	类型	必填	示例
width	场景宽度。默认值是浏览器宽度。	number	否	100
height	场景宽度。默认值是浏览器高度。	number	否	100

使用示例

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 });

相关示例库
设置高亮

打开网页全屏

接口说明

打开网页全屏

传入参数说明

名称	描述	类型	必填	示例
domId	dom标签的id	string	是	‘#viewport’

使用示例

view.openFullScreen('#viewport');

关闭网页全屏

接口说明

关闭网页全屏

使用示例

view.closeFullScreen();

获取网页全屏标签

接口说明

获取网页全屏标签

返回参数说明

名称	描述	类型	示例
dom	网页是否处于全部状态。true-是 false-否	boolean	true

使用示例

var dom = view.getFullScreenDom();

判断全屏状态

接口说明

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

返回参数说明

名称	描述	类型	示例
status	网页是否处于全屏状态。true-是 false-否	boolean	true

使用示例

var status = iew.isFullScreen();

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

接口说明

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

传入参数说明

名称	描述	类型	必填	示例
domId	dom标签的id	string	是	‘#viewport’

返回参数说明

名称	描述	类型	示例
func	实现网页全屏的方法	function / undefined	undefined

使用示例

var func = view.getFullScreenFunc('#viewport');

相关示例库
添加面板标签

监听网页全屏状态变化

接口说明

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

传入参数说明

名称	描述	类型	必填	示例
eventType	事件类型	string	是	‘fullscreenChange’
callback	回调函数	function	是	function(event) {}

使用示例

view.on('fullscreenChange', function(event) {});

渲染天空盒背景

接口说明

渲染天空盒背景

传入参数说明

名称	描述	类型	必填	示例
textureCube	Three.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);