// @ts-check
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// import SPECTOR from 'https://cdn.jsdelivr.net/npm/spectorjs@0.9.30/+esm';
// const spector = new SPECTOR.Spector();
import { KaitaiStream } from 'kaitai-struct';
import * as RFLResourceImport from './RFLResource.js';
// Import as UMD or ESM.
let RFLResource = /** @type {*} */ (globalThis).RFLResource;
RFLResource = (!RFLResource) ? RFLResourceImport : RFLResource;

/**
 * {@link https://github.com/SMGCommunity/Petari/blob/98fe1905624e3b499869eee6b74b12fcaf94f38a/libs/RVLFaceLib/include/RFLi_Types.h#L23C1-L43C13}
 * @enum {number}
 */
const RFLiArcID = {
	Beard: 0,
	Eye: 1,
	Eyebrow: 2,
	Faceline: 3,
	FaceTex: 4,
	ForeHead: 5,
	Glass: 6,
	GlassTex: 7,
	Hair: 8,
	Mask: 9,
	Mole: 10,
	Mouth: 11,
	Mustache: 12,
	Nose: 13,
	Nline: 14,
	NlineTex: 15,
	Cap: 16,
	CapTex: 17,
	Max: 18
};

/**
 * Gets an offset of an individual file/element/part within the archive.
 * @param {RFLResource} res
 * @param {RFLiArcID} arcID
 * @param {number} index
 * @returns {number} Absolute offset of file within the archive.
 */
function getOffsetArchiveFile(res, arcID, index) {
	/** Initial position. */
	const _pos = res._io.pos;

	/** Offsets begin at this location. */
	const initialOffset = 8;
	/** Offset of the beginning of the archive. */
	const archiveOffset = res.offsets[arcID];
	console.assert(archiveOffset);
	res._io.seek(/* initialOffset + */archiveOffset); // Seek and read archive.
	/** Construct archive to get its offsets. */
	const archive = new RFLResource.RFLiArchive(res._io, res, res._root);
	console.assert(archive.num > 0);

	/** Location after the archive's file offsets. Value = num files * sizeof(u32). */
	const filesOffset = archive.num * 4;
	/** Individual file's offset. */
	const fileOffset = archive.offset[index];
	console.assert(typeof fileOffset === 'number');
	/** Total offset of file. */
	const finalOffset = initialOffset + archiveOffset + filesOffset + fileOffset;

	res._io.seek(_pos); // Seek to initial position before returning.
	return finalOffset;
}

/**
 * @param {RFLResource} res
 * @param {RFLiArcID} arcID
 * @param {number} index
 * @returns {typeof RFLResource.RFLiShape}
 * @todo Makes use of types VIA KAITAI: RFLResource, RFLiShape (custom)
 */
function getResourceShape(res, arcID, index) {
	/** Initial position. */
	const _pos = res._io.pos;

	const finalOffset = getOffsetArchiveFile(res, arcID, index);
	/** Seek to the offset of the file. */
	res._io.seek(finalOffset);
	/** Read the shape at the offset. */
	const shape = new RFLResource.RFLiShape(res._io, this, res._root);

	res._io.seek(_pos); // Seek to initial position before returning.
	return shape;
}

// ==> LOADING <==

/** @type {Object<RFLiArcID, string>} */
const RFLiArcIDShapesAndNames = {
	[RFLiArcID.Faceline]: 'Faceline',
	[RFLiArcID.ForeHead]: 'ForeHead',
	[RFLiArcID.Glass]: 'Glass',
	[RFLiArcID.Hair]: 'Hair',
	[RFLiArcID.Mask]: 'Mask',
	[RFLiArcID.Nose]: 'Nose',
	[RFLiArcID.Nline]: 'Nline',
	[RFLiArcID.Cap]: 'Cap'
};

/** List of RFLiArcIDs that contain shapes. */
const shapeArchiveIds = Object.keys(RFLiArcIDShapesAndNames)
	.map(key => Number(key));


