three.js模型及贴图资源预加载

在three.js场景中同城交互是loading页面在模型及贴图资源全部加载完之后隐藏，使得场景没有割裂感，这里就用到了three.js的预加载功能LoadingManager()

下面是代码示例：

// 预加载
var loadingManager = new THREE.LoadingManager();
loadingManager.onProgress = function ( item, loaded, total ) {
    const  percentComplete =  parseInt(Math.round( (loaded / total) * 100, 2))+'%'
    //加载页的进度条百分比交互在这里写
};
loadingManager.onLoad = function () {
    // 所有资源都加载完成后执行事件
    $('.loading-page').hide()
};

//贴图预加载
var textureLoader = new THREE.TextureLoader(loadingManager);
//模型预加载
var gltfLoader = new THREE.GLTFLoader(loadingManager)
var fbxLoader = new THREE.FBXLoader(loadingManager)

//贴图引用
var texture = textureLoader.load( "../images/floor.jpg" );
texture.repeat.set( 1,1 );
var baseGeometry = new THREE.PlaneGeometry(300, 300)
var floor = new THREE.Mesh( baseGeometry,
    new THREE.MeshBasicMaterial({ map: texture }),
);
floor.rotateX(-Math.PI/2)
scene.add(floor);

//gltf和glb模型加载
gltfLoader.load('./man.glb', function(object){
    scene.add(object.scene)
    object.scene.position.set(0,0,0)
})

//fbx模型加载
fbxLoader.load('./man.fbx', function(object){
    scene.add(object)
    object.position.set(0,0,0)
})

所有模型及贴图资源都使用预加载后，就会实现场景中所有内容加载完之后才能预览的效果啦！