尧图网页设计 
如何用 deck.gl 的 FirstPersonView 配置第一人称相机视角【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.glFirstPersonView是 deck.gl 提供的第一人称视角 View 类相机被放置在指定的经纬度位置朝向由viewState中的bearing方位角和pitch俯仰角决定行为类似第一人称游戏。本文基于 deck.gl 官方文档说明如何在应用中完成从安装、创建第一人称视角、配置相机参数到开启交互的完整操作路径并给出多视图场景下的可选扩展方式。准备条件安装 deck.gl第一人称视角需要的类都在deck.gl/core中。安装完整框架npm install deck.gl --save或使用 yarnyarn add deck.gl如果你只用到核心渲染能力而不需要其他模块也可以单独安装deck.gl/core以及所需的图层模块如deck.gl/layers。注意各子模块版本需要手动保持同步。安装说明见 Getting Started。官方建议在使用任何 View 类之前先阅读 Views and Projections 指南理解View相机固定配置、viewState运行时可变状态和Viewport实际的投影计算对象三者的分工。创建一个第一人称视角最小可用的主路径用Deck实例传入views: new FirstPersonView()、initialViewState和controllerimport {Deck, FirstPersonView} from deck.gl/core; new Deck({ views: new FirstPersonView(), controller: {keyboard: false, inertia: true}, initialViewState: viewState });上面代码与把 controller 挂在 View 上等价官方文档中两种写法均被展示import {Deck, FirstPersonView} from deck.gl/core; new Deck({ views: new FirstPersonView({ controller: {keyboard: false, inertia: true} }), initialViewState: viewState });区别在于作用范围Deck级的controller作用于整个 DeckView级的controller只作用于该视图多视图布局时更常用后者。View State 参数FirstPersonView需要搭配一个viewState对象渲染。它包含以下参数来源first-person-view.md参数说明默认值longitude相机经度-latitude相机纬度-position相机相对经纬度锚点的米偏移number[3][0, 0, 0]bearing方位角度0朝北pitch俯仰角度0水平maxPitch最大俯仰角90正下方minPitch最小俯仰角-90正上方仓库内的 360 视频示例 展示了一个完整的初始状态写法import type {FirstPersonViewState} from deck.gl/core; const INITIAL_VIEW_STATE: FirstPersonViewState { latitude: 0, longitude: 0, position: [0, 0, 0], pitch: 0, bearing: 90 };管理视角状态stateful 与 stateless根据 Views and Projections 指南只提供initialViewState时deck.gl 自动跟踪交互视图的 view statestateful 用法这是最简单的路径。如果需要在 deck.gl 之外管理视角状态例如做重置视角按钮改用viewState属性并监听onViewStateChange回调自行更新const deckInstance new Deck({ viewState: INITIAL_VIEW_STATE, controller: true, onViewStateChange: e { deckInstance.setProps({ viewState: e.viewState }); } }); document.getElementById(reset-btn).onclick () { deckInstance.setProps({ viewState: INITIAL_VIEW_STATE }); };React 项目中对应写法是使用useState保存 view state并把onViewStateChange{e setViewState(e.viewState)}传给DeckGL /参考 views.md 中的 React 示例。调整相机参数FirstPersonView接受与View基类相同的构造参数id、x、y、width、height、controller等另加投影相关参数来源first-person-view.md参数说明默认值projectionMatrix投影矩阵number[16]提供后覆盖下方参数-fovy透视相机视野角度75near近裁剪面距离0.1far远裁剪面距离1000focalDistance视口缩放修饰对应每米像素数1注意near/far的默认远裁剪面是 1000 米单位距离如果你的场景尺度更大例如仓库中的车辆轨迹示例用到了coordinateSystem: meter-offsets的图层需要相应调大far。x、y、width、height控制该视图在画布上的位置和大小接受数字或 CSS 风格表达式如50%、calc(50% - 10px)默认铺满整个画布。multi-viewport 测试应用 中用height50%让第一人称视角只占上半屏FirstPersonView idfirstPerson controller{true} height50% fovy{50} /配置交互行为默认情况下FirstPersonView使用FirstPersonController处理交互。开启方式const view new FirstPersonView({id: pov, controller: true});FirstPersonController模拟人的移动方式来源first-person-controller.md滚轮沿鼠标指针方向在水平 2D 平面上前进/后退scrollZoom拖拽dragMode默认为rotate即拖拽旋转视角shift拖拽平移dragPan默认truev9.0 起支持键盘方向键移动相机shift/ctrl方向键旋转/-垂直移动。它支持全部 Controller 基类选项例如inertia拖拽后惯性默认false可传毫秒数、keyboard可传false关闭或传对象调zoomSpeed、moveSpeed、rotateSpeedX/Y、scrollZoom可传对象调speed和smooth、doubleClickZoom、maxBounds等。如果视角不需要自由前进——比如 360 度视频示例 中相机固定在球心只能转头——就在 controller 选项里关闭移动相关能力DeckGL views{new FirstPersonView()} initialViewState{INITIAL_VIEW_STATE} controller{{scrollZoom: false, doubleClickZoom: false}} ... /自定义 FirstPersonController通过继承类可以覆盖事件处理逻辑例如拦截pan事件import {Deck, FirstPersonView, FirstPersonController} from deck.gl/core; class MyFirstPersonController extends FirstPersonController { handleEvent(event) { if (event.type pan) { // do something } else { super.handleEvent(event); } } } new Deck({ views: new FirstPersonView(), controller: {type: MyFirstPersonController}, initialViewState: viewState })可覆盖的方法见 Controller 文档。可选分支第一人称视图 小地图双视图deck.gl 支持多视图views传一个View实例列表每个视图有独立布局。一个典型场景是车头第一人称视角 俯视小地图官方示例用layerFilter保证汽车模型只在 minimap 中渲染避免挡住第一人称镜头来源views.mdimport {Deck, FirstPersonView, MapView} from deck.gl/core; import {SimpleMeshLayer} from deck.gl/mesh-layers; import {MVTLayer} from deck.gl/geo-layers; const deckInstance new Deck({ views: [ new FirstPersonView({id: first-person}), new MapView({id: minimap, x: 10, y: 10, width: 20%, height: 20%}) ], layerFilter: ({layer, viewport}) { if (viewport.id first-person layer.id car) { // Do not draw the car layer in the first person view return false; } return true; } });多视图下viewState变为按视图 id 分键的对象每个视图可独立或共享状态viewState: { first-person: { longitude: carPos.longitude, latitude: carPos.latitude, bearing: carPos.heading, position: [0, 0, 2] }, minimap: { longitude: carPos.longitude, latitude: carPos.latitude, zoom: 10 } }在onViewStateChange回调中通过viewId区分来自哪个视图的变化从而实现移动第一人称相机时小地图跟随这类同步逻辑multi-viewport 测试应用 给出了双向同步的完整实现。文档同时提醒TileLayer、MVTLayer、HeatmapLayer、ScreenGridLayer等图层在视口变化时会执行昂贵的取数/聚合操作一般不建议渲染进多个视图确需这么做时为每个视图各建一个图层实例并用layerFilter限制其渲染范围。如何判断配置是否生效文档中没有给出统一的成功日志验证方式是按以下行为逐项核对初始位置加载后相机应出现在initialViewState指定的longitude/latitude加position米偏移处朝向由bearing决定0为朝北交互开启controller后拖拽应旋转视角默认dragMode: rotateshift拖拽平移滚轮应沿指针方向水平移动方向键应移动相机——若这些行为没出现检查controller是否被设为false/null或选项里是否把对应能力scrollZoom、keyboard等关闭了俯仰角限制上下转头应在minPitch默认-90到maxPitch默认90之间被约束多视图在onViewStateChange中打印viewId和viewState可确认哪个视图在产生状态变化以及分键的 view state 是否按预期同步。限制与注意事项FirstPersonView属于 geospatial 视图官方文档标注为 full support不同 View 类使用的 view state 参数不同配置前需查阅对应视图文档FirstPersonController的dragPan默认true是 v9.0 起才支持的默认行为若把 deck.gl 画布作为其他地图库如 Mapbox/Google Maps的 overlay视口可能需要用那个库的 API 更新而非 deck.gl 的 API详见 Views and Projections 中的说明相关 API 文档入口FirstPersonView、FirstPersonController、View、Controller。【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.gl创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何用 deck.gl 的 FirstPersonView 配置第一人称相机视角
如何用 deck.gl 的 FirstPersonView 配置第一人称相机视角【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.glFirstPersonView是 deck.gl 提供的第一人称视角 View 类相机被放置在指定的经纬度位置朝向由viewState中的bearing方位角和pitch俯仰角决定行为类似第一人称游戏。本文基于 deck.gl 官方文档说明如何在应用中完成从安装、创建第一人称视角、配置相机参数到开启交互的完整操作路径并给出多视图场景下的可选扩展方式。准备条件安装 deck.gl第一人称视角需要的类都在deck.gl/core中。安装完整框架npm install deck.gl --save或使用 yarnyarn add deck.gl如果你只用到核心渲染能力而不需要其他模块也可以单独安装deck.gl/core以及所需的图层模块如deck.gl/layers。注意各子模块版本需要手动保持同步。安装说明见 Getting Started。官方建议在使用任何 View 类之前先阅读 Views and Projections 指南理解View相机固定配置、viewState运行时可变状态和Viewport实际的投影计算对象三者的分工。创建一个第一人称视角最小可用的主路径用Deck实例传入views: new FirstPersonView()、initialViewState和controllerimport {Deck, FirstPersonView} from deck.gl/core; new Deck({ views: new FirstPersonView(), controller: {keyboard: false, inertia: true}, initialViewState: viewState });上面代码与把 controller 挂在 View 上等价官方文档中两种写法均被展示import {Deck, FirstPersonView} from deck.gl/core; new Deck({ views: new FirstPersonView({ controller: {keyboard: false, inertia: true} }), initialViewState: viewState });区别在于作用范围Deck级的controller作用于整个 DeckView级的controller只作用于该视图多视图布局时更常用后者。View State 参数FirstPersonView需要搭配一个viewState对象渲染。它包含以下参数来源first-person-view.md参数说明默认值longitude相机经度-latitude相机纬度-position相机相对经纬度锚点的米偏移number[3][0, 0, 0]bearing方位角度0朝北pitch俯仰角度0水平maxPitch最大俯仰角90正下方minPitch最小俯仰角-90正上方仓库内的 360 视频示例 展示了一个完整的初始状态写法import type {FirstPersonViewState} from deck.gl/core; const INITIAL_VIEW_STATE: FirstPersonViewState { latitude: 0, longitude: 0, position: [0, 0, 0], pitch: 0, bearing: 90 };管理视角状态stateful 与 stateless根据 Views and Projections 指南只提供initialViewState时deck.gl 自动跟踪交互视图的 view statestateful 用法这是最简单的路径。如果需要在 deck.gl 之外管理视角状态例如做重置视角按钮改用viewState属性并监听onViewStateChange回调自行更新const deckInstance new Deck({ viewState: INITIAL_VIEW_STATE, controller: true, onViewStateChange: e { deckInstance.setProps({ viewState: e.viewState }); } }); document.getElementById(reset-btn).onclick () { deckInstance.setProps({ viewState: INITIAL_VIEW_STATE }); };React 项目中对应写法是使用useState保存 view state并把onViewStateChange{e setViewState(e.viewState)}传给DeckGL /参考 views.md 中的 React 示例。调整相机参数FirstPersonView接受与View基类相同的构造参数id、x、y、width、height、controller等另加投影相关参数来源first-person-view.md参数说明默认值projectionMatrix投影矩阵number[16]提供后覆盖下方参数-fovy透视相机视野角度75near近裁剪面距离0.1far远裁剪面距离1000focalDistance视口缩放修饰对应每米像素数1注意near/far的默认远裁剪面是 1000 米单位距离如果你的场景尺度更大例如仓库中的车辆轨迹示例用到了coordinateSystem: meter-offsets的图层需要相应调大far。x、y、width、height控制该视图在画布上的位置和大小接受数字或 CSS 风格表达式如50%、calc(50% - 10px)默认铺满整个画布。multi-viewport 测试应用 中用height50%让第一人称视角只占上半屏FirstPersonView idfirstPerson controller{true} height50% fovy{50} /配置交互行为默认情况下FirstPersonView使用FirstPersonController处理交互。开启方式const view new FirstPersonView({id: pov, controller: true});FirstPersonController模拟人的移动方式来源first-person-controller.md滚轮沿鼠标指针方向在水平 2D 平面上前进/后退scrollZoom拖拽dragMode默认为rotate即拖拽旋转视角shift拖拽平移dragPan默认truev9.0 起支持键盘方向键移动相机shift/ctrl方向键旋转/-垂直移动。它支持全部 Controller 基类选项例如inertia拖拽后惯性默认false可传毫秒数、keyboard可传false关闭或传对象调zoomSpeed、moveSpeed、rotateSpeedX/Y、scrollZoom可传对象调speed和smooth、doubleClickZoom、maxBounds等。如果视角不需要自由前进——比如 360 度视频示例 中相机固定在球心只能转头——就在 controller 选项里关闭移动相关能力DeckGL views{new FirstPersonView()} initialViewState{INITIAL_VIEW_STATE} controller{{scrollZoom: false, doubleClickZoom: false}} ... /自定义 FirstPersonController通过继承类可以覆盖事件处理逻辑例如拦截pan事件import {Deck, FirstPersonView, FirstPersonController} from deck.gl/core; class MyFirstPersonController extends FirstPersonController { handleEvent(event) { if (event.type pan) { // do something } else { super.handleEvent(event); } } } new Deck({ views: new FirstPersonView(), controller: {type: MyFirstPersonController}, initialViewState: viewState })可覆盖的方法见 Controller 文档。可选分支第一人称视图 小地图双视图deck.gl 支持多视图views传一个View实例列表每个视图有独立布局。一个典型场景是车头第一人称视角 俯视小地图官方示例用layerFilter保证汽车模型只在 minimap 中渲染避免挡住第一人称镜头来源views.mdimport {Deck, FirstPersonView, MapView} from deck.gl/core; import {SimpleMeshLayer} from deck.gl/mesh-layers; import {MVTLayer} from deck.gl/geo-layers; const deckInstance new Deck({ views: [ new FirstPersonView({id: first-person}), new MapView({id: minimap, x: 10, y: 10, width: 20%, height: 20%}) ], layerFilter: ({layer, viewport}) { if (viewport.id first-person layer.id car) { // Do not draw the car layer in the first person view return false; } return true; } });多视图下viewState变为按视图 id 分键的对象每个视图可独立或共享状态viewState: { first-person: { longitude: carPos.longitude, latitude: carPos.latitude, bearing: carPos.heading, position: [0, 0, 2] }, minimap: { longitude: carPos.longitude, latitude: carPos.latitude, zoom: 10 } }在onViewStateChange回调中通过viewId区分来自哪个视图的变化从而实现移动第一人称相机时小地图跟随这类同步逻辑multi-viewport 测试应用 给出了双向同步的完整实现。文档同时提醒TileLayer、MVTLayer、HeatmapLayer、ScreenGridLayer等图层在视口变化时会执行昂贵的取数/聚合操作一般不建议渲染进多个视图确需这么做时为每个视图各建一个图层实例并用layerFilter限制其渲染范围。如何判断配置是否生效文档中没有给出统一的成功日志验证方式是按以下行为逐项核对初始位置加载后相机应出现在initialViewState指定的longitude/latitude加position米偏移处朝向由bearing决定0为朝北交互开启controller后拖拽应旋转视角默认dragMode: rotateshift拖拽平移滚轮应沿指针方向水平移动方向键应移动相机——若这些行为没出现检查controller是否被设为false/null或选项里是否把对应能力scrollZoom、keyboard等关闭了俯仰角限制上下转头应在minPitch默认-90到maxPitch默认90之间被约束多视图在onViewStateChange中打印viewId和viewState可确认哪个视图在产生状态变化以及分键的 view state 是否按预期同步。限制与注意事项FirstPersonView属于 geospatial 视图官方文档标注为 full support不同 View 类使用的 view state 参数不同配置前需查阅对应视图文档FirstPersonController的dragPan默认true是 v9.0 起才支持的默认行为若把 deck.gl 画布作为其他地图库如 Mapbox/Google Maps的 overlay视口可能需要用那个库的 API 更新而非 deck.gl 的 API详见 Views and Projections 中的说明相关 API 文档入口FirstPersonView、FirstPersonController、View、Controller。【免费下载链接】deck.glWebGL2 powered visualization framework项目地址: https://gitcode.com/GitHub_Trending/de/deck.gl创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考