/**
 * Helper: returns how many files are in archive `arcID`.
 * @param {RFLResource} resource
 * @param {number} arcID
 * @returns {number}
 */
function getFileCountInArchive(resource, arcID) {
	const archiveOffset = resource.offsets[arcID];
	// Seek to archive header
	const savedPosition = resource._io.pos;
	resource._io.seek(archiveOffset);
	const archiveHeader = new RFLResource.RFLiArchive(resource._io, resource, resource._root);
	resource._io.seek(savedPosition);
	return archiveHeader.num;
}

/**
 * Helper: returns the byte size of file `fileIndex` within archive `arcID`.
 * @param {RFLResource} resource
 * @param {number} arcID
 * @param {number} fileIndex
 * @returns {number}
 */
function getFileSizeInArchive(resource, arcID, fileIndex) {
	const archiveOffset = resource.offsets[arcID];
	// We need the offset of this file and the offset of the next file
	const savedPosition = resource._io.pos;
	resource._io.seek(archiveOffset);
	const archiveHeader = new RFLResource.RFLiArchive(resource._io, resource, resource._root);
	const offsetsArray = archiveHeader.offset;  // length = num+1
	let startOffset = offsetsArray[fileIndex];
	let endOffset;
	if (fileIndex < offsetsArray.length - 1) {
		endOffset = offsetsArray[fileIndex + 1];
	} else {
		// Last file: size is archiveHeader.maxsize or subtract from fileSize
		endOffset = offsetsArray[fileIndex] + archiveHeader.maxsize;
	}
	resource._io.seek(savedPosition);
	return endOffset - startOffset;
}

/**
 * Populate the <ul> with all archives and files.
 * @param {RFLResource} resource
 */
function populateShapeArchiveList(resource) {
	const archiveListElement = document.getElementById('shape-browser-archive-list');
	archiveListElement.innerHTML = '';  // Clear any existing entries

	// For all shape archive IDs...
	for (const arcID of shapeArchiveIds) {
		const archiveName = RFLiArcIDShapesAndNames[arcID];
		const fileCount = getFileCountInArchive(resource, arcID);

		// Create <details> with a <summary>
		const detailsElement = document.createElement('details');
		const summaryElement = document.createElement('summary');
		summaryElement.textContent = `ID ${arcID}: ${archiveName} (${fileCount} files)`;
		detailsElement.appendChild(summaryElement);

		// Inner list of files
		const filesListElement = document.createElement('ul');
		for (let fileIndex = 0; fileIndex < fileCount; fileIndex++) {
			const fileSize = getFileSizeInArchive(resource, arcID, fileIndex);
			const fileEntryElement = document.createElement('li');
			fileEntryElement.classList.add('shape-file-entry');
			// e.g. "Hair 33 (2048 bytes)"
			fileEntryElement.textContent =
        `${archiveName} ${fileIndex} (${fileSize} bytes)`;

			// On click: load & render shape, update hash, highlight
			fileEntryElement.addEventListener('click', () => {
				// Remove old “selected” class
				document.querySelectorAll('.shape-file-entry.selected')
					.forEach(el => el.classList.remove('selected'));
				// Add to this one
				fileEntryElement.classList.add('selected');

				// Deep-link via hash
				location.hash = `#arc=${arcID}&file=${fileIndex}`;

				// Load and display
				const shape = getResourceShape(resource, arcID, fileIndex);
				const mesh = rflShapeToMesh(shape);
				if (mesh) {
					applyWireframeSetting(mesh);
					switchMeshInScene(mesh);
				}
			});

			filesListElement.appendChild(fileEntryElement);
		}

		detailsElement.appendChild(filesListElement);
		const listItemElement = document.createElement('li');
		listItemElement.appendChild(detailsElement);
		archiveListElement.appendChild(listItemElement);
	}
}

/**
 * Reads location.hash and, if present, auto-selects that shape.
 * @param {RFLResource} resource
 */
