模型态漫游

MovePlugin

功能说明

MovePlugin 提供在模型态下根据给定路径进行自动漫游预览的能力。

效果展示

点击“Play”，即可根据设定的路径进行漫游预览。

安装引用

import { MovePlugin } from "@realsee/dnalogel"

开发指南

初始化插件参数

const movePluginConfig = {
  /**
   * @description: 漫游时镜头基于路径的偏移量
   * @default: { x: 0, y: 2, z: 0 }
   */
  offset?: { x?: number; y?: number; z?: number }

  /**
   * @description: 滑动屏幕时允许打断漫游
   * @default: true
   */
  allowBroke?: boolean

  /**
   * @description: 漫游时是否加载路线
   */
  useGuideLine?: boolean
}

初始化

在初始化 Five 实例时，将 MovePlugin 配置在初始化插件参数即可。

初始化插件参数

import { Five } from '@realsee/five'
import { MovePlugin } from "@realsee/dnalogel";

const five = new Five({
    plugins: [
        [
            MovePlugin,
            'movePlugin', // 自定义插件名称
            movePluginConfig
        ]
    ]
})

React 初始化

在创建 FiveProvider 时，将 MovePlugin 配置在初始化插件参数即可。

import { MovePlugin } from "@realsee/dnalogel";
import { createFiveProvider, FiveCanvas } from "@realsee/five/react";

const FiveProvider = createFiveProvider({
    plugins: [
        [
            MovePlugin,
            'movePlugin', // 自定义插件名称
            movePluginConfig
        ]
    ]
});

Vue 初始化

在 FiveProvider 时，将 MovePlugin 配置在初始化插件参数即可。

<template>
  <FiveProvider :fiveInitArgs="fiveInitArgs">
  </FiveProvider>
</template>
<script setup>
import MovePlugin from "@realsee/dnalogel";
import { FiveProvider, FiveCanvas } from "@realsee/five/vue";
const fiveInitArgs = {
    plugins: [
        [
            MovePlugin,
            'movePlugin', // 自定义插件名称
            movePluginConfig
        ]
    ]
}
</script>

载入数据

您需要载入路径漫游数据方可看到正确效果：

// 载入路径数据
five.plugins.movePlugin.load({
    // 组成路径的空间坐标点
    path: [
        [0.09141919761896133, 0.008460694152031545, -0.08654399961233139],
        [-1.6820100545883179, 0.01284792484609465, 0.07329510152339935],
        [-3.437459945678711, 0.01757188648782715, 0.06699030101299286],
        [-0.618914008140564, 0.008730999445763388, -1.6621500253677368],
      ],

    /**
     * 可选值
     * @description: 漫游镜头偏移量，注意会与插件初始化时的 config.offset 叠加
     * @default: { x: 0, y: 0, z: 0 }
     */
    offset: { y: 0 },

    /**
     * 可选值
     * @description: 漫游时是否加载路线
     */
    useGuideLine: true
})

// 开始漫游
five.plugins.movePlugin.play();
// 暂停漫游
five.plugins.movePlugin.pause();

核心方法

• load(serverData: PluginServerData | PluginServerData['data']) 载入插件数据

• play: () => void 开始漫游

• pause: () => void 暂停漫游

• setState: (state: Partial<PluginState>) => void 设置漫游参数

• show: () => void 显示漫游路径

• hide: () => void 隐藏漫游路径

• enable: () => void 启用插件

• disable: () => void 禁用插件

• dispose: () => void 销毁插件