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

add SkinViewer.loadBackground to set plain background image

This commit is contained in:
Haowei Wen 2022-01-08 06:03:43 +08:00
parent 35fe0ecc8c
commit 03a6a03449
2 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -47,7 +47,10 @@ Three.js powered Minecraft skin viewer.
// Set the background color // Set the background color
skinViewer.background = 0x5a76f3; skinViewer.background = 0x5a76f3;
// Set the background to a panoramic image! // Set the background to a normal image
skinViewer.loadBackground("img/background.png");
// Set the background to a panoramic image
skinViewer.loadPanorama("img/panorama1.png"); skinViewer.loadPanorama("img/panorama1.png");
// Change camera FOV // Change camera FOV

20
src/viewer.ts
View File

@ -1,5 +1,5 @@
import { inferModelType, isTextureSource, loadCapeToCanvas, loadImage, loadSkinToCanvas, ModelType, RemoteImage, TextureSource } from "skinview-utils"; import { inferModelType, isTextureSource, loadCapeToCanvas, loadImage, loadSkinToCanvas, ModelType, RemoteImage, TextureSource } from "skinview-utils";
import { Color, ColorRepresentation, PointLight, EquirectangularReflectionMapping, Group, NearestFilter, PerspectiveCamera, Scene, Texture, Vector2, WebGLRenderer, AmbientLight } from "three"; import { Color, ColorRepresentation, PointLight, EquirectangularReflectionMapping, Group, NearestFilter, PerspectiveCamera, Scene, Texture, Vector2, WebGLRenderer, AmbientLight, Mapping } from "three";
import { RootAnimation } from "./animation.js"; import { RootAnimation } from "./animation.js";
import { BackEquipment, PlayerObject } from "./model.js"; import { BackEquipment, PlayerObject } from "./model.js";
@ -241,10 +241,18 @@ export class SkinViewer {
loadPanorama<S extends TextureSource | RemoteImage>( loadPanorama<S extends TextureSource | RemoteImage>(
source: S source: S
): S extends TextureSource ? void : Promise<void> {
return this.loadBackground(source, EquirectangularReflectionMapping);
}
loadBackground<S extends TextureSource | RemoteImage>(
source: S,
mapping?: Mapping
): S extends TextureSource ? void : Promise<void>; ): S extends TextureSource ? void : Promise<void>;
loadPanorama<S extends TextureSource | RemoteImage>( loadBackground<S extends TextureSource | RemoteImage>(
source: S source: S,
mapping?: Mapping
): void | Promise<void> { ): void | Promise<void> {
if (isTextureSource(source)) { if (isTextureSource(source)) {
if (this.backgroundTexture !== null) { if (this.backgroundTexture !== null) {
@ -252,11 +260,13 @@ export class SkinViewer {
} }
this.backgroundTexture = new Texture(); this.backgroundTexture = new Texture();
this.backgroundTexture.image = source; this.backgroundTexture.image = source;
this.backgroundTexture.mapping = EquirectangularReflectionMapping; if (mapping !== undefined) {
this.backgroundTexture.mapping = mapping;
}
this.backgroundTexture.needsUpdate = true; this.backgroundTexture.needsUpdate = true;
this.scene.background = this.backgroundTexture; this.scene.background = this.backgroundTexture;
} else { } else {
return loadImage(source).then(image => this.loadPanorama(image)); return loadImage(source).then(image => this.loadBackground(image, mapping));
} }
} }