diff --git a/spine-ts/spine-threejs/example/shadows.html b/spine-ts/spine-threejs/example/shadows.html index e0ea4c2de..157ac6709 100644 --- a/spine-ts/spine-threejs/example/shadows.html +++ b/spine-ts/spine-threejs/example/shadows.html @@ -202,8 +202,6 @@ skeletonMesh2.castShadow = true; skeletonMesh2.receiveShadow = true; - - skeletonMesh3 = new spine.SkeletonMesh({ skeletonData: skeletonData3, premultipliedAlpha: true, diff --git a/spine-ts/spine-threejs/src/MeshBatcher.ts b/spine-ts/spine-threejs/src/MeshBatcher.ts index b2f87d718..7b593fa1b 100644 --- a/spine-ts/spine-threejs/src/MeshBatcher.ts +++ b/spine-ts/spine-threejs/src/MeshBatcher.ts @@ -27,10 +27,10 @@ * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. *****************************************************************************/ -import { BlendMode } from "@esotericsoftware/spine-core"; +import type { BlendMode } from "@esotericsoftware/spine-core"; import * as THREE from "three" import { SkeletonMesh } from "./SkeletonMesh.js"; -import { ThreeBlendOptions, ThreeJsTexture } from "./ThreeJsTexture.js"; +import { type ThreeBlendOptions, ThreeJsTexture } from "./ThreeJsTexture.js"; export type MaterialWithMap = THREE.Material & { map: THREE.Texture | null }; export class MeshBatcher extends THREE.Mesh { @@ -52,7 +52,7 @@ export class MeshBatcher extends THREE.Mesh { ) { super(); - if (maxVertices > MeshBatcher.MAX_VERTICES) throw new Error("Can't have more than 10920 triangles per batch: " + maxVertices); + if (maxVertices > MeshBatcher.MAX_VERTICES) throw new Error(`Can't have more than 10920 triangles per batch: ${maxVertices}`); if (twoColorTint) { this.vertexSize += 3; @@ -99,7 +99,7 @@ export class MeshBatcher extends THREE.Mesh { this.material.dispose(); else if (this.material) { for (let i = 0; i < this.material.length; i++) { - let material = this.material[i]; + const material = this.material[i]; if (material instanceof THREE.Material) material.dispose(); } @@ -107,7 +107,7 @@ export class MeshBatcher extends THREE.Mesh { } clear () { - let geo = (this.geometry); + const geo = (this.geometry); geo.drawRange.start = 0; geo.drawRange.count = 0; geo.clearGroups(); @@ -138,8 +138,8 @@ export class MeshBatcher extends THREE.Mesh { } batch (vertices: ArrayLike, verticesLength: number, indices: ArrayLike, indicesLength: number, z: number = 0) { - let indexStart = this.verticesLength / this.vertexSize; - let vertexBuffer = this.vertices; + const indexStart = this.verticesLength / this.vertexSize; + const vertexBuffer = this.vertices; let i = this.verticesLength; let j = 0; if (this.twoColorTint) { @@ -178,7 +178,7 @@ export class MeshBatcher extends THREE.Mesh { } this.verticesLength = i; - let indicesArray = this.indices; + const indicesArray = this.indices; for (i = this.indicesLength, j = 0; j < indicesLength; i++, j++) indicesArray[i] = indices[j] + indexStart; this.indicesLength += indicesLength; @@ -187,9 +187,9 @@ export class MeshBatcher extends THREE.Mesh { end () { this.vertexBuffer.needsUpdate = this.verticesLength > 0; this.vertexBuffer.addUpdateRange(0, this.verticesLength); - let geo = (this.geometry); + const geo = (this.geometry); this.closeMaterialGroups(); - let index = geo.getIndex(); + const index = geo.getIndex(); if (!index) throw new Error("BufferAttribute must not be null."); index.needsUpdate = this.indicesLength > 0; index.addUpdateRange(0, this.indicesLength); @@ -277,7 +277,7 @@ export class MeshBatcher extends THREE.Mesh { const spineOnBeforeCompile = (shader: THREE.WebGLProgramParametersWithUniforms) => { - let code; + let code: string; // VERTEX SHADER MODIFICATIONS @@ -286,7 +286,7 @@ const spineOnBeforeCompile = (shader: THREE.WebGLProgramParametersWithUniforms) #if defined( USE_SPINE_DARK_TINT ) attribute vec3 darkcolor; #endif - ` + shader.vertexShader; + ${shader.vertexShader}`; // Add dark color attribute code = ` @@ -368,7 +368,7 @@ export class SkeletonMeshMaterial extends THREE.ShaderMaterial { constructor (parameters: THREE.ShaderMaterialParameters) { - let vertexShader = ` + const vertexShader = ` varying vec2 vUv; varying vec4 vColor; void main() { @@ -377,7 +377,7 @@ export class SkeletonMeshMaterial extends THREE.ShaderMaterial { gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1.0); } `; - let fragmentShader = ` + const fragmentShader = ` uniform sampler2D map; #ifdef USE_SPINE_ALPHATEST uniform float alphaTest; diff --git a/spine-ts/spine-threejs/src/SkeletonMesh.ts b/spine-ts/spine-threejs/src/SkeletonMesh.ts index bf70a5dcb..abbfa8ec9 100644 --- a/spine-ts/spine-threejs/src/SkeletonMesh.ts +++ b/spine-ts/spine-threejs/src/SkeletonMesh.ts @@ -27,27 +27,27 @@ * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. *****************************************************************************/ -import * as THREE from "three"; import { AnimationState, AnimationStateData, ClippingAttachment, Color, MeshAttachment, - NumberArrayLike, + type NumberArrayLike, Physics, RegionAttachment, Skeleton, - SkeletonClipping, - SkeletonData, SkeletonBinary, + SkeletonClipping, + type SkeletonData, SkeletonJson, Utils, Vector2, } from "@esotericsoftware/spine-core"; +import * as THREE from "three"; -import { MaterialWithMap, MeshBatcher } from "./MeshBatcher.js"; -import { ThreeJsTexture } from "./ThreeJsTexture.js"; +import { type MaterialWithMap, MeshBatcher } from "./MeshBatcher.js"; +import type { ThreeJsTexture } from "./ThreeJsTexture.js"; type SkeletonMeshMaterialParametersCustomizer = (materialParameters: THREE.MaterialParameters) => void; type SkeletonMeshConfiguration = { @@ -93,7 +93,7 @@ export class SkeletonMesh extends THREE.Object3D { state: AnimationState; zOffset: number = 0.1; - private batches = new Array(); + private batches = [] as MeshBatcher[]; private materialFactory: (parameters: THREE.MaterialParameters) => MaterialWithMap; private nextBatchIndex = 0; private clipper: SkeletonClipping = new SkeletonClipping(); @@ -148,7 +148,7 @@ export class SkeletonMesh extends THREE.Object3D { this.materialFactory = skeletonDataOrConfiguration.materialFactory ?? (() => new THREE.MeshBasicMaterial(SkeletonMesh.DEFAULT_MATERIAL_PARAMETERS)); this.skeleton = new Skeleton(skeletonDataOrConfiguration.skeletonData); - let animData = new AnimationStateData(skeletonDataOrConfiguration.skeletonData); + const animData = new AnimationStateData(skeletonDataOrConfiguration.skeletonData); this.state = new AnimationState(animData); Object.defineProperty(this, 'castShadow', { @@ -178,8 +178,8 @@ export class SkeletonMesh extends THREE.Object3D { } update (deltaTime: number) { - let state = this.state; - let skeleton = this.skeleton; + const state = this.state; + const skeleton = this.skeleton; state.update(deltaTime); state.apply(skeleton); @@ -190,13 +190,13 @@ export class SkeletonMesh extends THREE.Object3D { } dispose () { - for (var i = 0; i < this.batches.length; i++) { + for (let i = 0; i < this.batches.length; i++) { this.batches[i].dispose(); } } private clearBatches () { - for (var i = 0; i < this.batches.length; i++) { + for (let i = 0; i < this.batches.length; i++) { this.batches[i].clear(); this.batches[i].visible = false; } @@ -204,14 +204,14 @@ export class SkeletonMesh extends THREE.Object3D { } private nextBatch () { - if (this.batches.length == this.nextBatchIndex) { - let batch = new MeshBatcher(MeshBatcher.MAX_VERTICES, this.materialFactory, this.twoColorTint); + if (this.batches.length === this.nextBatchIndex) { + const batch = new MeshBatcher(MeshBatcher.MAX_VERTICES, this.materialFactory, this.twoColorTint); batch.castShadow = this._castShadow; batch.receiveShadow = this._receiveShadow; this.add(batch); this.batches.push(batch); } - let batch = this.batches[this.nextBatchIndex++]; + const batch = this.batches[this.nextBatchIndex++]; batch.visible = true; return batch; } @@ -219,26 +219,26 @@ export class SkeletonMesh extends THREE.Object3D { private updateGeometry () { this.clearBatches(); - let clipper = this.clipper; + const clipper = this.clipper; let vertices: NumberArrayLike = this.vertices; let triangles: Array | null = null; let uvs: NumberArrayLike | null = null; const skeleton = this.skeleton; - let drawOrder = skeleton.drawOrder; + const drawOrder = skeleton.drawOrder; let batch = this.nextBatch(); batch.begin(); let z = 0; - let zOffset = this.zOffset; - let vertexSize = this.vertexSize; + const zOffset = this.zOffset; + const vertexSize = this.vertexSize; for (let i = 0, n = drawOrder.length; i < n; i++) { - let slot = drawOrder[i]; + const slot = drawOrder[i]; if (!slot.bone.active) { clipper.clipEnd(slot); continue; } - let pose = slot.applied; - let attachment = pose.attachment; + const pose = slot.applied; + const attachment = pose.attachment; let attachmentColor: Color | null; let texture: ThreeJsTexture | null; let numFloats = 0; @@ -249,7 +249,7 @@ export class SkeletonMesh extends THREE.Object3D { attachment.computeWorldVertices(slot, vertices, 0, vertexSize); triangles = SkeletonMesh.QUAD_TRIANGLES; uvs = attachment.uvs; - texture = attachment.region!.texture; + texture = attachment.region?.texture; } else if (attachment instanceof MeshAttachment) { attachmentColor = attachment.color; vertices = this.vertices; @@ -268,7 +268,7 @@ export class SkeletonMesh extends THREE.Object3D { ); triangles = attachment.triangles; uvs = attachment.uvs; - texture = attachment.region!.texture; + texture = attachment.region?.texture; } else if (attachment instanceof ClippingAttachment) { clipper.clipEnd(slot); clipper.clipStart(skeleton, slot, attachment); @@ -279,10 +279,10 @@ export class SkeletonMesh extends THREE.Object3D { } if (texture != null) { - let skeletonColor = skeleton.color; - let slotColor = pose.color; - let alpha = skeletonColor.a * slotColor.a * attachmentColor.a; - let color = this.tempColor; + const skeletonColor = skeleton.color; + const slotColor = pose.color; + const alpha = skeletonColor.a * slotColor.a * attachmentColor.a; + const color = this.tempColor; color.set( skeletonColor.r * slotColor.r * attachmentColor.r * alpha, skeletonColor.g * slotColor.g * attachmentColor.g * alpha, @@ -290,7 +290,7 @@ export class SkeletonMesh extends THREE.Object3D { alpha ); - let darkColor = this.tempDarkColor; + const darkColor = this.tempDarkColor; if (!pose.darkColor) darkColor.set(0, 0, 0, 1); else { @@ -306,14 +306,14 @@ export class SkeletonMesh extends THREE.Object3D { let finalIndicesLength: number; if (clipper.isClipping() && clipper.clipTriangles(vertices, triangles, triangles.length, uvs, color, darkColor, this.twoColorTint, vertexSize)) { - let clippedVertices = clipper.clippedVertices; - let clippedTriangles = clipper.clippedTriangles; + const clippedVertices = clipper.clippedVertices; + const clippedTriangles = clipper.clippedTriangles; finalVertices = clippedVertices; finalVerticesLength = clippedVertices.length; finalIndices = clippedTriangles; finalIndicesLength = clippedTriangles.length; } else { - let verts = vertices; + const verts = vertices; if (!this.twoColorTint) { for (let v = 2, u = 0, n = numFloats; v < n; v += vertexSize, u += 2) { verts[v] = color.r; @@ -344,7 +344,7 @@ export class SkeletonMesh extends THREE.Object3D { finalIndicesLength = triangles.length; } - if (finalVerticesLength == 0 || finalIndicesLength == 0) { + if (finalVerticesLength === 0 || finalIndicesLength === 0) { clipper.clipEnd(slot); continue; } diff --git a/spine-ts/spine-threejs/src/ThreeJsTexture.ts b/spine-ts/spine-threejs/src/ThreeJsTexture.ts index 3e498da21..9ec961eec 100644 --- a/spine-ts/spine-threejs/src/ThreeJsTexture.ts +++ b/spine-ts/spine-threejs/src/ThreeJsTexture.ts @@ -70,7 +70,7 @@ export class ThreeJsTexture extends Texture { else if (filter === TextureFilter.MipMapNearestLinear) return THREE.NearestMipMapLinearFilter; else if (filter === TextureFilter.MipMapNearestNearest) return THREE.NearestMipMapNearestFilter; else if (filter === TextureFilter.Nearest) return THREE.NearestFilter; - else throw new Error("Unknown texture filter: " + filter); + else throw new Error(`Unknown texture filter: ${filter}`); } static toThreeJsMagnificationTextureFilter (filter: TextureFilter): THREE.MagnificationTextureFilter { @@ -80,14 +80,14 @@ export class ThreeJsTexture extends Texture { else if (filter === TextureFilter.MipMapNearestLinear) return THREE.LinearFilter; else if (filter === TextureFilter.MipMapNearestNearest) return THREE.NearestFilter; else if (filter === TextureFilter.Nearest) return THREE.NearestFilter; - else throw new Error("Unknown texture filter: " + filter); + else throw new Error(`Unknown texture filter: ${filter}`); } static toThreeJsTextureWrap (wrap: TextureWrap) { if (wrap === TextureWrap.ClampToEdge) return THREE.ClampToEdgeWrapping; else if (wrap === TextureWrap.MirroredRepeat) return THREE.MirroredRepeatWrapping; else if (wrap === TextureWrap.Repeat) return THREE.RepeatWrapping; - else throw new Error("Unknown texture wrap: " + wrap); + else throw new Error(`Unknown texture wrap: ${wrap}`); } static fist = true; @@ -109,7 +109,7 @@ export class ThreeJsTexture extends Texture { blendSrcAlpha: THREE.OneFactor, blendDstAlpha: THREE.OneMinusSrcColorFactor, } - else throw new Error("Unknown blendMode: " + blend); + else throw new Error(`Unknown blendMode: ${blend}`); } } diff --git a/spine-ts/spine-threejs/src/index.ts b/spine-ts/spine-threejs/src/index.ts index 441536509..c0f029d07 100644 --- a/spine-ts/spine-threejs/src/index.ts +++ b/spine-ts/spine-threejs/src/index.ts @@ -1,6 +1,6 @@ -export * from './require-shim.js'; +export * from "@esotericsoftware/spine-core"; export * from './AssetManager.js'; export * from './MeshBatcher.js'; +export * from './require-shim.js'; export * from './SkeletonMesh.js'; -export * from './ThreeJsTexture.js'; -export * from "@esotericsoftware/spine-core"; \ No newline at end of file +export * from './ThreeJsTexture.js'; \ No newline at end of file diff --git a/spine-ts/spine-threejs/src/require-shim.ts b/spine-ts/spine-threejs/src/require-shim.ts index 703595f91..9408866a4 100644 --- a/spine-ts/spine-threejs/src/require-shim.ts +++ b/spine-ts/spine-threejs/src/require-shim.ts @@ -27,8 +27,10 @@ * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. *****************************************************************************/ +/** biome-ignore-all lint/suspicious/noExplicitAny: necessary here */ + if (typeof window !== 'undefined' && (window as any).THREE) { - let prevRequire = window.require; + const prevRequire = window.require; (window as any).require = (x: string) => { if (prevRequire) return prevRequire(x); else if (x === "three") return (window as any).THREE;