开发者必看!图观™统一开发API及API调试器入门 第四讲

发布于:2022-08-02 ⋅ 阅读:(586) ⋅ 点赞:(0)

课程4:镜头操作

小伙伴们大家好,欢迎大家来到图观统一开发API及API调试器入门课程的第4课。

上节内容,我们为大家详细介绍了如何获取已发布的场景、如何获取和引用图观统一开发API的SDK、服务/场景/状态的关系以及端渲染场景操作等内容。

本节课程,我们主要讲解“镜头操作“,主要包含“获取镜头的视界 、设置镜头的视界、限制镜头视界的操作、接口操作镜头”4部分内容,并会在统一API调试器中进行相关的演示操作。

本节课程安排

第一部分:获取镜头视界

第二部分:设置镜头视界

第三部分:限制镜头视界的操作

第四部分:接口操作镜头

图观™引擎 统一API调试器零基础入门课程4《镜头操作》

(点击视频,观看本节完整版教程)

本节课程详解

一、获取镜头视界

首先,先要给大家讲解的是“获取镜头视界”,调用的是getCameraInfo这个方法。

点击执行,会在返回参数里看到:坐标系的类型、视角的中心点,可以看到场景围绕这中间这棵树的位置来进行旋转,这就是视角中心点,如果拖动场景,那中心点对应场景的位置也会发生变化。

  • coordZ是中心点的高度

  • distance是镜头距离

  • pitch是镜头的俯仰角(如果设置成负数,视野将在水平线以下)

  • Heading 是镜头的旋转参数

以上,我们就获取了当前场景的镜头基本参数。

二、设置镜头视界的操作

接下来我们来介绍一下如何设置镜头的视界。

,时长00:40

设置镜头视界我们使用setCamera这个方法,然后传入参数,点击执行,就可以完成视角的设置。

给大家介绍一下设置镜头视界的参数:

属性 类型 说明
coordType Number XY 轴坐标模式 坐标类型(0:X 经度 Y 纬度;1:X 米 Y 米,相对世界 00 点) 目前该属性仅支持属性值为 0
coordTypeZ Number Z 轴坐标模式 坐标高度类型,单位:米(0:相对 3D 世界 0 海拔;1:相对 3D 世界地表;2:相对 3D 模型表面) 目前该属性仅支持属性值为 0
centerCoord Array 中心点的坐标 lng,lat
coordZ Number Z 轴高度(单位:米)
distance Number 镜头距中心点距离(单位:米)
pitch Number 镜头俯仰角(5~89)
heading Number 镜头偏航角(0 正北, 0~359)
fly Boolean true: 飞行动画(飞行时间根据当前点与目标点计算,则 pitch 及 heading 不生效, 会自行计算);
false: 立刻跳转过去(有一个短暂飞行动画,并按照 distance, pitch, heading 设置镜头)
duration Number 飞行时间,秒

以上就是设置镜头视界的主要操作和内容。

三、限制镜头视界

接下来我们来给大家介绍一下限制镜头视界的操作。

,时长02:26

限制镜头视界简单理解是,希望用户在操作镜头的时候,不要超出某一些范围。就可以通过限制镜头视界来避免这些镜头的出现。

限制镜头视界需要调用2个方法,第一个是restrictCamera方法,这个方法是限制镜头视野的参数;另外我们还要开启setCameraRestrictionState视野限制状态

我们先讲restrictCamera设置镜头视野参数,包含了摄像机的坐标系、摄像机镜头垂直俯仰角,这里我们设置为30-60度、摄像机镜头水平摇摆角,我们设置为0-180度、镜头高度 用户在拖拽的时候不允许超过0-100米的限制 、还有摄像机镜头距离 100-500米 、视角的中心点位置以及radius, radius是代表我们能拖动场景的范围,是在距中心点300米为半径的圆形区域内,可以避免场景拖动的过远。

参数描述:

