I am creating a program which maps airplane flights on a 3D earth. The program computes the routes using the great circle method.
In responding to a query, I confirmed that you could create a moving airplane that follows those routes by simply changing the rotation.x of the object. The key is to set the rotation order to YZX and to compute the starting YZX rotations which match the starting latitude and longitude. I realized that I could use the same method to position text along a selected route. To position the text, I simply need to change rotation.x for each character in the sentence.
The sample program uses this method to display the distance for each leg. Each display consists of 5 digits and 2 letters. The program loads separate textures for each number 0 through 9 and lowercase a through z (36 separate textures). Each character is a separate object. The program creates the object and assign the correct texture to each character using the following:
geometry = new THREE.PlaneGeometry(0.3,0.6); // I only set this once at the beginning
// For each character (i = object number for character, p = index to texture for this character)
leglbl[i] = new THREE.Object3D(); //leglbl is a table that will contain the addresses of all the character objects
texture = chrtxt[p]; // chrtxt is a table that contains the addresses of all the textures
material = new THREE.MeshPhongMaterial({map: texture, transparent: true});
The program then rotates the character to the correct YZX location.
Before creating more separate files for capital letters, etc., I am wondering if I can simply put all the characters in a single texture file and then - when assigning textures to the character object - define the material as only the part of the larger texture that contains the character that I need.
I see that you can use an offset command to change the starting location, but there does not appear to be a way to limit the height or width.
@phil_crowther you could either use a third party texture atlas tool eg…
Otherwise you would have to set the uv coordinates for each character so they only overlay the part of the map required which might be a bit complex to achieve (although I know you’re quite an advanced user of THREE)
That’s may be the most promising option. One factor that could help is that they should all be same size pieces. I wonder if I could use something like Blender to create the UV map?
I am looking at some additional alternatives, e.g.:
Turn the texture file into a data file and then use getImageData to load a portion of the data as an image. That sounds like a strange way to get the result I want.
Look at how animated sprites work. It is my understanding that they use a single texture which contains multiple images. I don’t want animated sprites or sprites, but they might point to an answer.
@phil_crowther you could most certainly use a program like blender or maya to generate the uv map, that would be the way to go if you have model files of the geometry, this way they would load in as expected with no extra fuss,
otherwise yes I guess you could use getImageData to grab just a section of the image and use that section as a new canvas texture or output it to a new image but I’m not sure, that might still have to be ported into memory as a new texture image anyway…
All of these options sound painful. The individual character textures are not that large and I need less than 100 characters (or just 50 if I used only capital letters), so I will probably just stick with loading those little files.
I did run across an old example by Stemkowski that creates a sprite-like animation without using sprites. Each of the two objects appears to use a single texture with several images. So if there was just a way to use this method to select the image (the character) I want each object to display - without the animation - that might be a simpler answer.