skinview3d - npm Package Compare versions

Comparing version 2.0.0-alpha.2 to 2.0.0-alpha.3

libs/animation.d.ts

@@ -1,2 +0,1 @@
-import { Clock } from "three";
 import { PlayerObject } from "./model.js";
@@ -28,3 +27,3 @@ export interface IAnimation {
     progress: number;
-    readonly clock: Clock;
+    private readonly clock;
     get animation(): RootAnimation;
@@ -31,0 +30,0 @@ get paused(): boolean;

libs/model.d.ts

@@ -0,1 +1,2 @@
+import { ModelType } from "skinview-utils";
 import { Group, Mesh, Object3D, Texture } from "three";
@@ -18,6 +19,6 @@ /**
     private modelListeners;
-    private _slim;
+    private slim;
     constructor(texture: Texture);
-    get slim(): boolean;
-    set slim(value: boolean);
+    get modelType(): ModelType;
+    set modelType(value: ModelType);
     private getBodyParts;
@@ -24,0 +25,0 @@ setInnerLayerVisible(value: boolean): void;

libs/model.js

@@ -47,3 +47,3 @@ import { BoxGeometry, DoubleSide, FrontSide, Group, Mesh, MeshBasicMaterial, Vector2 } from "three";
         this.modelListeners = []; // called when model(slim property) is changed
-        this._slim = false;
+        this.slim = false;
         const layer1 = {
@@ -211,9 +211,9 @@ map: texture,
         this.add(this.leftLeg);
-        this.slim = false;
+        this.modelType = "default";
     }
-    get slim() {
-        return this._slim;
+    get modelType() {
+        return this.slim ? "slim" : "default";
     }
-    set slim(value) {
-        this._slim = value;
+    set modelType(value) {
+        this.slim = value === "slim";
         this.modelListeners.forEach(listener => listener());
@@ -220,0 +220,0 @@ }

libs/viewer.d.ts

@@ -1,22 +0,19 @@
-import { PerspectiveCamera, Scene, Texture, WebGLRenderer } from "three";
+import { CapeContainer, ModelType, SkinContainer, RemoteImage, TextureSource } from "skinview-utils";
+import { PerspectiveCamera, Scene, WebGLRenderer } from "three";
 import { RootAnimation } from "./animation.js";
 import { PlayerObject } from "./model.js";
-export interface SkinViewerOptions {
-    domElement: Node;
-    skinUrl?: string;
-    capeUrl?: string;
+export declare type LoadOptions = {
+    /**
+     * Whether to make the object visible after the texture is loaded. (default: true)
+     */
+    makeVisible?: boolean;
+};
+export declare type SkinViewerOptions = {
     width?: number;
     height?: number;
-    detectModel?: boolean;
-}
-export declare class SkinViewer {
+    skin?: RemoteImage | TextureSource;
+    cape?: RemoteImage | TextureSource;
+};
+declare class SkinViewer {
     readonly domElement: Node;
-    readonly animations: RootAnimation;
-    detectModel: boolean;
-    readonly skinImg: HTMLImageElement;
-    readonly skinCanvas: HTMLCanvasElement;
-    readonly skinTexture: Texture;
-    readonly capeImg: HTMLImageElement;
-    readonly capeCanvas: HTMLCanvasElement;
-    readonly capeTexture: Texture;
     readonly scene: Scene;
@@ -26,7 +23,14 @@ readonly camera: PerspectiveCamera;
     readonly playerObject: PlayerObject;
+    readonly animations: RootAnimation;
+    protected readonly skinCanvas: HTMLCanvasElement;
+    protected readonly capeCanvas: HTMLCanvasElement;
+    private readonly skinTexture;
+    private readonly capeTexture;
     private _disposed;
     private _renderPaused;
-    private _skinSet;
-    private _capeSet;
-    constructor(options: SkinViewerOptions);
+    constructor(domElement: Node, options?: SkinViewerOptions);
+    protected skinLoaded(model: ModelType, options?: LoadOptions): void;
+    protected capeLoaded(options?: LoadOptions): void;
+    protected resetSkin(): void;
+    protected resetCape(): void;
     private draw;
@@ -39,6 +43,2 @@ protected doRender(): void;
     set renderPaused(value: boolean);
-    get skinUrl(): string | null;
-    set skinUrl(url: string | null);
-    get capeUrl(): string | null;
-    set capeUrl(url: string | null);
     get width(): number;
@@ -49,1 +49,4 @@ set width(newWidth: number);
 }
