integrate viewer-mixins.ts into viewer.ts

This commit is contained in:
Haowei Wen 2020-12-25 02:56:59 +08:00
parent 4cdd21661b
commit f5c7692c8d
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
3 changed files with 4146 additions and 44 deletions

4118
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -38,7 +38,7 @@
"bundles" "bundles"
], ],
"dependencies": { "dependencies": {
"skinview-utils": "^0.5.9", "skinview-utils": "^0.6.0",
"three": "^0.122.0" "three": "^0.122.0"
}, },
"devDependencies": { "devDependencies": {

View File

@ -1,4 +1,4 @@
import { applyMixins, CapeContainer, ModelType, SkinContainer, RemoteImage, TextureSource } from "skinview-utils"; import { inferModelType, isTextureSource, loadCapeToCanvas, loadImage, loadSkinToCanvas, ModelType, RemoteImage, TextureSource } from "skinview-utils";
import { NearestFilter, PerspectiveCamera, Scene, Texture, Vector2, WebGLRenderer } from "three"; import { NearestFilter, PerspectiveCamera, Scene, Texture, Vector2, WebGLRenderer } from "three";
import { RootAnimation } from "./animation.js"; import { RootAnimation } from "./animation.js";
import { BackEquipment, PlayerObject } from "./model.js"; import { BackEquipment, PlayerObject } from "./model.js";
@ -48,7 +48,7 @@ export interface SkinViewerOptions {
renderPaused?: boolean; renderPaused?: boolean;
} }
class SkinViewer { export class SkinViewer {
readonly canvas: HTMLCanvasElement; readonly canvas: HTMLCanvasElement;
readonly scene: Scene; readonly scene: Scene;
readonly camera: PerspectiveCamera; readonly camera: PerspectiveCamera;
@ -119,26 +119,61 @@ class SkinViewer {
} }
} }
protected skinLoaded(model: ModelType, options: LoadOptions = {}): void { loadSkin(empty: null): void;
this.skinTexture.needsUpdate = true; loadSkin<S extends TextureSource | RemoteImage>(
this.playerObject.skin.modelType = model; source: S,
if (options.makeVisible !== false) { model?: ModelType | "auto-detect",
this.playerObject.skin.visible = true; options?: LoadOptions
): S extends TextureSource ? void : Promise<void>;
loadSkin(
source: TextureSource | RemoteImage | null,
model: ModelType | "auto-detect" = "auto-detect",
options: LoadOptions = {}
): void | Promise<void> {
if (source === null) {
this.resetSkin();
} else if (isTextureSource(source)) {
loadSkinToCanvas(this.skinCanvas, source);
const actualModel = model === "auto-detect" ? inferModelType(this.skinCanvas) : model;
this.skinTexture.needsUpdate = true;
this.playerObject.skin.modelType = actualModel;
if (options.makeVisible !== false) {
this.playerObject.skin.visible = true;
}
} else {
return loadImage(source).then(image => this.loadSkin(image, model, options));
} }
} }
protected capeLoaded(options: CapeLoadOptions = {}): void { resetSkin(): void {
this.capeTexture.needsUpdate = true;
if (options.makeVisible !== false) {
this.playerObject.backEquipment = options.backEquipment === undefined ? "cape" : options.backEquipment;
}
}
protected resetSkin(): void {
this.playerObject.skin.visible = false; this.playerObject.skin.visible = false;
} }
protected resetCape(): void { loadCape(empty: null): void;
loadCape<S extends TextureSource | RemoteImage>(
source: S,
options?: CapeLoadOptions
): S extends TextureSource ? void : Promise<void>;
loadCape(
source: TextureSource | RemoteImage | null,
options: CapeLoadOptions = {}
): void | Promise<void> {
if (source === null) {
this.resetCape();
} else if (isTextureSource(source)) {
loadCapeToCanvas(this.capeCanvas, source);
this.capeTexture.needsUpdate = true;
if (options.makeVisible !== false) {
this.playerObject.backEquipment = options.backEquipment === undefined ? "cape" : options.backEquipment;
}
} else {
return loadImage(source).then(image => this.loadCape(image, options));
}
}
resetCape(): void {
this.playerObject.backEquipment = null; this.playerObject.backEquipment = null;
} }
@ -209,6 +244,3 @@ class SkinViewer {
this.setSize(this.width, newHeight); this.setSize(this.width, newHeight);
} }
} }
interface SkinViewer extends SkinContainer<LoadOptions>, CapeContainer<CapeLoadOptions> { }
applyMixins(SkinViewer, [SkinContainer, CapeContainer]);
export { SkinViewer };