My current project has a unique concept:
https://i.sstatic.net/Jd3Ot.jpg
The main idea revolves around a virtual room that dynamically adjusts its height based on the number of images loaded by the user.
While it functions smoothly with fewer pictures, performance takes a hit when loading more than 100 images. This is my initial attempt at using Three.js, so I am still considered a novice in this area.
I have been exploring various optimization techniques and would greatly appreciate your insights.
To ensure the images maintain their proportions, I utilize Promise.all to fetch all images before initializing the world. The mesh is then constructed based on the width/height ratio of the image using PlaneBufferGeometry.
https://i.sstatic.net/JZBnJ.png
According to recommendations, it is ideal to load textures with power of two sizes. Should I resize all images to meet these criteria, even though they vary significantly in size?
EDIT: This is how the drawing object is created :
export class Drawing {
constructor(texture) {
const imgW = Math.floor(texture.image.naturalWidth / 20);
const imgH = Math.floor(texture.image.naturalHeight / 20);
const material = new MeshBasicMaterial({
color: 0xffffff,
map: texture
});
material.color.convertSRGBToLinear();
this.mesh = new Mesh(new PlaneBufferGeometry(imgW, imgH), material);
}
Finally, the mesh is added to the scene.