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

PlayerObject constructor now takes Texture

This commit is contained in:
yushijinhun 2020-01-18 22:54:54 +08:00
parent 5e16943ad2
commit 4fa49974b0
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
2 changed files with 13 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/model.ts
View File

@ -1,4 +1,4 @@
import { BoxGeometry, Group, Mesh, MeshBasicMaterial, Object3D, Vector2 } from "three";
import { BoxGeometry, DoubleSide, FrontSide, Group, Mesh, MeshBasicMaterial, Object3D, Texture, Vector2 } from "three";
function toFaceVertices(x1: number, y1: number, x2: number, y2: number, w: number, h: number) {
return [
@ -63,9 +63,12 @@ export class SkinObject extends Group {
private modelListeners: Array<() => void> = []; // called when model(slim property) is changed
private _slim = false;
constructor(layer1Material: MeshBasicMaterial, layer2Material: MeshBasicMaterial) {
constructor(texture: Texture) {
super();
const layer1Material = new MeshBasicMaterial({ map: texture, side: FrontSide });
const layer2Material = new MeshBasicMaterial({ map: texture, transparent: true, opacity: 1, side: DoubleSide, alphaTest: 0.5 });
// Head
const headBox = new BoxGeometry(8, 8, 8, 0, 0, 0);
setVertices(headBox,
@ -369,9 +372,11 @@ export class CapeObject extends Group {
readonly cape: Mesh;
constructor(capeMaterial: MeshBasicMaterial) {
constructor(texture: Texture) {
super();
const capeMaterial = new MeshBasicMaterial({ map: texture, transparent: true, opacity: 1, side: DoubleSide, alphaTest: 0.5 });
// back = outside
// front = inside
const capeBox = new BoxGeometry(10, 16, 1, 0, 0, 0);
@ -395,15 +400,15 @@ export class PlayerObject extends Group {
readonly skin: SkinObject;
readonly cape: CapeObject;
constructor(layer1Material: MeshBasicMaterial, layer2Material: MeshBasicMaterial, capeMaterial: MeshBasicMaterial) {
constructor(skinTexture: Texture, capeTexture: Texture) {
super();
this.skin = new SkinObject(layer1Material, layer2Material);
this.skin = new SkinObject(skinTexture);
this.skin.name = "skin";
this.skin.visible = false;
this.add(this.skin);
this.cape = new CapeObject(capeMaterial);
this.cape = new CapeObject(capeTexture);
this.cape.name = "cape";
this.cape.position.z = -2;
this.cape.position.y = -4;

17
src/viewer.ts
View File

@ -1,4 +1,4 @@
import { DoubleSide, FrontSide, MeshBasicMaterial, NearestFilter, PerspectiveCamera, Scene, Texture, Vector2, WebGLRenderer } from "three";
import { NearestFilter, PerspectiveCamera, Scene, Texture, Vector2, WebGLRenderer } from "three";
import { RootAnimation } from "./animation";
import { PlayerObject } from "./model";
import { isSlimSkin, loadCapeToCanvas, loadSkinToCanvas } from "skinview-utils";
@ -28,10 +28,6 @@ export class SkinViewer {
public readonly capeCanvas: HTMLCanvasElement;
public readonly capeTexture: Texture;
public readonly layer1Material: MeshBasicMaterial;
public readonly layer2Material: MeshBasicMaterial;
public readonly capeMaterial: MeshBasicMaterial;
public readonly scene: Scene;
public readonly camera: PerspectiveCamera;
public readonly renderer: WebGLRenderer;
@ -59,10 +55,6 @@ export class SkinViewer {
this.capeTexture.magFilter = NearestFilter;
this.capeTexture.minFilter = NearestFilter;
this.layer1Material = new MeshBasicMaterial({ map: this.skinTexture, side: FrontSide });
this.layer2Material = new MeshBasicMaterial({ map: this.skinTexture, transparent: true, opacity: 1, side: DoubleSide, alphaTest: 0.5 });
this.capeMaterial = new MeshBasicMaterial({ map: this.capeTexture, transparent: true, opacity: 1, side: DoubleSide, alphaTest: 0.5 });
// scene
this.scene = new Scene();
@ -75,7 +67,7 @@ export class SkinViewer {
this.renderer.setSize(300, 300); // default size
this.domElement.appendChild(this.renderer.domElement);
this.playerObject = new PlayerObject(this.layer1Material, this.layer2Material, this.capeMaterial);
this.playerObject = new PlayerObject(this.skinTexture, this.capeTexture);
this.playerObject.name = "player";
this.scene.add(this.playerObject);
@ -90,9 +82,6 @@ export class SkinViewer {
}
this.skinTexture.needsUpdate = true;
this.layer1Material.needsUpdate = true;
this.layer2Material.needsUpdate = true;
this.playerObject.skin.visible = true;
};
@ -102,8 +91,6 @@ export class SkinViewer {
loadCapeToCanvas(this.capeCanvas, this.capeImg);
this.capeTexture.needsUpdate = true;
this.capeMaterial.needsUpdate = true;
this.playerObject.cape.visible = true;
};