+interface SkinViewer extends SkinContainer<LoadOptions>, CapeContainer<LoadOptions> {
+}
+export { SkinViewer };

libs/viewer.js

@@ -0,19 +1,18 @@
+import { applyMixins, CapeContainer, SkinContainer } from "skinview-utils";
 import { NearestFilter, PerspectiveCamera, Scene, Texture, Vector2, WebGLRenderer } from "three";
 import { RootAnimation } from "./animation.js";
 import { PlayerObject } from "./model.js";
-import { isSlimSkin, loadCapeToCanvas, loadSkinToCanvas } from "skinview-utils";
-export class SkinViewer {
-    constructor(options) {
+function toMakeVisible(options) {
+    if (options && options.makeVisible === false) {
+        return false;
+    }
+    return true;
+}
+class SkinViewer {
+    constructor(domElement, options = {}) {
         this.animations = new RootAnimation();
-        this.detectModel = true;
         this._disposed = false;
         this._renderPaused = false;
-        this._skinSet = false;
-        this._capeSet = false;
-        this.domElement = options.domElement;
-        if (options.detectModel === false) {
-            this.detectModel = false;
-        }
+        this.domElement = domElement;
         // texture
-        this.skinImg = new Image();
         this.skinCanvas = document.createElement("canvas");
@@ -23,3 +22,2 @@ this.skinTexture = new Texture(this.skinCanvas);
         this.skinTexture.minFilter = NearestFilter;
-        this.capeImg = new Image();
         this.capeCanvas = document.createElement("canvas");
@@ -29,3 +27,2 @@ this.capeTexture = new Texture(this.capeCanvas);
         this.capeTexture.minFilter = NearestFilter;
-        // scene
         this.scene = new Scene();
@@ -43,30 +40,35 @@ // Use smaller fov to avoid distortion
         this.scene.add(this.playerObject);
-        // texture loading
-        this.skinImg.crossOrigin = "anonymous";
-        this.skinImg.onerror = () => console.error("Failed loading " + this.skinImg.src);
-        this.skinImg.onload = () => {
-            loadSkinToCanvas(this.skinCanvas, this.skinImg);
-            if (this.detectModel) {
-                this.playerObject.skin.slim = isSlimSkin(this.skinCanvas);
-            }
-            this.skinTexture.needsUpdate = true;
+        window.requestAnimationFrame(() => this.draw());
+        if (options.skin !== undefined) {
+            this.loadSkin(options.skin);
+        }
+        if (options.cape !== undefined) {
+            this.loadCape(options.cape);
+        }
+        if (options.width !== undefined) {
+            this.width = options.width;
+        }
+        if (options.height !== undefined) {
+            this.height = options.height;
+        }
+    }
+    skinLoaded(model, options) {
+        this.skinTexture.needsUpdate = true;
+        this.playerObject.skin.modelType = model;
+        if (toMakeVisible(options)) {
             this.playerObject.skin.visible = true;
-        };
-        this.capeImg.crossOrigin = "anonymous";
-        this.capeImg.onerror = () => console.error("Failed loading " + this.capeImg.src);
-        this.capeImg.onload = () => {
-            loadCapeToCanvas(this.capeCanvas, this.capeImg);
-            this.capeTexture.needsUpdate = true;
+        }
+    }
+    capeLoaded(options) {
+        this.capeTexture.needsUpdate = true;
+        if (toMakeVisible(options)) {
             this.playerObject.cape.visible = true;
-        };
-        if (options.skinUrl !== undefined) {
-            this.skinUrl = options.skinUrl;
         }
-        if (options.capeUrl !== undefined) {
-            this.capeUrl = options.capeUrl;
-        }
-        this.width = options.width === undefined ? 300 : options.width;
-        this.height = options.height === undefined ? 300 : options.height;
-        window.requestAnimationFrame(() => this.draw());
     }
+    resetSkin() {
+        this.playerObject.skin.visible = false;
+    }
+    resetCape() {
+        this.playerObject.cape.visible = false;
+    }
     draw() {
@@ -108,28 +110,2 @@ if (this.disposed || this._renderPaused) {
     }
-    get skinUrl() {
-        return this._skinSet ? this.skinImg.src : null;
-    }
-    set skinUrl(url) {
-        if (url === null) {
-            this._skinSet = false;
-            this.playerObject.skin.visible = false;
-        }
-        else {
-            this._skinSet = true;
-            this.skinImg.src = url;
-        }
-    }
-    get capeUrl() {
-        return this._capeSet ? this.capeImg.src : null;
-    }
-    set capeUrl(url) {
-        if (url === null) {
-            this._capeSet = false;
-            this.playerObject.cape.visible = false;
-        }
-        else {
-            this._capeSet = true;
-            this.capeImg.src = url;
-        }
-    }
     get width() {
@@ -148,2 +124,4 @@ return this.renderer.getSize(new Vector2()).width;
 }
+applyMixins(SkinViewer, [SkinContainer, CapeContainer]);
+export { SkinViewer };
 //# sourceMappingURL=viewer.js.map

package.json

 {
 	"name": "skinview3d",
-	"version": "2.0.0-alpha.2",
+	"version": "2.0.0-alpha.3",
 	"description": "Three.js powered Minecraft skin viewer",
@@ -14,3 +14,3 @@ "main": "libs/skinview3d.js",
 		"test": "npm run test:lint",
-		"dev:watch:modules": "tsc -w -p .",
+		"dev:watch:modules": "tsc -w --declaration --sourceMap --outDir libs -p .",
 		"dev:watch:bundles": "rollup -w -c",
@@ -42,19 +42,19 @@ "dev:serve": "ws",
 	"dependencies": {
-		"skinview-utils": "^0.2.0",
+		"skinview-utils": "^0.5.3",
 		"three": "^0.117.1"
 	},
 	"devDependencies": {
-		"@rollup/plugin-node-resolve": "^8.0.0",
+		"@rollup/plugin-node-resolve": "^8.0.1",
 		"@rollup/plugin-typescript": "^4.1.2",
-		"@typescript-eslint/eslint-plugin": "^3.0.2",
-		"@typescript-eslint/parser": "^3.0.2",
+		"@typescript-eslint/eslint-plugin": "^3.3.0",
+		"@typescript-eslint/parser": "^3.3.0",
 		"@yushijinhun/three-minifier-rollup": "^0.1.7",
-		"eslint": "^7.1.0",
-		"local-web-server": "^4.2.0",
+		"eslint": "^7.2.0",
+		"local-web-server": "^4.2.1",
 		"npm-run-all": "^4.1.5",
 		"rimraf": "^3.0.2",
-		"rollup": "^2.11.2",
+		"rollup": "^2.16.1",
 		"rollup-plugin-terser": "^6.1.0",
-		"typescript": "^3.9.3"
+		"typescript": "^3.9.5"
 	}
 }

README.md

@@ -23,18 +23,21 @@ skinview3d
 <script>
-	let skinViewer = new skinview3d.SkinViewer({
-		domElement: document.getElementById("skin_container"),
-		width: 600,
-		height: 600,
-		skinUrl: "img/skin.png",
-		capeUrl: "img/cape.png"
+	let skinViewer = new skinview3d.SkinViewer(document.getElementById("skin_container"), {
+		width: 300,
+		height: 400,
+		skin: "img/skin.png"
 	});
 
-	// Change the textures
-	skinViewer.skinUrl = "img/skin2.png";
-	skinViewer.capeUrl = "img/cape2.png";
+	// Change viewer size
+	skinViewer.width = 600;
+	skinViewer.height = 800;
 
-	// Resize the skin viewer
-	skinViewer.width = 300;
-	skinViewer.height = 400;
+	// Load another skin
+	skinViewer.loadSkin("img/skin2.png");
 
+	// Load a cape
+	skinViewer.loadCape("img/cape.png");
+
+	// Unload(hide) the cape
+	skinViewer.loadCape(null);
+
 	// Control objects with your mouse!
@@ -41,0 +44,0 @@ let control = skinview3d.createOrbitControls(skinViewer);

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1301106

increased by0.1%

Number of lines in readme file

70

increased by4.48%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

2126

decreased by-0.84%

Dependency changes

• + Addedskinview-utils@0.5.9(transitive)

• - Removedskinview-utils@0.2.1(transitive)

• Updatedskinview-utils@^0.5.3