Skip to content

OrbitControls 轨道控制器

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

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

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

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

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

使用轨道控制器

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

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

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

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

extend({ OrbitControls })

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

vue
<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 组合式函数获取相机和渲染器。

ts
import { useTres } from '@tresjs/core'

const { state } = useTres()

因此,最终代码如下所示:

vue
<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 的封装。

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

它直接可用!💯

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