18 Babylonjs入门进阶 使用Assets Manager加载多个模型

为了方便开发者加载多个模型,Babylon.js从1.14版本引入了AssetsManager类。
此类可用于将模型导入场景活加载文本和二进制文件。
注意:导入的模型具有旋转四元数设置,因此使用rotation设置旋转会发现会旋转到意想不到的位置,如果使用rotation请将rotationQuaternion设置为空。

使用AssetsManager

初始化和创建任务

要使用它,首先要先通过场景进行实例化:

var assetsManager = new BABYLON.AssetsManager(scene);

然后,可以通过管理器的addMeshTask方法添加任务:

var meshTask = assetsManager.addMeshTask("skull task", "", "scenes", "skull.babylon");

每个任务都有一个成功回调和错误回调:

meshTask.onSuccess = function (task) {
    task.loadedMeshes[0].position = BABYLON.Vector3.Zero();
}
meshTask.onError = function (task, message, exception) {
    console.log(message, exception);
}

你也可以使用相同的方式加载文本addTextFileTask和二进制文件addBinaryFileTask

var textTask = assetsManager.addTextFileTask("text task", "msg.txt");
textTask.onSuccess = function(task) {
    console.log(task.text);
}

var binaryTask = assetsManager.addBinaryFileTask("binary task", "grass.jpg");
binaryTask.onSuccess = function (task) {
    // Do something with task.data
}

管理器也支持加载图像addImageTask

var imageTask = assetsManager.addImageTask("image task", "img.jpg");
imageTask.onSuccess = function(task) {
    console.log(task.image.width);
}

管理器也可以通过addTextureTask来创建加载纹理任务:

var textureTask = assetsManager.addTextureTask("image task", "img.jpg");
textureTask.onSuccess = function(task) {
    material.diffuseTexture = task.texture;
}

任务状态和错误处理

每个任务都有一个状态对象,表示当前任务的执行状态。状态由枚举表示,BABYLON.AssetTaskState有4种状态:

  • INIT – 在任务开始执行之前
  • RUNNING – 当任务开始执行但尚未完成时
  • DONE – 当任务成功完成执行时
  • ERROR – 任务失败时

如果任务具有错误状态(BABYLON.AssetTaskState.ERROR),则将向该任务添加新对象:task.errorObject。错误对象定义了2个变量,两个都是可选的:

  • message – 一个很快解释错误的字符串(例如“请求返回404”)
  • exception – 如果在执行期间抛出异常,异常对象将包含堆栈跟踪信息

这样,通过管理器也可以访问错误:

assetsManager.onTaskErrorObservable.add(function(task) {
    console.log('task failed', task.errorObject.message, task.errorObject.exception);
});

管理器回调和观察者模式

管理器自身拥有四个回调:

  • onFinish
  • onProgress
  • onTaskSuccess
  • onTaskError
assetsManager.onProgress = function(remainingCount, totalCount, lastFinishedTask) {
    engine.loadingUIText = 'We are loading the scene. ' + remainingCount + ' out of ' + totalCount + ' items still need to be loaded.';
};

assetsManager.onFinish = function(tasks) {
    engine.runRenderLoop(function() {
        scene.render();
    });
};

管理器还允许你使用观察者回调来处理onFinish,onProgress,onTaskSuccess和onTaskError:

  • onTaskSuccessObservable – 当单个任务成功完成时,将执行已注册的观察者回调。
  • onTaskErrorObservable – 当单个任务失败时,将执行已注册的观察者回调。
  • onProgressObservable – 当单个任务成功完成或失败时,将执行已注册的观察者回调。
  • onTasksDoneObservable – 当所有任务执行完成(成功或失败!)时,将执行已注册的观察者回调
assetsManager.onTaskSuccessObservable.add(function(task) {
    console.log('task successful', task)
});
assetsManager.onTasksDoneObservable.add(function(tasks) {
    var errors = tasks.filter(function(task) {return task.taskState === BABYLON.AssetTaskState.ERROR});
    var successes = tasks.filter(function(task) {return task.taskState !== BABYLON.AssetTaskState.ERROR});
});

开始任务

设置好任务以后,开启必须调用开始:

assetsManager.load();

可用任务

你可以使用管理器去实现加载7种类型数据的任务。
每个任务都使用以下属性扩展AbstractAssetTask类(并实现IAssetTask接口):

