# Quick Start (快速开始)

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

## Installation

通过 npm 或 yarn 安装：

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

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

## Basic Usage

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

    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 / State
- 切换模态: 在全景、模型、平面图之间切换。 -> Mode
- 监听事件: 响应用户的点击和交互。 -> Event
- 视觉调整: 修改材质参数或开启后处理效果。 -> Material / Postprocessing
- 自定义配置: 修改图片加载参数或渲染效果。 -> ImageOptions

## Related

- Five: Five 类完整 API 说明。
- Work: 了解 Work 数据结构。