function applyDeepLinkSelection(resource) {
	const hash = location.hash.slice(1);
	const params = new URLSearchParams(hash);
	const arcID = Number(params.get('arc'));
	const fileIndex = Number(params.get('file'));
	if (shapeArchiveIds.includes(arcID) && !isNaN(fileIndex)) {
		// Find the matching <li> element and click it
		const archiveName = RFLiArcIDShapesAndNames[arcID];
		const selector = `.shape-file-entry`;
		document.querySelectorAll(selector).forEach((el) => {
			if (el.textContent.startsWith(`${archiveName} ${fileIndex} `)) {
				el.click();
			}
		});
	}
}

/** Toggles wireframe mode on the current mesh’s material. */
function applyWireframeSetting(mesh) {
	if (mesh && mesh.material instanceof THREE.Material) {
		mesh.material.wireframe = document.getElementById('control-wireframe').checked;
	}
}

/** Adds event listeners for the control panel. */
function initializeControlPanel(resource) {
	// Wireframe toggle
	document.getElementById('control-wireframe')
		.addEventListener('change', () => {
			if (currentMesh) {
				applyWireframeSetting(currentMesh);
			}
		});

	// Auto-rotate toggle
	document.getElementById('control-rotate')
		.addEventListener('change', (event) => {
			if (orbitControls) {
				orbitControls.autoRotate = event.target.checked;
			}
		});


	// “Add Texture” button
	const textureInputElement = document.getElementById('control-texture-input');
	document.getElementById('control-add-texture')
		.addEventListener('click', () => {
			textureInputElement.click();
		});

	// Handle file selection
	textureInputElement.addEventListener('change', () => {
		const file = textureInputElement.files[0];
		if (!file) {
			return;
		}
		if (!currentMesh.geometry.attributes.uv) {
			alert('This mesh has no UV coordinates to apply a texture.');
			return;
		}
		const reader = new FileReader();
		reader.onload = () => {
			const texture = new THREE.TextureLoader().load(reader.result);
			currentMesh.material.map = texture;
			currentMesh.material.needsUpdate = true;
		};
		reader.readAsDataURL(file);
	});
}



// ==> INDICES <==

/**
 * @param {Array<typeof RFLResource.Primitive>} primitives
 * @returns {number} The number of indices based on primitives.
 */
function getIndexCountFromPrimitives(primitives) {
	let total = 0;
	for (const prim of primitives) {
		const numVertices = prim.vertices.length;
		switch (prim.primType) {
			case RFLResource.GXPrimitive.TRIANGLES:
				total += Math.floor(numVertices / 3) * 3;
				break;
			case RFLResource.GXPrimitive.TRIANGLESTRIP:
			case RFLResource.GXPrimitive.TRIANGLEFAN:
				total += Math.max(0, numVertices - 2) * 3;
				break;
			case RFLResource.GXPrimitive.QUADS:
				total += Math.floor(numVertices / 4) * 6;
				break;
			default:
				break; // skip lines/points
		}
	}
	return total;
}

/**
 * Build a flat Uint16Array of triangle indices from RFLiShape.primitives.
 * @param {Array<typeof RFLResource.Primitive>} primitives -
 * Each Primitive must have:
 * - primType (one of GXPrimitive.*)
 * - vertices: Array of { posIdx: number, … }
 * @param {Uint16Array} indices - List of indices to populate.
 * @param {number} offset - Offset to begin in `indices` array.
 * @returns {Uint16Array}
 */
