skinview3d - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

libs/animation.d.ts

@@ -34,2 +34,3 @@ import { PlayerObject } from "./model.js";
 }
+export declare const IdleAnimation: Animation;
 export declare const WalkingAnimation: Animation;
@@ -36,0 +37,0 @@ export declare const RunningAnimation: Animation;

libs/animation.js

@@ -99,2 +99,14 @@ import { Clock } from "three";
 }
+export const IdleAnimation = (player, time) => {
+    const skin = player.skin;
+    // Multiply by animation's natural speed
+    time *= 2;
+    // Arm swing
+    const basicArmRotationZ = Math.PI * 0.02;
+    skin.leftArm.rotation.z = Math.cos(time) * 0.03 + basicArmRotationZ;
+    skin.rightArm.rotation.z = Math.cos(time + Math.PI) * 0.03 - basicArmRotationZ;
+    // Always add an angle for cape around the x axis
+    const basicCapeRotationX = Math.PI * 0.06;
+    player.cape.rotation.x = Math.sin(time) * 0.01 + basicCapeRotationX;
+};
 export const WalkingAnimation = (player, time) => {
@@ -101,0 +113,0 @@ const skin = player.skin;

libs/model.js

@@ -1,2 +0,2 @@
-import { BoxGeometry, DoubleSide, FrontSide, Group, Mesh, MeshBasicMaterial, Vector2 } from "three";
+import { BoxGeometry, DoubleSide, FrontSide, Group, Mesh, MeshStandardMaterial, Vector2 } from "three";
 function setUVs(box, u, v, width, height, depth, textureWidth, textureHeight) {
@@ -49,7 +49,7 @@ const toFaceVertices = (x1, y1, x2, y2) => [
         this.slim = false;
-        const layer1Material = new MeshBasicMaterial({
+        const layer1Material = new MeshStandardMaterial({
             map: texture,
             side: FrontSide
         });
-        const layer2Material = new MeshBasicMaterial({
+        const layer2Material = new MeshStandardMaterial({
             map: texture,
@@ -78,3 +78,4 @@ side: DoubleSide,
         this.head.add(headMesh, head2Mesh);
-        this.head.position.y = 4;
+        headMesh.position.y = 4;
+        head2Mesh.position.y = 4;
         this.add(this.head);
@@ -207,3 +208,3 @@ // Body
         super();
-        const capeMaterial = new MeshBasicMaterial({
+        const capeMaterial = new MeshStandardMaterial({
             map: texture,
@@ -227,3 +228,3 @@ side: DoubleSide,
         super();
-        const elytraMaterial = new MeshBasicMaterial({
+        const elytraMaterial = new MeshStandardMaterial({
             map: texture,
@@ -276,5 +277,7 @@ side: DoubleSide,
         this.skin.name = "skin";
+        this.skin.position.y = 8;
         this.add(this.skin);
         this.cape = new CapeObject(capeTexture);
         this.cape.name = "cape";
+        this.cape.position.y = 8;
         this.cape.position.z = -2;
@@ -286,2 +289,3 @@ this.cape.rotation.x = 10.8 * Math.PI / 180;
         this.elytra.name = "elytra";
+        this.elytra.position.y = 8;
         this.elytra.position.z = -2;
@@ -288,0 +292,0 @@ this.elytra.visible = false;

libs/viewer.d.ts

 import { ModelType, RemoteImage, TextureSource } from "skinview-utils";
-import { Color, ColorRepresentation, Group, PerspectiveCamera, Scene, Texture, WebGLRenderer } from "three";
+import { Color, ColorRepresentation, PointLight, Group, PerspectiveCamera, Scene, Texture, WebGLRenderer, AmbientLight, Mapping } from "three";
 import { RootAnimation } from "./animation.js";
@@ -56,2 +56,8 @@ import { BackEquipment, PlayerObject } from "./model.js";
     fov?: number;
+    /**
+     * Zoom ratio of the player. Default is 0.9.
+     * This value affects the distance between the object and the camera.
+     * When set to 1.0, the top edge of the player's head coincides with the edge of the view.
+     */
+    zoom?: number;
 }
@@ -66,2 +72,4 @@ export declare class SkinViewer {
     readonly animations: RootAnimation;
+    readonly globalLight: AmbientLight;
+    readonly cameraLight: PointLight;
     readonly skinCanvas: HTMLCanvasElement;
@@ -74,2 +82,3 @@ readonly capeCanvas: HTMLCanvasElement;
     private _renderPaused;
+    private _zoom;
     private animationID;
@@ -86,2 +95,3 @@ private onContextLost;
     loadPanorama<S extends TextureSource | RemoteImage>(source: S): S extends TextureSource ? void : Promise<void>;
+    loadBackground<S extends TextureSource | RemoteImage>(source: S, mapping?: Mapping): S extends TextureSource ? void : Promise<void>;
     private draw;
@@ -109,4 +119,7 @@ /**
     set background(value: null | ColorRepresentation | Texture);
+    adjustCameraDistance(): void;
     get fov(): number;
     set fov(value: number);
+    get zoom(): number;
+    set zoom(value: number);
 }

libs/viewer.js

 import { inferModelType, isTextureSource, loadCapeToCanvas, loadImage, loadSkinToCanvas } from "skinview-utils";
-import { Color, EquirectangularReflectionMapping, Group, NearestFilter, PerspectiveCamera, Scene, Texture, Vector2, WebGLRenderer } from "three";
+import { Color, PointLight, EquirectangularReflectionMapping, Group, NearestFilter, PerspectiveCamera, Scene, Texture, Vector2, WebGLRenderer, AmbientLight } from "three";
 import { RootAnimation } from "./animation.js";
@@ -8,2 +8,4 @@ import { PlayerObject } from "./model.js";
         this.animations = new RootAnimation();
+        this.globalLight = new AmbientLight(0xffffff, 0.4);
+        this.cameraLight = new PointLight(0xffffff, 0.6);
         this.backgroundTexture = null;
@@ -24,3 +26,5 @@ this._disposed = false;
         this.camera = new PerspectiveCamera();
-        this.camera.position.z = 60;
+        this.camera.add(this.cameraLight);
+        this.scene.add(this.camera);
+        this.scene.add(this.globalLight);
         this.renderer = new WebGLRenderer({
@@ -38,3 +42,2 @@ canvas: this.canvas,
         this.playerWrapper.add(this.playerObject);
-        this.playerWrapper.position.y = 8;
         this.scene.add(this.playerWrapper);
@@ -59,2 +62,4 @@ if (options.skin !== undefined) {
         }
+        this.camera.position.z = 1;
+        this._zoom = options.zoom === undefined ? 0.9 : options.zoom;
         this.fov = options.fov === undefined ? 50 : options.fov;
@@ -122,2 +127,5 @@ if (options.renderPaused === true) {
     loadPanorama(source) {
+        return this.loadBackground(source, EquirectangularReflectionMapping);
+    }
+    loadBackground(source, mapping) {
         if (isTextureSource(source)) {
@@ -129,3 +137,5 @@ if (this.backgroundTexture !== null) {
             this.backgroundTexture.image = source;
-            this.backgroundTexture.mapping = EquirectangularReflectionMapping;
+            if (mapping !== undefined) {
+                this.backgroundTexture.mapping = mapping;
+            }
             this.backgroundTexture.needsUpdate = true;
@@ -135,3 +145,3 @@ this.scene.background = this.backgroundTexture;
         else {
-            return loadImage(source).then(image => this.loadPanorama(image));
+            return loadImage(source).then(image => this.loadBackground(image, mapping));
         }
@@ -220,15 +230,29 @@ }
     }
-    get fov() {
-        return this.camera.fov;
-    }
-    set fov(value) {
-        this.camera.fov = value;
-        let distance = 4 + 20 / Math.tan(value / 180 * Math.PI / 2);
+    adjustCameraDistance() {
+        let distance = 4.5 + 16.5 / Math.tan(this.fov / 180 * Math.PI / 2) / this.zoom;
+        // limit distance between 10 ~ 256 (default min / max distance of OrbitControls)
         if (distance < 10) {
             distance = 10;
         }
+        else if (distance > 256) {
+            distance = 256;
+        }
         this.camera.position.multiplyScalar(distance / this.camera.position.length());
         this.camera.updateProjectionMatrix();
     }
+    get fov() {
+        return this.camera.fov;
+    }
+    set fov(value) {
+        this.camera.fov = value;
+        this.adjustCameraDistance();
+    }
+    get zoom() {
+        return this._zoom;
+    }
+    set zoom(value) {
+        this._zoom = value;
+        this.adjustCameraDistance();
+    }
 }
 //# sourceMappingURL=viewer.js.map

package.json

 {
 	"name": "skinview3d",
-	"version": "2.1.0",
+	"version": "2.2.0",
 	"description": "Three.js powered Minecraft skin viewer",
@@ -41,20 +41,20 @@ "main": "libs/skinview3d.js",
 	"dependencies": {
-		"@types/three": "^0.132.0",
+		"@types/three": "^0.136.1",
 		"skinview-utils": "^0.6.2",
-		"three": "^0.132.2"
+		"three": "^0.136.0"
 	},
 	"devDependencies": {
-		"@rollup/plugin-node-resolve": "^13.0.5",
-		"@rollup/plugin-typescript": "^8.2.5",
-		"@typescript-eslint/eslint-plugin": "^4.31.2",
-		"@typescript-eslint/parser": "^4.31.2",
-		"@yushijinhun/three-minifier-rollup": "^0.3.0",
-		"eslint": "^7.32.0",
+		"@rollup/plugin-node-resolve": "^13.1.3",
+		"@rollup/plugin-typescript": "^8.3.0",
+		"@typescript-eslint/eslint-plugin": "^5.9.0",
+		"@typescript-eslint/parser": "^5.9.0",
+		"@yushijinhun/three-minifier-rollup": "^0.3.1",
+		"eslint": "^8.6.0",
 		"local-web-server": "^5.1.1",
 		"npm-run-all": "^4.1.5",
 		"rimraf": "^3.0.2",
-		"rollup": "^2.57.0",
+		"rollup": "^2.63.0",
 		"rollup-plugin-terser": "^7.0.2",
-		"typescript": "^4.4.3"
+		"typescript": "^4.5.4"
 	}
 }

README.md

@@ -50,3 +50,6 @@ skinview3d
 
-	// 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");
@@ -57,2 +60,5 @@
 
+	// Zoom out
+	skinViewer.zoom = 0.5;
+
 	// Control objects with your mouse!
@@ -91,3 +97,15 @@ let control = skinview3d.createOrbitControls(skinViewer);
 
+## Lighting
+By default, there are two lights on the scene. One is an ambient light, and the other is a point light from the camera.
+
+To change the light intensity:
+```js
+skinViewer.cameraLight.intensity = 0.9;
+skinViewer.globalLight.intensity = 0.1;
+```
+
+Setting `globalLight.intensity` to `1.0` and `cameraLight.intensity` to `0.0`
+will completely disable shadows.
+
 # Build
 `npm run build`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1372271

increased by4.35%

Lines of code

2673

increased by4.21%

Number of lines in readme file

109

increased by19.78%

Dependency changes

• + Added@types/three@0.136.1(transitive)

• + Addedthree@0.136.0(transitive)

• - Removed@types/three@0.132.2(transitive)

• - Removedthree@0.132.2(transitive)

• Updated@types/three@^0.136.1

• Updatedthree@^0.136.0