VRButton 是 CesiumJS 中的一个组件，用于开启或关闭虚拟现实功能。此功能允许用户通过虚拟现实设备来探索场景。
这里是 VRButton 的基本用法：
const viewer = new Cesium.Viewer('cesiumContainer');
const vrButton = new Cesium.VRButton(viewer.cesiumWidget.container);
这将创建一个 VRButton 并将其添加到 viewer 实例的容器中。
默认情况下， VRButton 只会在支持虚拟现实的设备上显示。如果你想在所有设备上始终显示按钮，则可以将 VRButton 的第二个参数设置为 true：
const vrButton = new Cesium.VRButton(viewer.cesiumWidget.container, true);
VRButton 的外观可以通过 CSS 进行调整。以下是默认样式：
.cesium-vrButton-wrapper {
position: absolute;
top: 6px;
right: 6px;
z-index: 1;
}
.cesium-vrButton-button {
display: inline-block;
vertical-align: middle;
width: 44px;
height: 44px;
background-color: #fff;
color: #000;
cursor: pointer;
border: none;
outline: none;
border-radius: 50%;
background-image: url(data:image/png;base64,iVBORw...);
background-repeat: no-repeat;
background-position: center;
}
.cesium-vrButton-button:hover {
background-color: #eee;
color: #000;
}
要自定义样式，只需在 CSS 文件中添加自己的样式。例如，如果您想更改按钮的背景颜色：
.cesium-vrButton-button {
background-color: red;
}
请注意，这将更改所有 VRButton 的背景颜色。
VRButton 发出以下事件：
vrButtonStateChanged: 当用户单击按钮以启用或禁用 VR 时发生。事件有效负载包括 vrButtonEnabled (bool)，指示 VR 是否已启用。vrDisplayPresentChange: 当用户从 VR 模式切换回普通模式或反之时发生。事件有效负载包括 vrButtonEnabled (bool)，指示 VR 是否已启用。以下是如何侦听这些事件的示例：
vrButton.viewModel.vrButtonStateChanged.addEventListener((enabled) => {
console.log('VR state changed:', enabled);
});
vrButton.viewModel.vrDisplayPresentChange.addEventListener((enabled) => {
console.log('VR display present changed:', enabled);
});
以下是 VRButton 上可用的属性：
svgOn: String，指定在 VR 模式下显示的 SVG 图标的 URL。默认为 CesiumJS 自带的默认图标。svgOff: String，指定在非 VR 模式下显示的 SVG 图标的 URL。默认为 CesiumJS 自带的默认图标。tooltipText: String，指定当用户将鼠标悬停在 VRButton 上时显示的工具提示文本。默认为 "Enable VR mode"。tooltipTextEnabled: String，指定当 VR 模式激活时 VRButton 上显示的文本。默认为 "VR mode enabled."。tooltipTextDisabled: String，指定当 VR 模式禁用时 VRButton 上显示的文本。默认为 "VR mode disabled."。这些属性可以通过 viewModel 对象进行访问和更改。例如，要更改图标：
vrButton.viewModel.svgOn = 'myOnIcon.svg';
vrButton.viewModel.svgOff = 'myOffIcon.svg';
请注意，更改这些属性将更改所有 VRButton 实例的行为。