function buildToIndexBuffer(primitives, indices, offset = 0) {
	/** Current offset in the output array. */
	let i = offset;

	for (const prim of primitives) {
		// Use just indices for positions.
		const idx = /** @type {Array<{posIdx: number}>} */
			(prim.vertices).map(v => v.posIdx);
		switch (prim.primType) {
			// Reverse winding when writing indices.
			case RFLResource.GXPrimitive.TRIANGLES:
				// every group of 3 is one triangle
				for (let j = 0; j + 2 < idx.length; j += 3) {
					indices[i] = idx[j + 2];
					indices[i + 1] = idx[j + 1];
					indices[i + 2] = idx[j];
					i += 3;
				}
				break;

			case RFLResource.GXPrimitive.TRIANGLESTRIP:
				// strip: (0,1,2), (2,1,3), (2,3,4)
				for (let j = 0; j + 2 < idx.length; j++) {
					if (j % 2 === 0) {
						indices[i] = idx[j + 2];
						indices[i + 1] = idx[j + 1];
						indices[i + 2] = idx[j];
					} else {
						// flip winding on odd tris
						indices[i] = idx[j + 1];
						indices[i + 1] = idx[j + 2];
						indices[i + 2] = idx[j];
					}
					i += 3;
				}
				break;

			case RFLResource.GXPrimitive.TRIANGLEFAN:
				// fan: (0,1,2), (0,2,3), (0,3,4)
				for (let j = 1; j + 1 < idx.length; j++) {
					indices[i] = idx[j + 1];
					indices[i + 1] = idx[j];
					indices[i + 2] = idx[0];
					i += 3;
				}
				break;

			case RFLResource.GXPrimitive.QUADS:
				// quads: split each group of 4 into two tris
				for (let j = 0; j + 3 < idx.length; j += 4) {
					// triangle A: 0,1,2
					indices[i] = idx[j + 2];
					indices[i + 1] = idx[j + 1];
					indices[i + 2] = idx[j];
					// triangle B: 0,2,3
					indices[i + 3] = idx[j + 3];
					indices[i + 4] = idx[j + 2];
					indices[i + 5] = idx[j];
					i += 6;
				}
				break;

			default:
				// lines, points, strips-of-lines: unexpected, assert
				console.assert(false,
					`Unexpected primitive type: ${prim.primType} (${RFLResource.GXPrimitive[prim.primType]})`);
				break;
		}
	}

	return new Uint16Array(indices);
}




/**
 * Build de-indexed Int16 buffers from a RFLiShape.
 * Each triangle emits 3 vertices in sequence. We allocate once,
 * then copy raw s16 data into each attribute array.
 * @param {typeof RFLResource.RFLiShape} shape -
 * The Kaitai-parsed shape, with:
 * - shape.vtxPos: Int16Array of [x,y,z,x,y,z,…]
 * - shape.vtxNrm: Int16Array of [nx,ny,nz,…]
 * - shape.vtxTxc: (optional) Int16Array of [u,v,u,v,…]
 * - shape.primitives: Array of GX DL primitives
 * @returns {{
 * position: Int16Array,   // length = triCount * 3 coords
 * normal:   Int16Array,   // same length as positions
 * texcoord: Int16Array|undefined, // length = triCount * 2 coords
 * index:    Uint16Array  // sequential 0..N-1
 * }}
 * @todo REVIEW and REPLACE ?????
 */
