@realsee/five/ai_guides/quick-start.md

Realsee Renderer SDK

# Quick Start (快速开始)

- **Summary**: 本指南介绍如何安装 Five 并加载一个基础 VR 场景。

## Installation

通过 npm 或 yarn 安装：

```bash
npm install three@^0.117.1 @realsee/five
# or
yarn add three@^0.117.1 @realsee/five
```

> **注意**: Five 依赖 `three`，请确保安装了兼容的版本。

## Basic Usage

初始化 Five 实例并加载 Work 数据：

```typescript
import { Five, parseWork } from "@realsee/five";

// 1. 创建 Five 实例
const five = new Five();

// 2. 挂载到 DOM
const app = document.getElementById('app');
if (app) {
  // 设置容器全屏
  app.style.width = '100vw';
  app.style.height = '100vh';
  five.appendTo(app);

  // 监听窗口大小变化
  window.addEventListener('resize', () => five.refresh());
}

// 3. 加载数据 (Work)
// 这是一个公开测试数据
const workURL = 'https://raw.githubusercontent.com/realsee-developer/dnalogel/main/open-works/real/80o024DE2xyva3j5BE/work.json';

fetch(workURL)
  .then(res => res.json())
  .then(json => {
    // 解析并加载
    const work = parseWork(json);
    return five.load(work);
  })
  .then(() => {
    console.log("模型加载完成");
  })
  .catch(err => console.error(err));
```

## Next Steps

掌握基础用法后，您可以探索更多核心功能：

*   **控制视角与移动**: 了解如何通过代码控制相机。 -> [Five.updateCamera](./features/five.md) / [State](./features/state.md)
*   **切换模态**: 在全景、模型、平面图之间切换。 -> [Mode](./features/mode.md)
*   **监听事件**: 响应用户的点击和交互。 -> [Event](./features/event.md)
*   **视觉调整**: 修改材质参数或开启后处理效果。 -> [Material](./features/material.md) / [Postprocessing](./features/postprocessing.md)
*   **自定义配置**: 修改图片加载参数或渲染效果。 -> [ImageOptions](./features/image-options.md)

## Related

*   [Five](./features/five.md): Five 类完整 API 说明。
*   [Work](./features/work.md): 了解 Work 数据结构。