onSuccess: (task: IAssetTask) => void;
onError: (task: IAssetTask, message?: string, exception?: any) => void;

isCompleted: boolean = false;
name: string;
taskState: AssetTaskState;
errorObject: { message?: string; exception?: any; };

注意,加载的任务数据类型必须与创建的任务数据类型对应。例如,CubeTextureAssetTask的构造函数签名采用与类BABYLON.CubeTexture相同的变量。变量的顺序可能会有所不同。

MeshAssetTask

MeshAssetTask用于加载外部的模型(.babylon,.obj,.gltf等)。
构造函数配置指定:

constructor(name: string, meshesNames: any, rootUrl: string, sceneFilename: string)

额外属性:

public loadedMeshes: Array<AbstractMesh>;
public loadedParticleSystems: Array<ParticleSystem>;
public loadedSkeletons: Array<Skeleton>;

TextFileAssetTask

用于异步加载(文本)文件。
构造函数配置指定:

constructor(name: string, url: string)

额外属性:

public url: string;
public text: string;

BinaryFileAssetTask

此任务用于加载二进制文件。它与TextFileAssetTask的主要区别在于数据将存储在ArrayBuffer中
构造函数配置指定:

constructor(name: string, url: string)

额外属性:

public url: string;
public data: ArrayBuffer;

ImageAssetTask

此功能将加载图像(.png,.jpg,.gif)。它将创建一个HTMLImageElement对象
构造函数配置指定:

constructor(name: string, url: string)

额外属性:

public url: string;
public image: HTMLImageElement;

TextureAssetTask

这将从提供​​的单个URL创建一个新的BABYLON.Texture。
构造函数配置指定:

constructor(name: string, url: string, noMipmap?: boolean, invertY?: boolean, samplingMode: number = BABYLON.Texture.TRILINEAR_SAMPLINGMODE)

额外属性:

public texture: Texture;

CubeTextureAssetTask

与TextureAssetTask相同,但对于立方体纹理
构造函数配置指定:

constructor(name: string, url: string, extensions?: string[], noMipmap?: boolean, files?: string[])

额外属性:

public texture: CubeTexture;

HDRCubeTextureAssetTask

与CubeTextureAssetTask相同,但适用于HDR立方体纹理
构造函数配置指定:

constructor(name: string, url: string, size?: number, noMipmap = false, generateHarmonics = true, useInGammaSpace = false, usePMREMGenerator = false)

额外属性:

public texture: HDRCubeTexture;

EquiRectangularCubeTextureAssetTask

与CubeTextureAssetTask相同,但对于Equirectangular立方体纹理
构造函数配置指定:

constructor(name: string, url: string, size: number, noMipmap = false, useInGammaSpace = true)

额外属性:

public texture: EquiRectangularCubeTexture;

使用加载屏幕

默认情况下,AssetsManager将在加载资源时显示加载屏幕:
在这里插入图片描述
如果要禁用加载屏幕,则必须设置useDefaultLoadingScreen为false:

assetsManager.useDefaultLoadingScreen = false;

如果ShowLoadingScreen设置为true(默认情况下),则在使用SceneLoader加载场景时也会显示加载屏幕。

BABYLON.SceneLoader.ShowLoadingScreen = false;

同样,您也可以使用以下功能手动显示或隐藏加载屏幕:

engine.displayLoadingUI();
engine.hideLoadingUI();

使用loadingUIText设置显示加载文本:

engine.loadingUIText = "text";

使用loadingUIBackgroundColor方法控制背景颜色:

engine.loadingUIBackgroundColor = "red";

来源:https://blog.csdn.net/qq_30100043/article/details/89007830

WEBGL学习网(WebGLStudy.COM)专注提供WebGL 、ThreeJS、BabylonJS等WEB3D开发案例源码下载。
声明信息:
1. 本站部分资源来源于用户上传和网络,如有侵权请邮件联系站长:1218436398@qq.com!我们将尽快处理。
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源打赏售价用于赞助本站提供的服务支出(包括不限服务器、网络带宽等费用支出)!
7.欢迎加QQ群学习交流:549297468 ,或者搜索微信公众号:WebGL学习网
WEBGL学习网 » 18 Babylonjs入门进阶 使用Assets Manager加载多个模型

发表评论

提供优质的WebGL、ThreeJS源码

立即查看 了解详情