function buildIndexedAttributesFromShape(shape) {
	// 1) Count total output vertices (triangles × 3)
	let totalVerts = 0;
	for (const prim of shape.primitives) {
		const count = prim.vertices.length;
		switch (prim.primType) {
			case RFLResource.GXPrimitive.TRIANGLES:
				totalVerts += Math.floor(count / 3) * 3;
				break;
			case RFLResource.GXPrimitive.TRIANGLESTRIP:
			case RFLResource.GXPrimitive.TRIANGLEFAN:
				totalVerts += Math.max(0, count - 2) * 3;
				break;
			case RFLResource.GXPrimitive.QUADS:
				totalVerts += Math.floor(count / 4) * 2 * 3;
				break;
			default:
				// skip lines/points
				break;
		}
	}

	// 2) Pre-allocate output buffers
	const position = new Int16Array(totalVerts * 3);
	const normal = new Int16Array(totalVerts * 3);
	const hasUVs = Array.isArray(shape.vtxTxc) && shape.vtxTxc.length > 0;
	const texcoord = hasUVs ? new Int16Array(totalVerts * 2) : undefined;
	const index = new Uint16Array(totalVerts);

	// 3) Walk primitives and copy data
	let vertexCursor = 0; // counts output vertices 0..totalVerts-1
	let outPosOff = 0; // positions[offset..offset+2]
	let outNrmOff = 0; // normals[offset..offset+2]
	let outUvOff = 0; // uvs[offset..offset+1]

	const rawPos = shape.vtxPos; // Int16Array
	const rawNrm = shape.vtxNrm; // Int16Array
	const rawUvs = shape.vtxTxc; // maybe Int16Array

	// helper to emit one vertex by raw index triple
	function emitVertex(posIndex, nrmIndex, uvIndex) {
		// copy XYZ
		position[outPosOff] = rawPos[posIndex * 3];
		position[outPosOff + 1] = rawPos[posIndex * 3 + 1];
		position[outPosOff + 2] = rawPos[posIndex * 3 + 2];
		// copy normals
		normal[outNrmOff] = rawNrm[nrmIndex * 3];
		normal[outNrmOff + 1] = rawNrm[nrmIndex * 3 + 1];
		normal[outNrmOff + 2] = rawNrm[nrmIndex * 3 + 2];
		// copy UV if present
		if (texcoord) {
			texcoord[outUvOff] = rawUvs[uvIndex * 2];
			texcoord[outUvOff + 1] = rawUvs[uvIndex * 2 + 1];
		}
		// set the index for this new vertex
		index[vertexCursor] = vertexCursor;

		// advance all cursors
		vertexCursor += 1;
		outPosOff += 3;
		outNrmOff += 3;
		if (hasUVs) outUvOff += 2;
	}

	// 4) Expand each primitive to triangles
	for (const prim of shape.primitives) {
		const verts = prim.vertices;
		switch (prim.primType) {
			case RFLResource.GXPrimitive.TRIANGLES:
				// emit every group of 3, reversed for CCW
				for (let i = 0; i + 2 < verts.length; i += 3) {
					emitVertex(verts[i + 2].posIdx, verts[i + 2].nrmIdx, verts[i + 2].texIdx);
					emitVertex(verts[i + 1].posIdx, verts[i + 1].nrmIdx, verts[i + 1].texIdx);
					emitVertex(verts[i].posIdx, verts[i].nrmIdx, verts[i].texIdx);
				}
				break;

			case RFLResource.GXPrimitive.TRIANGLESTRIP:
				// (0,1,2),(2,1,3),(2,3,4),… with winding flip
				for (let i = 0; i + 2 < verts.length; i++) {
					if (i % 2 === 0) {
						emitVertex(verts[i + 2].posIdx, verts[i + 2].nrmIdx, verts[i + 2].texIdx);
						emitVertex(verts[i + 1].posIdx, verts[i + 1].nrmIdx, verts[i + 1].texIdx);
						emitVertex(verts[i].posIdx, verts[i].nrmIdx, verts[i].texIdx);
					} else {
						emitVertex(verts[i + 1].posIdx, verts[i + 1].nrmIdx, verts[i + 1].texIdx);
						emitVertex(verts[i + 2].posIdx, verts[i + 2].nrmIdx, verts[i + 2].texIdx);
						emitVertex(verts[i].posIdx, verts[i].nrmIdx, verts[i].texIdx);
					}
				}
				break;

			case RFLResource.GXPrimitive.TRIANGLEFAN:
				// (0,1,2),(0,2,3),(0,3,4),…
				for (let i = 1; i + 1 < verts.length; i++) {
					emitVertex(verts[i + 1].posIdx, verts[i + 1].nrmIdx, verts[i + 1].texIdx);
					emitVertex(verts[i].posIdx, verts[i].nrmIdx, verts[i].texIdx);
					emitVertex(verts[0].posIdx, verts[0].nrmIdx, verts[0].texIdx);
				}
				break;

			case RFLResource.GXPrimitive.QUADS:
				// [0,1,2,3] → (2,1,0),(3,2,0)
				for (let i = 0; i + 3 < verts.length; i += 4) {
					emitVertex(verts[i + 2].posIdx, verts[i + 2].nrmIdx, verts[i + 2].texIdx);
					emitVertex(verts[i + 1].posIdx, verts[i + 1].nrmIdx, verts[i + 1].texIdx);
					emitVertex(verts[i].posIdx, verts[i].nrmIdx, verts[i].texIdx);
					emitVertex(verts[i + 3].posIdx, verts[i + 3].nrmIdx, verts[i + 3].texIdx);
					emitVertex(verts[i + 2].posIdx, verts[i + 2].nrmIdx, verts[i + 2].texIdx);
					emitVertex(verts[i].posIdx, verts[i].nrmIdx, verts[i].texIdx);
				}
				break;

			default:
				// skip lines & points
				break;
		}
	}

	return {
		position,
		normal,
		texcoord,
		index
	};
}

