> 非常适合游戏、XR (VR/AR) 和任何基于网络的空间计算应用程序。
### 它看起来像什么？
|一个简单的 UI，有 2 个水平对齐的容器，以全屏呈现。当用户将鼠标悬停在容器上时，容器的不透明度会发生变化。 |  |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------- |
使用`@react-two/uikit`时的源代码：
````jsx
从 'react-dom/client' 导入 { createRoot }
从“反应”导入反应
从“@react-三/纤维”导入{画布}
从“@react-two/uikit”导入{全屏，容器}
createRoot(document.getElementById('root')).render(
<画布>
<全屏flexDirection =“行”填充= {10}间隙= {10}>
<容器flexGrow={1}opacity={0.5}hover={{opacity:1}}backgroundColor="red"/>
<容器flexGrow={1}opacity={0.5}hover={{opacity:1}}backgroundColor="blue"/>
，
）
````
## 如何开始
如果您使用的是 `@react- Three/Fiber`，请开始 **[构建您的第一个布局](https://docs.pmnd.rs/uikit/getting-started/first-layout)**，查看我们的 **[示例](https://docs.pmnd.rs/uikit/getting-started/examples)** 以了解 uikit 的实际应用。如果您想使用普通的 Three.js，请访问[本教程](https://pmndrs.github.io/uikit/docs/getting-started/vanilla)。或者，了解更多信息：
- [所有组件及其属性](https://docs.pmnd.rs/uikit/getting-started/components-and-properties)
- [交互性](https://docs.pmnd.rs/uikit/tutorials/interactivity)
- [自定义材料](https://docs.pmnd.rs/uikit/tutorials/custom-materials)
- [自定义字体](https://docs.pmnd.rs/uikit/tutorials/custom-fonts)
- [响应式用户界面](https://docs