Ubujira
/
skinview3d
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix ears and add webgl errors

This commit is contained in:
James Harrison 2021-02-23 19:56:55 +00:00
parent c0851c2d79
commit c7e44a78e2
2 changed files with 28 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
examples/index.html
View File

@ -101,6 +101,15 @@
margin-top: 0; margin-top: 0;
padding-left: 20px; padding-left: 20px;
} }
.skin_container_error {
padding: 1rem;
margin: 1rem;
display: inline-block;
background: red;
color: white;
font-weight: bold;
}
</style> </style>
</head> </head>

24
src/viewer.ts
View File

@ -96,13 +96,21 @@ export class SkinViewer {
this.camera.position.y = -8; this.camera.position.y = -8;
this.camera.position.z = 64; this.camera.position.z = 64;
try {
this.renderer = new WebGLRenderer({ this.renderer = new WebGLRenderer({
canvas: this.canvas, canvas: this.canvas,
alpha: options.alpha !== false, // default: true alpha: options.alpha !== false, // default: true
preserveDrawingBuffer: options.preserveDrawingBuffer === true // default: false preserveDrawingBuffer: options.preserveDrawingBuffer === true // default: false
}); });
this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setPixelRatio(window.devicePixelRatio);
} catch(error) {
const errorDiv = document.createElement('div');
errorDiv.classList.add(`${this.canvas.id}_error`);
errorDiv.textContent = "Your browser doesn't support WebGL. You will encounter issues!";
document.body.insertBefore(errorDiv, this.canvas.nextSibling)
this.canvas.remove();
throw "No WebGL Support";
}
this.playerObject = new PlayerObject(this.skinTexture, this.capeTexture, this.earTexture); this.playerObject = new PlayerObject(this.skinTexture, this.capeTexture, this.earTexture);
this.playerObject.name = "player"; this.playerObject.name = "player";
@ -143,7 +151,6 @@ export class SkinViewer {
model?: ModelType | "auto-detect", model?: ModelType | "auto-detect",
options?: LoadOptions options?: LoadOptions
): S extends TextureSource ? void : Promise<void>; ): S extends TextureSource ? void : Promise<void>;
loadSkin( loadSkin(
source: TextureSource | RemoteImage | null, source: TextureSource | RemoteImage | null,
model: ModelType | "auto-detect" = "auto-detect", model: ModelType | "auto-detect" = "auto-detect",
@ -172,7 +179,6 @@ export class SkinViewer {
source: S, source: S,
options?: CapeLoadOptions options?: CapeLoadOptions
): S extends TextureSource ? void : Promise<void>; ): S extends TextureSource ? void : Promise<void>;
loadCape( loadCape(
source: TextureSource | RemoteImage | null, source: TextureSource | RemoteImage | null,
options: CapeLoadOptions = {} options: CapeLoadOptions = {}
@ -201,7 +207,6 @@ export class SkinViewer {
source: S, source: S,
options?: LoadOptions options?: LoadOptions
): S extends TextureSource ? void : Promise<void>; ): S extends TextureSource ? void : Promise<void>;
loadEars( loadEars(
source: TextureSource | RemoteImage | null, source: TextureSource | RemoteImage | null,
options: LoadOptions = {} options: LoadOptions = {}
@ -211,17 +216,12 @@ export class SkinViewer {
} else if (isTextureSource(source)) { } else if (isTextureSource(source)) {
loadEarsToCanvas(this.earsCanvas, source); loadEarsToCanvas(this.earsCanvas, source);
this.earTexture.needsUpdate = true; this.earTexture.needsUpdate = true;
this.playerObject.ears.visible = true;
} else { } else {
return loadImage(source).then(image => this.loadEars(image, options)); return loadImage(source).then(image => this.loadEars(image, options));
} }
} }
protected animateCape(options?: LoadOptions): void {
if(this.capeImage != undefined) {
animateCape(this.capeCanvas, this.capeImage);
}
}
protected resetSkin(): void { protected resetSkin(): void {
this.playerObject.skin.visible = false; this.playerObject.skin.visible = false;
} }
@ -241,7 +241,9 @@ export class SkinViewer {
this.animations.runAnimationLoop(this.playerObject); this.animations.runAnimationLoop(this.playerObject);
this.render(); this.render();
this.animateCape({ makeVisible: false }) if(this.capeImage != undefined) {
this.capeTexture.needsUpdate = animateCape(this.capeCanvas, this.capeImage);
}
window.requestAnimationFrame(() => this.draw()); window.requestAnimationFrame(() => this.draw());
} }