// ==> MY CODE ? <==

/**
 * Main entrypoint.
 * @param {string} resPath - Path to RFL_Res.dat.
 */
async function main(resPath = 'RFL_Res.dat') {
	// Fetch resource from response.
	const response = await fetch(resPath);
	if (!response.ok) {
		const err2 = new Error(`failed to fetch resource, HTTP status = ${response.status}`);
		throw err2;
	}
	const buffer = await response.arrayBuffer();

	/** Construct RFLResource Kaitai type. Uses new KaitaiStream from ArrayBuffer. */
	const resource = new RFLResource(new KaitaiStream(buffer, null));

	// Create Three.js scene.
	if (!scene) {
		// spector.displayUI();
		initializeThree();
	}

	populateShapeArchiveList(resource);
	initializeControlPanel(resource);
	applyDeepLinkSelection(resource);

	// get a shape that can be drawn
	// const shape = res.archive8shape33;
	const shape = getResourceShape(resource, RFLiArcID.Hair, 33);

	// Add mesh to the scene.
	const mesh = rflShapeToMesh(shape);
	console.assert(mesh !== null);
	switchMeshInScene(mesh);
}

/** @type {THREE.Scene} */
let scene;
/** @type {import('three/addons/controls/OrbitControls.js')} */
let orbitControls = null;
/** @type {THREE.Mesh|null} */
let currentMesh = null;

/** Simple triangle (apparently). */
const sample = new Int16Array([
	256, 0, 0,
	0, 256, 0,
	0, 0, 256
]);

/**
 * Creates a mesh from RFL shape data.
 * @param {Object} shape - RFL shape to add.
 * @returns {THREE.Mesh|null} The Three.js mesh, or null if an invalid shape is passed in.
 */
