资源管理器插件

适用于TvT.js的资源管理器插件，结合loading管理器，预加载模型和材质等资源

预览截图

插件安装

1、点击右侧插件包下载，得到： 'resourceManager.zip' , 并放在 `icegl-three-vue-tres/pluginMaker/install/`

2、请使用命令终端，自行定位到您电脑的目录

cd /icegl-three-vue-tres/

3、输入命里，安装插件

yarn plugin.marker install resourceManager

4、启动预览模式即可：

yarn pre.dev

插件介绍

解决问题

使用 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组件

import { yangyangLoading as loading } from 'PLS/UIdemo'
<template>
    <loading useResourceManager />
</template>

注意：挂载：useResourceManager 属性，启用该功能

可能直接使用<loading /> 可能会出现dom丢失的问题，因为loading内存在异步await，所以建议增加<Suspense>包裹，

<Suspense>
	<loading useResourceManager />
</Suspense>

在引用资源的组件的父节点增加`v-if="Resource.hasAllFinished.value" `

意思为等待所有资源加载完毕，再挂载改组件

<xMeshCom v-if="Resource.hasAllFinished.value" />

自定义loader加载实例

目前默认内置的加载器包含：

loaderMapping: { [key: string]: any } = {
    GLTFLoader: GLTFLoader,
    TextureLoader: THREE.TextureLoader,
    STLLoader: STLLoader,
    RGBELoader: RGBELoader,
    FileLoader: THREE.FileLoader,
}

如果需要增加额外的加载函数，请如下操作：

// 需要增加的自定义加载函数若为：TQK.QuarksLoader
// 那么只需要在加载前 增加下列函数
Resource.loaderMapping.QuarksLoader = TQK.QuarksLoader

// 下面就直接使用了：
Resource.loadResources([{ functionName: 'QuarksLoader', url: './plugins/floor/json/CartoonMagicZone.json' }])

简单演示【页面跳转】