I am currently working on a Three.js chart that displays multiple images on a 2D plane.
At the moment, each individual image is a 32px by 32px segment of larger 2048px by 2048px image atlas files. I intend to enlarge these individual images when users zoom into specific regions of the scene. For instance, if users zoom in on the images in the far right region of the space, I aim to replace the 32px by 32px individual images in that area with 64px by 64px images containing more details.
My question is: How can I achieve this goal using Three.js?
My initial idea was to load the higher-resolution assets, map them to the correct geometry coordinates, then remove the old mesh with 32px subimages and add the new mesh with 64px subimages. Initially, I thought about updating the texture/material for an existing geometry, but I learned that textures larger than 2048px by 2048px should not be used, and increasing the fidelity of the images within a geometry with n points could exceed that maximum texture size.
I would greatly appreciate any guidance from experienced Three.js developers on how they would tackle this task!
Full code:
/**
* Globals
**/
// Identify data endpoint
var dataUrl = 'https://s3.amazonaws.com/duhaime/blog/tsne-webgl/data/';
// Create global stores for image and atlas sizes
var image, atlas;
// Create a store for image position information
var imagePositions = null;
// ... (The rest of the code continues)
* {
margin: 0;
padding: 0;
background: #000;
color: #fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
<script src="https://s3.amazonaws.com/duhaime/blog/tsne-webgl/assets/js/texture-loader.js"></script>
<script src="https://s3.amazonaws.com/duhaime/blog/tsne-webgl/assets/js/trackball-controls.js"></script>
<div id='loader'>0%</div>