function rflShapeToMesh(shape) {
// function addMeshToScene(positioni16 = sample, normali16, texcoordi16, indexu16) {
	// The position count must be valid before continuing.
	if (!shape || !shape.numVtxPos) {
		return null;
	}

	/*
	// Create arrays for all attributes.
	const position = new Int16Array(shape.vtxPos);
	const normal = new Int16Array(shape.vtxNrm);
	// UVs/texCoord are optional.
	const texcoord = shape.vtxTxc ? new Int16Array(shape.vtxTxc) : undefined;
	// Create indices.
	const indexCount = getIndexCountFromPrimitives(shape.primitives);
	const index = new Uint16Array(indexCount);
	buildToIndexBuffer(shape.primitives, index);
	*/
	const { position, normal, texcoord, index } = buildIndexedAttributesFromShape(shape);

	console.assert(position && position.length);

	/*
	// Convert to Float32 and scale (assume 1 unit = 256)
	const positionF32 = new Float32Array(position.length);
	const normalF32 = new Float32Array(normal.length);
	for (let i = 0; i < position.length; i++) {
		positionF32[i] = position[i] / 256.0;
	}
	for (let i = 0; i < normal.length; i++) {
		normalF32[i] = normal[i] / 256.0;
	}
	*/

	/** Create BufferGeometry. Normalize all attributes. */
	const geometry = new THREE.BufferGeometry();
	geometry.setAttribute('position',
		new THREE.BufferAttribute(position, 3, true));
	// new THREE.BufferAttribute(positionF32, 3));
	if (normal) {
		geometry.setAttribute('normal',
			new THREE.BufferAttribute(normal, 3, true));
		// new THREE.BufferAttribute(normalF32, 3));
	}


	if (texcoord) {
		geometry.setAttribute('uv',
			new THREE.BufferAttribute(texcoord, 2, true));
	}
	// if (index) {
	geometry.setIndex(new THREE.BufferAttribute(index, 1));

	// geometry.computeVertexNormals();
	/** Create material and THREE.Mesh. */
	const mesh = new THREE.Mesh(geometry,
		new THREE.MeshPhongMaterial({
			color: 0xffffff,
			// wireframe: true,
			// flatShading: true,
			// side: THREE.BackSide
		}));

	return mesh;
}

/**
 * Adds mesh to the global {@link scene} and disposes the previous one.
 * @param {THREE.Mesh} mesh - New mesh to add to scene.
 */
function switchMeshInScene(mesh) {
	// Remove current mesh before adding new one to scene.
	if (currentMesh) {
		scene.remove(currentMesh);
		// Dispose the currentMesh.
		if (currentMesh.material instanceof THREE.Material &&
			!Array.isArray(currentMesh.material)) {
			currentMesh.material.dispose();
			/** @type {THREE.MeshBasicMaterial} */ (currentMesh.material).map?.dispose();
		} else {
			console.assert(false, 'expected currentMesh.material to be a single non-array THREE.Material');
		}
	}

	scene.add(mesh); // Add mesh to scene.
	currentMesh = mesh;
}

/**
 * Entrypoint that will create new THREE.Scene, renderer, and lights.
 * @param {HTMLElement} canvasTarget - Where to add the renderer's canvas.
 */
function initializeThree(canvasTarget = document.body) {
	scene = new THREE.Scene(); // Create scene.
	scene.background = new THREE.Color(0x202020); // Set scene background.
	/** Scene camera. */
	const camera = new THREE.PerspectiveCamera(45,
		window.innerWidth / window.innerHeight, 0.1, 1000);

	camera.position.set(0.46, 0.75, 1.2);

	// Add lighting to scene for Three.js materials.
	const intensity = Number(THREE.REVISION) >= 155 ? Math.PI : 1.0;
	const ambientLight = new THREE.AmbientLight(new THREE.Color(0.73, 0.73, 0.73), intensity);
	const directionalLight = new THREE.DirectionalLight(
		new THREE.Color(0.60, 0.60, 0.60), intensity);
	directionalLight.position.set(-0.455, 0.348, 0.5);
	scene.add(ambientLight, directionalLight);

	/** Create THREE.WebGLRenderer. */
	const renderer = new THREE.WebGLRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);
	// Append to DOM.
	canvasTarget.appendChild(renderer.domElement);
	// Create OrbitControls.
	// @ts-expect-error -- 'PerspectiveCamera' not assignable to 'Camera', 'matrixWorldInverse.copy' incompatible
	orbitControls = new OrbitControls(camera, renderer.domElement);
	orbitControls.autoRotateSpeed = 8;
	orbitControls.target.set(-0.08, 0.15, -0.09);

	// Set resize handler.
	window.addEventListener('resize', () => {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize(window.innerWidth, window.innerHeight);
	});

	/** requestAnimationFrame handler function. */
	function animate() {
		requestAnimationFrame(animate);
		orbitControls.update();
		renderer.render(scene, camera);
	}
	animate();
}

main(); // Run async entrypoint.