资源加载

引擎通常需要加载不同的资源文件，为了统一管理所有文件的加载和读取，我们在 vjmap3d 里封装了统一的资源管理器，可以方便用户加载，存储和读取各种文件资源。

LoaderManager

LoaderManager 用于加载不同的资源。

默认情况下，LoaderManager通过资源文件路径类型后缀来根据不同的加载器来加载资源。

LoadManager 是LoaderManager的单例对象`。

默认加载器

常用方法

坑位：register 注册的自定义 loader 必须实现 setPath(path) 方法——getLoader() 命中后缀后内部会调 loader.setPath(this.path)，缺失该方法时 getLoader 直接抛 xxx.setPath is not a function（而不是返回 null）。未知后缀才会返回 null/undefined。

信号事件

通过指定加载类型进行加载

let gltf = vjmap3d.LoadManager.gltfLoader;
//let gltf = vjmap3d.LoadManager.getLoader("gltf");  // 或者也可以这么写
gltf.load(env.assetsPath + "models/soldier.glb", ( gltf ) => {
    const root = gltf.scene;
    app.scene.add( root );
})

直接传资源路径，自动加载

vjmap3d.LoadManager.load(env.assetsPath + "models/soldier.glb", false,
    (resource) => {
    // onLoad
        console.log("onLoad", resource)
        app.scene.add(resource.scene)
    },
    (event) => {
    // onProgress
        console.log("onProgress", event)
    },
    (event) => {
    // onError
        console.error(event)
    },
    "glb" // fileType: 
)

let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
container: "map", // 容器id
    scene: {  // 场景设置
        gridHelper: { visible: true } // 是否显示坐标网格
    }
})
let gltf = vjmap3d.LoadManager.gltfLoader;
//let gltf = vjmap3d.LoadManager.getLoader("gltf");  // 或者也可以这么写
gltf.load(env.assetsPath + "models/soldier.glb", ( gltf ) => {
    const root = gltf.scene;
    app.scene.add( root );
})

ResourceManager

ResourceManager 用于资源加载管理，内部通过 loaderManager 加载资源。

ResManager 是ResourceManager的单例对象`。

常用方法

加载模型

let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
    container: "map", // 容器id
})
let ent = await vjmap3d.ResManager.loadModel(env.assetsPath + "models/soldier.glb", {
    splitSubEntity: true,
    anchor: "front-bottom-right"
});
ent.addTo(app);

let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
    container: "map", // 容器id
})
let ent = await vjmap3d.ResManager.loadModel(env.assetsPath + "models/soldier.glb", {
    splitSubEntity: true,
    anchor: "front-bottom-right"
});
ent.addTo(app);

加载材质

// 同步返回 Texture 对象（图像内容异步填充），无需 await
let texture = vjmap3d.ResManager.loadTexture(env.assetsPath + "image/sensor1.png")
// 返回 Promise<Texture>，await 得到加载完成的纹理
let texture2 = await vjmap3d.ResManager.loadTextureSync(env.assetsPath + "image/sensor1.png")

对于有复杂步骤的加载，如obj需要先加载mtl文件做为材质，可这样实现:

// 如果是obj，需要先加载mtl文件
 let materials = await vjmap3d.ResManager.loadRes(env.assetsPath + "models/table/table.mtl", true);
 materials.preload();
 let loader = vjmap3d.LoadManager.getLoader("obj");
 // 设置材质
 loader.setMaterials(materials);
 let ent = await vjmap3d.ResManager.loadModel(env.assetsPath + "models/table/table.obj", {
    size: 5,
    splitSubEntity: true,
    useCache: true
});
ent.addTo(app);
//  取消设置材质
vjmap3d.LoadManager.getLoader("obj")?.setMaterials(null);

let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
container: "map", // 容器id
    scene: {  // 场景设置
        gridHelper: { visible: true } // 是否显示坐标网格
    }
})
 // 如果是obj，需要先加载mtl文件
 let materials = await vjmap3d.ResManager.loadRes(env.assetsPath + "models/table/table.mtl", true);
 materials.preload();
 let loader = vjmap3d.LoadManager.getLoader("obj");
 // 设置材质
 loader.setMaterials(materials);
 let ent = await vjmap3d.ResManager.loadModel(env.assetsPath + "models/table/table.obj", {
    size: 5,
    splitSubEntity: true,
    useCache: true
});
ent.addTo(app);
//  取消设置材质
vjmap3d.LoadManager.getLoader("obj")?.setMaterials(null);

应用初始资源加载

对于一个应用，如果在应用初始的时候需要加载，并且有进度条显示，可使用 loadResources 加载资源数组

const resources = [
  {
    name: "sm_car",
    url: "mesh/sm_car.gltf",
    type: "model"
  },
  {
    name: "ut_car_body_ao",
    url: "texture/t_car_body_AO.raw.jpg",
    type: "texture"
  },
  {
    name: "skybox",
    type: "hdr",
    url: "./skybox_512px.hdr",
  },
  {
    name: "algorithm",
    type: "plugin",
    url: "algorithm",
  }
];
let allResources = await app.loadResources(resources, {
    showShadertoy: false,
    showHtml: true
});
// 根据名称获取资源
let car = allResources.getResource("sm_car");
car.addTo(app);

let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
container: "map", // 容器id
    scene: {  // 场景设置
        gridHelper: { visible: true } // 是否显示坐标网格
    }
})
const resources = [
    {
      name: "car",
      url: env.assetsPath + "models/car.glb",
      type: "model"
    },
    {
        name: "soldier",
        url: env.assetsPath + "models/soldier.glb",
        type: "model"
    },
    {
        name: "skybox",
        type: "hdr",
        url: env.assetsPath + "skybox/skybox_512px.hdr",
      },
  ];
  let allResources = await app.loadResources(resources, {
      showShadertoy: false,
      showHtml: true
  });
 // 设置背景和环境
 app.setBackgroundEnvironment({
    background: {
        texture: allResources.getResource("skybox")
    },
    environmentSameAsBackground: false
});
// 根据名称获取资源
let soldier = allResources.getResource("soldier");
soldier.addTo(app);
let car = allResources.getResource("car");
car.position.set(2, 0, 2)
car.addTo(app)