3d Three.JS将纹理应用于球体的一部分

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

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

我已经能够通过增加画布的大小来实现这一点，用透明的空间包围我的图像。但是，这也会将纹理的大小增加到不可接受的大小。透明空间也会占用纹理内存，大多数客户端无法处理创建的纹理大小。。。特别是当我试图制作非常小、高分辨率的纹理时；因为纹理越小，分辨率越高，我必须用越高的透明度来包装它

无论如何，很明显，在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);

如何更改它，使纹理仅应用于球体的一部分

我看到了这一点：

但我对3d图形的缺乏经验让我无法理解答案

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

我已经做了一个JSFiddle来概述这个问题：

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

---

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

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

使用2个画布：

1从svg到画布

1从画布到较小的画布

---

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

感谢您的回复！我尝试过这种方法，但是如何将较小的画布仅应用于球体的一部分？当我将小画布作为纹理应用到球体时，它会将纹理拉伸到整个球体…如果你有可见部分，则计算该部分的UV，同时更新球体。对不起，我的3d图形技能不是很好。。。你能指导我如何使用THREE.JS计算UV和更新球体吗？或者我需要裸机WebGL吗？你能为此生成一个JSFIDLE吗？然后我会研究这个？？刚刚注意到THREE.Texture有一个映射属性（）。。。但是，默认情况下，它只是定义为一个空白函数。。。谢谢你能提供的任何帮助！！嘿，谢谢！我不知道它的存在，但不幸的是，它让我处于同一条船上。我基本上已经自己实现了这个，当用户放大时，我可以提供各种级别的细节。我的问题是如何在最近的缩放级别创建LOD对象。。。我的问题是纹理太大，无法缓冲@这个缩放级别，所以我只能显示部分纹理。但我不知道如何只显示球体上的部分纹理！如果你想创建一个高可伸缩的图片，例如地球视图，你确实需要将纹理切割成部分。然后，您从服务器应用程序请求当前需要的部分（取决于缩放和位置），并将其作为纹理应用到球体上。我正在使用SVG作为纹理图像，因此我不需要从服务器请求，而是以更高的分辨率重新栅格化纹理。。。我遇到的问题是如何将纹理仅应用于球体的所需部分。我做了一个。。。我想这就是主要原因，我希望纹理只放在红色标记之间。你是什么意思？对你来说是空白的？？