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
Copy

注意: 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));
Copy

Next Steps

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

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

Related

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