render proper character with test animation

(cherry picked from commit 0f3b3a0d6ff8be5e3b1ad47a25943cf1d62cc6eb)
This commit is contained in:
LabyStudio
2022-04-13 16:16:47 +02:00
parent 8db692083b
commit 62a43c2468
6 changed files with 86 additions and 72 deletions
@@ -18,14 +18,19 @@ window.EntityRenderer = class {
// Translate using interpolated position
group.position.setX(interpolatedX);
group.position.setY(interpolatedY);
group.position.setY(interpolatedY + 1.4);
group.position.setZ(interpolatedZ);
// Actual size of the entity
let scale = 7.0 / 120.0;
group.scale.set(scale, scale, scale);
group.scale.set(scale, -scale, scale);
this.model.render(group, 0);
// Rotate entity model
group.rotation.y = MathHelper.toRadians(-entity.yaw + 180);
// Render entity model
let time = Date.now() / 100;
this.model.render(group, time);
}
}
@@ -17,7 +17,7 @@ window.ModelBase = class {
* @param time Animation offset
*/
render(group, time) {
group.updateMatrix();
}
}
@@ -6,33 +6,42 @@ window.ModelPlayer = class extends ModelBase {
constructor() {
super();
let width = 64;
let height = 32;
// Create head ModelRenderer
this.head = new ModelRenderer(0, 0)
this.head = new ModelRenderer(width, height)
.setTextureOffset(0, 0)
.setBox(-4.0, -8.0, -4.0, 8, 8, 8);
// Create body ModelRenderer
this.body = new ModelRenderer(16, 16)
this.body = new ModelRenderer(width, height)
.setTextureOffset(16, 16)
.setBox(-4.0, 0.0, -2.0, 8, 12, 4);
// Right arm ModelRenderer
this.rightArm = new ModelRenderer(40, 16)
this.rightArm = new ModelRenderer(width, height)
.setTextureOffset(40, 16)
.setPosition(-5.0, 2.0, 0.0)
.setBox(-3.0, -2.0, -2.0, 4, 12, 4);
this.rightArm.setPosition(-5.0, 2.0, 0.0);
// Left arm ModelRenderer
this.leftArm = new ModelRenderer(40, 16)
this.leftArm = new ModelRenderer(width, height)
.setTextureOffset(40, 16)
.setPosition(5.0, 2.0, 0.0)
.setBox(-1.0, -2.0, -2.0, 4, 12, 4);
this.leftArm.setPosition(5.0, 2.0, 0.0);
// Right Legs ModelRenderer
this.rightLeg = new ModelRenderer(0, 16)
this.rightLeg = new ModelRenderer(width, height)
.setTextureOffset(0, 16)
.setPosition(-2.0, 12.0, 0.0)
.setBox(-2.0, 0.0, -2.0, 4, 12, 4);
this.rightLeg.setPosition(-2.0, 12.0, 0.0);
// Left leg ModelRenderer
this.leftLeg = new ModelRenderer(0, 16)
this.leftLeg = new ModelRenderer(width, height)
.setTextureOffset(0, 16)
.setPosition(2.0, 12.0, 0.0)
.setBox(-2.0, 0.0, -2.0, 4, 12, 4);
this.leftLeg.setPosition(2.0, 12.0, 0.0);
}
rebuild(tessellator, group) {
@@ -70,6 +79,8 @@ window.ModelPlayer = class extends ModelBase {
this.leftArm.render(group);
this.rightLeg.render(group);
this.leftLeg.render(group);
super.render(group, time);
}
}
@@ -2,13 +2,13 @@ window.ModelRenderer = class {
/**
* Create cube object
*
* @param textureOffsetX x offset position on the texture
* @param textureOffsetY y offset position on the texture
*/
constructor(textureOffsetX, textureOffsetY) {
this.textureOffsetX = textureOffsetX;
this.textureOffsetY = textureOffsetY;
constructor(textureWidth, textureHeight) {
this.textureWidth = textureWidth;
this.textureHeight = textureHeight;
this.textureOffsetX = 0;
this.textureOffsetY = 0;
this.xRotation = 0;
this.yRotation = 0;
@@ -31,9 +31,7 @@ window.ModelRenderer = class {
this.textureOffsetX = textureOffsetX;
this.textureOffsetY = textureOffsetY;
this.xRotation = 0;
this.yRotation = 0;
this.zRotation = 0;
return this;
}
/**
@@ -54,16 +52,16 @@ window.ModelRenderer = class {
let z = offsetZ + depth;
// Create bottom vertex points of cube
let vertexBottom1 = new Vertex(offsetX, offsetY, offsetZ, 0.0, 0.0);
let vertexBottom2 = new Vertex(x, offsetY, offsetZ, 0.0, 8.0);
let vertexBottom3 = new Vertex(offsetX, offsetY, z, 0.0, 0.0);
let vertexBottom4 = new Vertex(x, offsetY, z, 0.0, 8.0);
let vertexBottom1 = new Vertex(offsetX, offsetY, offsetZ);
let vertexBottom2 = new Vertex(x, offsetY, offsetZ);
let vertexBottom3 = new Vertex(offsetX, offsetY, z);
let vertexBottom4 = new Vertex(x, offsetY, z);
// Create top vertex points of cube
let vertexTop1 = new Vertex(x, y, z, 8.0, 8.0);
let vertexTop2 = new Vertex(offsetX, y, z, 8.0, 0.0);
let vertexTop3 = new Vertex(x, y, offsetZ, 8.0, 8.0);
let vertexTop4 = new Vertex(offsetX, y, offsetZ, 8.0, 0.0);
let vertexTop1 = new Vertex(x, y, z);
let vertexTop2 = new Vertex(offsetX, y, z);
let vertexTop3 = new Vertex(x, y, offsetZ);
let vertexTop4 = new Vertex(offsetX, y, offsetZ);
// Create polygons for each cube side
this.polygons[0] = new Polygon(
@@ -71,7 +69,8 @@ window.ModelRenderer = class {
this.textureOffsetX + depth + width,
this.textureOffsetY + depth,
this.textureOffsetX + depth + width + depth,
this.textureOffsetY + depth + height
this.textureOffsetY + depth + height,
this.textureWidth, this.textureHeight
);
this.polygons[1] = new Polygon(
@@ -79,7 +78,8 @@ window.ModelRenderer = class {
this.textureOffsetX,
this.textureOffsetY + depth,
this.textureOffsetX + depth,
this.textureOffsetY + depth + height
this.textureOffsetY + depth + height,
this.textureWidth, this.textureHeight
);
this.polygons[2] = new Polygon(
@@ -87,7 +87,8 @@ window.ModelRenderer = class {
this.textureOffsetX + depth,
this.textureOffsetY,
this.textureOffsetX + depth + width,
this.textureOffsetY + depth
this.textureOffsetY + depth,
this.textureWidth, this.textureHeight
);
this.polygons[3] = new Polygon(
@@ -95,7 +96,8 @@ window.ModelRenderer = class {
this.textureOffsetX + depth + width,
this.textureOffsetY,
this.textureOffsetX + depth + width + width,
this.textureOffsetY + depth
this.textureOffsetY + depth,
this.textureWidth, this.textureHeight
);
this.polygons[4] = new Polygon(
@@ -103,7 +105,8 @@ window.ModelRenderer = class {
this.textureOffsetX + depth,
this.textureOffsetY + depth,
this.textureOffsetX + depth + width,
this.textureOffsetY + depth + height
this.textureOffsetY + depth + height,
this.textureWidth, this.textureHeight
);
this.polygons[5] = new Polygon(
@@ -111,7 +114,8 @@ window.ModelRenderer = class {
this.textureOffsetX + depth + width + depth,
this.textureOffsetY + depth,
this.textureOffsetX + depth + width + depth + width,
this.textureOffsetY + depth + height
this.textureOffsetY + depth + height,
this.textureWidth, this.textureHeight
);
return this;
@@ -128,6 +132,7 @@ window.ModelRenderer = class {
this.x = x;
this.y = y;
this.z = z;
return this;
}
rebuild(tessellator, group) {
@@ -154,6 +159,8 @@ window.ModelRenderer = class {
this.bone.rotation.x = this.xRotation;
this.bone.rotation.y = this.yRotation;
this.bone.rotation.z = this.zRotation;
this.bone.updateMatrix();
}
}
@@ -1,23 +1,23 @@
window.Polygon = class {
/**
* Bind UV mappings on the vertices
*
* @param vertices Vertex array
* @param minU Minimum U coordinate
* @param minV Minimum V coordinate
* @param maxU Maximum U coordinate
* @param maxV Maximum V coordinate
*/
constructor(vertices, minU, minV, maxU, maxV) {
constructor(vertices, minU, minV, maxU, maxV, textureWidth, textureHeight) {
this.vertices = vertices;
this.vertexCount = vertices.length;
minU /= textureWidth;
minV /= textureHeight;
maxU /= textureWidth;
maxV /= textureHeight;
// Flip V
minV = 1 - minV;
maxV = 1 - maxV;
// Map UV on vertices
vertices[0] = vertices[0].remap(maxU, minV);
vertices[1] = vertices[1].remap(minU, minV);
vertices[2] = vertices[2].remap(minU, maxV);
vertices[3] = vertices[3].remap(maxU, maxV);
vertices[0] = Vertex.create(vertices[0].position).withUV(maxU, minV);
vertices[1] = Vertex.create(vertices[1].position).withUV(minU, minV);
vertices[2] = Vertex.create(vertices[2].position).withUV(minU, maxV);
vertices[3] = Vertex.create(vertices[3].position).withUV(maxU, maxV);
}
render(tessellator) {
@@ -29,13 +29,7 @@ window.Polygon = class {
let vertex = this.vertices[i];
// Bind UV mappings and render vertex
tessellator.addVertexWithUV(
vertex.position.x,
vertex.position.y,
vertex.position.z,
vertex.u / 64.0,
vertex.v / 32.0
);
tessellator.addVertexWithUV(vertex.position.x, vertex.position.y, vertex.position.z, vertex.u, vertex.v);
}
}
}
@@ -6,24 +6,21 @@ window.Vertex = class {
* @param x X position
* @param y Y position
* @param z Z position
* @param u U mapping
* @param v V mapping
*/
constructor(x, y, z, u, v) {
constructor(x, y, z) {
this.position = new Vector3(x, y, z);
this.u = u;
this.v = v;
this.u = 0;
this.v = 0;
}
/**
* Create a new vertex of the current one with different UV mappings
*
* @param u New U mapping
* @param v New V mapping
* @return New vertex with the vector position of the current one
*/
remap(u, v) {
return new Vertex(this.position.x, this.position.y, this.position.z, u, v);
withUV(u, v) {
this.u = u;
this.v = v;
return this;
}
static create(vector) {
return new Vertex(vector.x, vector.y, vector.z);
}
}