I have some code to share, but unfortunately, I don't have the images to upload along with it. Within the code, there are two functions present:
UseMeshNormalMaterial() and UsePngMaterial(). This setup allows you to easily test the code if you happen to have some images on hand. By uncommenting either one, you can load the page accordingly.
The key difference between these two calls lies in the fact that UseMeshNormalMaterial utilizes a MeshNormalMaterial, while UsePngMaterial makes use of an indexed array of MeshBasicMaterial's. The performance gap between the two is quite significant, with UseMeshNormalMaterial running smoothly at around 60 fps, while UsePngMaterial struggles at a mere 0 to 2 fps.
That being said, I am in need of help or guidance. Any input or ideas would be greatly appreciated at this point.
Below is the code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<title>TestHTML</title>
<style>
body {
background: #fff;
padding: 0;
margin: 0;
font-weight: bold;
overflow: hidden;
}
</style>
</head>
<body style="margin: 0;">
<script src="js/three.min.js"></script>
<script src="js/stats.min.js"></script>
<script>
// Code for setting up the scene, lights, and materials
// Functions for adding and displaying cubes with different materials
</script>
</body>
</html>