OrbitControls 轨道控制器

轨道控制器（OrbitControls）是一种摄像机控制器，可让您围绕目标运行。这是探索场景的绝佳方式。

然而，它并不是 ThreeJS 的核心部分。因此，要使用它，您需要从 three/addons/controls/OrbitControls 模块导入它。

这会产生一个问题，因为 TresJS 仅会为 ThreeJS 核心对象自动创建组件目录，以便您可以将它们作为组件使用。

幸运的是，TresJS 提供了一种扩展组件目录的方法。您可以使用核心库中的 extend 方法来实现。

有关扩展您的 TresJS 目录的更多信息，请参考 扩展 部分。

使用轨道控制器

要使用 OrbitControls 你需要从 three/addons/controls/OrbitControls 模块导入它。

import { OrbitControls } from 'three/addons/controls/OrbitControls'

接下来，你需要使用 extend 方法扩展组件目录。

import { extend } from '@tresjs/core'
import { OrbitControls } from 'three/addons/controls/OrbitControls'

extend({ OrbitControls })

现在，你可以在你的场景中使用 TresOrbitControls 组件了。

<template>
  <TresCanvas
    shadows
    alpha
  >
    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
    <TresOrbitControls
      v-if="state.renderer"
      :args="[state.camera, state.renderer?.domElement]"
    />
  </TresCanvas>
</template>

由于 轨道控制器（OrbitControls） 需要相机和渲染器的引用，因此你需要将它们作为参数传递。

你可以使用 useTres 组合式函数获取相机和渲染器。

import { useTres } from '@tresjs/core'

const { state } = useTres()

因此，最终代码如下所示：

<script setup lang="ts">
import { extend, useTres } from '@tresjs/core'
import { OrbitControls } from 'three/addons/controls/OrbitControls'

extend({ OrbitControls })

const { state } = useTres()
</script>

<template>
  <TresCanvas
    shadows
    alpha
  >
    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
    <TresOrbitControls
      v-if="state.renderer"
      :args="[state.camera, state.renderer?.domElement]"
    />
  </TresCanvas>
</template>

使用 cientos 的 OrbitControls

现在进入精彩的部分了！ ✨

cientos 包提供了一个名为 <OrbitControls /> 的组件，它是 three-stdlib 模块中 OrbitControls 的封装。

最棒的是？ 您不需要扩展目录或传递任何参数。

它直接可用！💯

<template>
  <TresCanvas
    shadows
    alpha
  >
    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
    <OrbitControls />
  </TresCanvas>
</template>