44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import { LoadingManager } from 'three';
|
|
|
|
let instance: LoadingManagerWrapper;
|
|
export class LoadingManagerWrapper {
|
|
public manager = new LoadingManager();
|
|
public element = document.createElement('div');
|
|
private _inner = document.createElement('div');
|
|
private _status = document.createElement('span');
|
|
private _barWrapper = document.createElement('div');
|
|
private _bar = document.createElement('div');
|
|
|
|
public static getInstance(): LoadingManagerWrapper {
|
|
if (!instance) {
|
|
instance = new LoadingManagerWrapper();
|
|
}
|
|
return instance;
|
|
}
|
|
|
|
public initialize() {
|
|
this.element.classList.add('loading__wrapper');
|
|
this._inner.classList.add('loading');
|
|
this._status.classList.add('loading__status');
|
|
this._barWrapper.classList.add('loading__bar');
|
|
this._bar.classList.add('loading__bar-inner');
|
|
|
|
this._barWrapper.append(this._bar);
|
|
this._inner.append(this._status, this._barWrapper);
|
|
this.element.append(this._inner);
|
|
|
|
this._status.innerText = 'Loading (0 %)';
|
|
this.manager.onProgress = (url, loaded, total) => {
|
|
const percent = (loaded / total) * 100;
|
|
this._status.innerText = `Loading (${Math.floor(percent)} %)`;
|
|
this._bar.style.setProperty('--loading-percentage', `${percent}%`);
|
|
};
|
|
|
|
this.manager.onLoad = () => {
|
|
this.element.classList.add('loading--complete');
|
|
};
|
|
|
|
document.body.prepend(this.element);
|
|
}
|
|
}
|