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;
padding-left: 20px;
}
.skin_container_error {
padding: 1rem;
margin: 1rem;
display: inline-block;
background: red;
color: white;
font-weight: bold;
}
</style>
</head>

36
src/viewer.ts
View File

@ -96,13 +96,21 @@ export class SkinViewer {
this.camera.position.y = -8;
this.camera.position.z = 64;
this.renderer = new WebGLRenderer({
canvas: this.canvas,
alpha: options.alpha !== false, // default: true
preserveDrawingBuffer: options.preserveDrawingBuffer === true // default: false
});
this.renderer.setPixelRatio(window.devicePixelRatio);
try {
this.renderer = new WebGLRenderer({
canvas: this.canvas,
alpha: options.alpha !== false, // default: true
preserveDrawingBuffer: options.preserveDrawingBuffer === true // default: false
});
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.name = "player";
@ -143,7 +151,6 @@ export class SkinViewer {
model?: ModelType | "auto-detect",
options?: LoadOptions
): S extends TextureSource ? void : Promise<void>;
loadSkin(
source: TextureSource | RemoteImage | null,
model: ModelType | "auto-detect" = "auto-detect",
@ -172,7 +179,6 @@ export class SkinViewer {
source: S,
options?: CapeLoadOptions
): S extends TextureSource ? void : Promise<void>;
loadCape(
source: TextureSource | RemoteImage | null,
options: CapeLoadOptions = {}
@ -201,7 +207,6 @@ export class SkinViewer {
source: S,
options?: LoadOptions
): S extends TextureSource ? void : Promise<void>;
loadEars(
source: TextureSource | RemoteImage | null,
options: LoadOptions = {}
@ -211,17 +216,12 @@ export class SkinViewer {
} else if (isTextureSource(source)) {
loadEarsToCanvas(this.earsCanvas, source);
this.earTexture.needsUpdate = true;
this.playerObject.ears.visible = true;
} else {
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 {
this.playerObject.skin.visible = false;
}
@ -241,7 +241,9 @@ export class SkinViewer {
this.animations.runAnimationLoop(this.playerObject);
this.render();
this.animateCape({ makeVisible: false })
if(this.capeImage != undefined) {
this.capeTexture.needsUpdate = animateCape(this.capeCanvas, this.capeImage);
}
window.requestAnimationFrame(() => this.draw());
}