属性 类型 说明
coordType Number XY 轴坐标模式 坐标类型(0:X 经度 Y 纬度;1:X 米 Y 米,相对世界 00 点) 目前该属性仅支持属性值为 0
coordTypeZ Number Z 轴坐标模式 坐标高度类型,单位:米(0:相对 3D 世界 0 海拔;1:相对 3D 世界地表;2:相对 3D 模型表面) 目前该属性仅支持属性值为 0
limitPitch Array 摄像机 镜头垂直俯仰角 限制 (5~89)
limitYaw Array 摄像机 镜头水平摇摆角 限制 (0 正北, 0~359)
limitDistance Array 摄像机 镜头距离限制 (单位:米)
limitCoordZ Array 摄像机 坐标高度限制 (单位:米),(注意:端渲染暂未实现此属性。)。
center Array 视点 限制区中心坐标,(注意:端渲染暂未实现此属性。)。
radius Number 视点 限制区半径,会形成一个球体,并在所有条件中取交集,(注意:端渲染暂未实现此属性。)。
  • 开启镜头视野限制

开启镜头的视野限制,可以在state方法中选择restrict受限或是free不受限。

  • 取消镜头视野限制

取消镜头视野的限制,要使用state方法。先复制state方法代码,然后将其他的代码删掉,再将刚刚复制的内容粘贴进来,只需要将restrict 改为 free,点击执行,再来拖动场景,可以看到前面我们所作的哪些镜头限制就取消了。

四、接口操作镜头

在本小节中,我们为大家重点讲解漫游镜头、路径移动镜头、镜头环绕旋转、模型跟随镜头四部分内容。

1.漫游镜头

漫游镜头可以让镜头在场景多个点之间实现位移、漫游的效果。通过使用roamingCamera方法来开启镜头漫游

通过下方的setCameraRoamingState方法来进行镜头漫游的暂停、继续和停止移动。

开启镜头漫游的参数,这里包含了镜头的坐标系、漫游循环方式、漫游点位的信息列表包含了坐标位置、高度、镜头与坐标点距离、镜头俯仰角、镜头偏航角、镜头速度等信息。参数设置好了以后就可以调用roamingCamera方法来开启镜头漫游

参数描述:

属性 类型 说明
coordType Number XY 轴坐标模式 坐标类型(0:X 经度 Y 纬度;1:X 米 Y 米,相对世界 00 点) 目前该属性仅支持属性值为 0
coordTypeZ Number Z 轴坐标模式 坐标高度类型,单位:米(0:相对 3D 世界 0 海拔;1:相对 3D 世界地表;2:相对 3D 模型表面) 目前该属性仅支持属性值为 0
loopMode String 循环模式,none:不循环;round:往返循环;repeat:从头循环
points Array 相机漫游数据集合
points[0].coord Array XY 轴坐标,X:经度;Y:纬度
points[0].coordZ Number Z 轴高度(单位:米)
points[0].distance Number 镜头与坐标点距离(单位:米)
points[0].pitch Number 镜头俯仰角(-89+89)(589)
points[0].yaw Number 镜头偏航角(0 正北, 0~359)
points[0].speed Number 镜头速度 (单位:米/秒)

在现在的代码界面中,已经设置好镜头漫游10秒后暂停,如果暂停漫游,还是可以设置继续漫游,如果选择了停止移动,就不能再继续漫游了。

点击执行,可以看到现在场景视角就沿着预设的点位开始漫游。由于每一个点位的镜头偏航角都写的是0,所以看到漫游路径都是沿着一个方向进行移动,当然这里面每一个点的参数都是可以自由去配置的。

接下来我们调用“继续移动”指令,只需要将‘continue’复制到state后,点击执行,场景会继续开始漫游。如果漫游到最后一个点,场景会沿着原有的路径返回。如果调用‘stop’指令并执行,场景漫游会立即停止,并无法继续移动。

2.路径移动镜头

