三。JS将纹理应用到球体的一部分

Question

编辑：我已经决定将纹理应用于球体的一部分是正确的方法，但不知道如何实现它。我本打算提出一个新问题，但我觉得最好让后人来解决这个问题，这样其他人就可以得到帮助。

在这里看到原始问题...

我使用的纹理是使用画布元素创建的图像。将此纹理应用于整个球体很简单，但我尝试将此纹理仅应用于球体的一部分。

我已经能够通过增加画布的尺寸来实现这一点，用透明的空间接壤我的图像。然而，这也增加了纹理的大小，达到了不可接受的大小。透明空间也占用了纹理内存，大多数客户端无法处理创建的纹理大小...尤其是当我试图制作非常小的高分辨率纹理时；因为纹理越小，分辨率越高，我必须将其包裹在透明度越高...

无论如何，很明显，在3D图形中有一种叫做“UV”的东西，它允许做这样的事情。。。我不知道如何在THREEJS中实现这样的解决方案。

这就是我制作纹理/材质的方式：

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);

我如何改变它，使纹理只适用于球体的一部分？

我见过：如何将纹理图像映射到球体的一部分，或者如何剪切（相交）球体表面的矩形？

但是我对三维图形缺乏经验，让我无法理解答案...

在继续这个项目之前，我应该学习更多关于着色器编程的知识吗？

我已经做了一个JSFIDLE来概述这个问题：http://jsfiddle.net/RCmBU/

如何将黑色画布仅应用于由红点指示的球体部分？

在此问题上的任何帮助都将不胜感激。谢谢

Answer 1

使用2张画布：

1从svg到画布

1从画布到较小的画布

编辑：UV决定将其放置在球体上的位置。

Answer 2

根据客户端的功能，您可以使用不同的“细节级别”模型来提供最佳纹理。我不知道这是否适合您的应用程序，但也许值得一看：

LOD示例