TvT.js
目录
主题颜色

资源引用

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

引用纹理

import { useTexture } from '@tresjs/core'
const pTexture = await useTexture({ map: './plugins/xxx/image/light.png' })
console.log(pTexture.map)

引用 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'

引用模型文件

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

  • 使用three.js的通用方法

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

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

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

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

    import { useFBX } from '@tresjs/cientos'
const model = await useFBX('/model/model.fbx')

    类似：useFBX的方法，请移步 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" />
    其余方法，请移步 tres.js 文档:点击详情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 属性，启用该功能
本页目录