路径移动镜头就是在场景中先添加一个路径,当我们开启路径移动镜头之后,这个镜头会按照路径规划的顺序来实现镜头的移动

第一步先来添加一个路径,在右侧代码面板中,已经预设好了一条路径数据,包含各个点位的信息,并且先清除不需要的路径,再添加路径,点击执行,可以看到在园区的公园里面,已经显示出一条路径,之后就可以开启路径移动镜头。

首先来看下路径移动镜头中的参数,包含路径的ID、循环模式、reverse是否反向移动、镜头距离路径的距离、镜头俯仰角和镜头移动速度。

参数描述:

属性 类型 说明
pathId String 路径 ID (唯一标识)
loopMode String 循环模式:none,不循环;round,往返;repeat,从头循环
reverse Boolean 是否反向移动
distance Number 镜头距离覆盖物距离(单位:米)
pitch Number 镜头俯仰角(0~89)
speed Number 镜头速度 (单位:米/秒)

通过调用pathingCamera就可以实现开启路径移动镜头,点击执行,可以看到场景中,镜头开始按照路径进行移动。

此外,我们还可以为路径移动镜头设置暂停或开启动作。在代码面板下方,通过setCameraPathingState方法来进行路径移动镜头的暂停、继续和停止移动。

  • 调用 pause ,镜头移动暂停;

  • 调用continue,镜头移动继续;

  • 调用stop,镜头移动停止、无法再次继续。

经过以上操作,就实现了路径移动镜头的添加、暂停、继续和停止操作。

3.镜头环绕旋转

镜头环绕旋转就是让镜头围绕中心点,按照设定的俯仰角和旋转角实现旋转,我们可以通过简单的参数修改,实现镜头环绕旋转的速度和方向

镜头环绕旋转的代码参数,通过调用rotateCamera这个方法。

开启镜头环绕旋转,其中的参数包含了相机开启的状态、镜头飞行一周所用时间、是否可以被打断、以及镜头的飞行方向。想要暂停,只需将前面enabled参数改为false就可以了。

同时也可以进行简单的参数修改,比如我们想将镜头的旋转速度调快,可将duration数字调小,数值越小,速度越快,点击执行,可实时看到调整后的效果。如果想要暂停旋转,将enabled参数改为false,点击执行即可暂停镜头旋转。调用continue,镜头旋转继续。

参数描述:

属性 类型 说明
enabled Boolean 是否启用相机围绕目标飞行
duration Number 飞行一周所需要的秒数,数值越大飞行越慢
direction String 飞行方向,clockwise 为顺时针,counterclockwise 为逆时针
interruptable Boolean 是否可以被打断,默认为 true

4.模型跟随镜头

模型跟随镜头是指当场景中有模型在移动的时候,镜头可以跟随移动的模型进行移动。

首先是通过focusModel方法聚焦镜头到模型,接下来通过setModelTransform2方法,设定模型从一个点位移到另一个点位的路径、持续时长,之后再去开启followingCamera镜头跟随模型方法,来实现镜头的移动。

最后,我们通过setCameraFollowingState的方法来实现镜头移动的暂停、继续和停止移动。

本节总结

好了,本节课和大家介绍了操作镜头的方法和内容,相信大家已经熟练掌握了各种镜头操控方法的配置方式,小伙伴可以自己在API调试器中进行练习使用哦~

下节预告

下节课,我们将为大家介绍图层操作,会在API调试器中为大家详细演示,助您更加便捷高效地调试复杂代码、构建数字孪生应用。记得一定要持续关注我们哦~

图观在线试用地址

图观™引擎现可申请免费试用!现在试用还可获得1对1技术支持和专属大礼包~还等什么,快快联系我们体验图观™引擎的强大功能吧~

1.访问图观™官方网站,在浏览器中输入网址:https://www.tuguan.net


网站公告

今日签到

点亮在社区的每一天
去签到