TvT.js
目录
主题颜色

资源引用

原则上三维效果中所用到的纹理、模型、字体等等资源，都不需要进过模块化打包处理，而直接放在 public 下对应的文件夹中。本章最后使用资源管理器插件open in new window，一次性加载所有资源，避免闪屏等问题。

WARNING

tvt.js 已从 2025 年十月中旬全面升级所有依赖库，涉及到 TresV5 版本的资源引用方法已经更新。若想查看之前的文档，请跳转：docs.icegl.cn/v4open in new window
若您准备从之前tvt.js的 V4 版本升级，我们有详细的升级方法，请跳转：icegl.cn/ask/article/22769open in new window

引用纹理

import { useTexture } from '@tresjs/cientos'

// 示例 A
const { state: pTexture } = useTexture('./plugins/xxx/image/light.png')
<TresMeshPhysicalMaterial :map="pTexture" />

// 示例 B
import { watch } from 'vue'
const { state: pTexture } = useTexture('./plugins/xxx/image/light.png')

watch(
  () => pTexture.value,
  (mapv) => {
    if (mapv) {
      Material.map = mapv
    }
  }
)

引用 shader 文件

通常着色器文件都放在/shaders/目录下，通过相对路径引入即可< 项目已加入：vite-plugin-glsl 库 >：

import Vertex from '../shaders/x.vert'
import Frag from '../shaders/x.frag'

若不想使用 vite-plugin-glsl 库，则需要在引入文件时注意后面请增加?raw

import Vertex from '../shaders/x.vert?raw'
import Frag from '../shaders/x.frag?raw'

引用模型文件

通常着色器文件都放在public/model/目录下，通过相对路径引入。

  • 使用tvt.js的通用方法

    import { useGLTF } from 'PLS/basic'

const { scene, materials, ... } = await useGLTF('./model/model.gltf')

    类似：GLTFLoader的方法，请移步 three.js 文档:点击详情open in new window

  • 使用 tres.js 封装的方法:

    <script setup lang="ts">
import { useGLTF } from '@tresjs/cientos'
const path = './blender-cube.glb'
const { state, nodes, materials } = useGLTF(path, { draco: true })
</script>

<template>
  <primitive v-if="state" :object="state?.scene" />
</template>

    类似：useGLTF的方法，请移步 tres.js 文档:点击详情open in new window

引用字体文件

针对three.js的字体

import { TextGeometry } from 'three/addons/geometries/TextGeometry.js'
const loader = new FontLoader()
loader.load('fonts/helvetiker_regular.typeface.json', function (font) {
  const geometry = new TextGeometry('Hello three.js!', {
    font: font,
    size: 80,
    depth: 5,
    curveSegments: 12,
    bevelEnabled: true,
    bevelThickness: 10,
    bevelSize: 8,
    bevelSegments: 5,
  })
})
  • 整个 tres.js 的简单方法
    <Text3D font="./font/f.json" text="我的三地文本" :size="0.8" />
    其余方法，请移步 cientos.tresjs 文档:点击详情open in new window

针对ThreeMeshUI库的字体

const container = new ThreeMeshUI.Block({
  width: 1.2,
  height: 0.7,
  padding: 0.2,
  fontFamily: './assets/Roboto-msdf.json',
  fontTexture: './assets/Roboto-msdf.png',
})

TvT.js 项目参考：MeshUI 简单样式open in new window

使用资源管理器插件open in new window

使用 tvt.js 框架时，在大尺度场景下，遇到比较大模型和多材质的情况下，就会出现闪屏等不美观的情况。那么通过此免费插件，预先加载对应资源，变读取精度条后。再载入界面，从而解决此问题。

使用方法

在正确安装好此插件后，在您程序页面执行最初的时候插入：

import { Resource } from 'PLS/resourceManager'
// 然后载入资源配置：
Resource.loadResources([
    { functionName: 'GLTFLoader', url: './plugins/earthSample/model/lowpolyPlanet/planet.gltf' },
    { functionName: 'TextureLoader', url: './plugins/digitalMapBlock/images/side.png' },
    { functionName: 'FileLoader', url: './plugins/simpleGIS/json/china.json', resourceID: 'map.json' },
])

// 函数传入数组函数:
loadResources()
// 传入数组参数：
[
    functionName:,//载入文件的方法名称
    url:,//文件地址，可以是远程地址
    resourceID:,//文件对应的唯一ID，用于后面获取文件的追溯，若不填，则会自动取文件名称
]

//在需要的地方获取资源：
Resource.getItem('planet.gltf')

最佳实践

详见此插件包里的simpleLoading.vue页面，且融合了现有 loading 组件

<script>
import { yangyangLoading as loading } from 'PLS/UIdemo'
<script/>
<template>
    <loading useResourceManager />
</template>
// 注意：挂载：useResourceManager 属性，启用该功能
本页目录