加载模型

本指南中使用的所有模型均来自 Alvaro Saburido。

3D 模型有数百种文件格式，每种格式都有不同的用途、不同的功能和不同的复杂性。

在本指南中，我们将重点介绍加载 gLTF（GL 传输格式）模型，这是 Web 上最常见的 3D 模型格式。

在 TresJS 中加载模型有多种方法：

WARNING

请注意，在上面的示例中，我们使用顶级 await，请确保用 Suspense 组件包装它。有关更多信息，请参阅 Suspense。

使用 `useLoader`

useLoader 组合式函数允许你传递任何类型的 three.js 加载器和一个用于加载资源的 URL。它返回一个包含已加载资源的 Promise。

有关如何使用 useLoader 的详细说明，请查看 useLoader 文档。

import { useLoader } from '@tresjs/core'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader'

const { scene } = await useLoader(GLTFLoader, '/models/AkuAku.gltf')

然后，你可以将模型场景传递给 TresJS primitive 组件以渲染它：

html

<primitive :object="scene" />

<primitive /> 组件不是 Tres 源代码中的独立组件。相反，它是 Tres 核心功能的一部分。当你使用 <primitive> 时，它会被转换为 createElement 调用，该调用会根据提供的“object”道具创建适当的 three.js 对象。

请注意，在上面的示例中，我们使用 Suspense 组件包装 TresCanvas 组件。这是因为 useLoader 返回一个 Promise，我们需要等到它解析后才能渲染场景。

使用 `useGLTF`

一种更方便的加载模型的方式是使用 @tresjs/cientos 包中提供的 useGLTF 组合式函数。

import { useGLTF } from '@tresjs/cientos'

const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf')

使用 useGLTF 的一个优点是，你可以传递一个 draco 道具来启用模型的 Draco 压缩。这将减小模型的大小并提高性能。

import { useGLTF } from '@tresjs/cientos'

const { scene, nodes, animations, materials } = await useGLTF('/models/AkuAku.gltf', { draco: true })

或者，你可以使用 nodes 属性轻松选择模型中的对象

App.vueModel.vue

vue

<script setup lang="ts">
import Model from './Model.vue'
</script>

<template>
  <TresCanvas
    clear-color="#82DBC5"
    shadows
    alpha
  >
    <TresPerspectiveCamera :position="[11, 11, 11]" />
    <OrbitControls />
    <Suspense>
      <Model />
    </Suspense>
  </TresCanvas>
</template>

vue

<script setup lang="ts">
import { useGLTF } from '@tresjs/cientos'

const { nodes } = await useGLTF('/models/AkuAku.gltf', { draco: true })
</script>

<template>
  <primitive :object="node.AkuAku" />
</template>

使用 `GLTFModel`

GLTFModel 组件是 useGLTF 的包装器，可从 @tresjs/cientos 包中获得。

vue

<script setup lang="ts">
import { OrbitControls, GLTFModel } from '@tresjs/cientos'
</script>
<template>
  <TresCanvas clear-color="#82DBC5" shadows alpha>
    <TresPerspectiveCamera :position="[11, 11, 11]" />
    <OrbitControls />
    <Suspense>
      <GLTFModel path="/models/AkuAku.gltf" draco />
    </Suspense>
    <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
  </TresCanvas>
</template>

这种特殊的方法更直接，但它让你对模型的控制更少。

useFBX

useFBX 组合式函数可从 @tresjs/cientos 包中获得。

import { useFBX } from '@tresjs/cientos'

const model = await useFBX('/models/AkuAku.fbx')

然后，将场景添加到你的场景中非常简单：

html

<primitive :object="model" />

FBXModel

FBXModel 组件是 useFBX 的包装器，可从 @tresjs/cientos 包中获得。它的用法类似于 GLTFModel：

vue

<script setup lang="ts">
import { OrbitControls, FBXModel } from '@tresjs/cientos'
</script>
<template>
  <TresCanvas clear-color="#82DBC5" shadows alpha>
    <TresPerspectiveCamera :position="[11, 11, 11]" />
    <OrbitControls />
      <Suspense>
        <FBXModel path="/models/AkuAku.fbx" />
      </Suspense>
      <TresDirectionalLight :position="[-4, 8, 4]" :intensity="1.5" cast-shadow />
  </TresCanvas>
</template>

加载模型 ​

使用 useLoader ​

使用 useGLTF ​

使用 GLTFModel ​