EDIT: I have decided that applying a texture to a portion of the sphere is the correct approach, but do not know how to implement it. I was going to open a new question, but felt it better for posterity to fix this one so that someone else could be helped.
I am using a texture which was created using a Canvas element as it's image. It is simple to apply this texture to the whole sphere, but I am trying to apply this texture to only part of the sphere.
I have been able to achieve this by increasing the size of the Canvas, bordering my image with transparent space. However, this increases the size of the texture as well, to an unacceptable size. The transparent space also takes up texture memory and most clients cannot handle the size of textures created... Especially when I am trying to make very small, high-res textures; because the smaller and higher-res the texture is, the more transparency I must wrap it in...
Anyway, apparently there is something called "UVs" in 3D Graphics which allow just such a thing to be done... I am not sure how to implement such a solution in THREEJS.
This is how I am making my Texture/Material:
scene = new THREE.Scene();
geometry = new THREE.SphereGeometry(500, 50, 50);
texture = new THREE.Texture(document.getElementById('myCanvas'));
texture.needsUpdate = true;
material = new THREE.MeshBasicMaterial({
map: texture
});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
How can I change it so the texture only applies to a section of the sphere?
I have seen this: How to map texture image onto a part of a sphere, or how to cut out (intersect) a rectangle of a sphere's surface?
But my inexperience with 3d graphics leaves me helpless to understand the answer...
Should I be learning more about Shader programming before proceeding with this project?
I have made a JSFiddle outlining this problem: http://jsfiddle.net/RCmBU/
How can I apply the black canvas to only the portion of the sphere indicated by the red dots?
Any help on this issue would be greatly appreciated. Thanks!
