三.JS 将纹理应用于球体的一部分

Question

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

see original question here...

我正在使用使用 Canvas 元素创建的纹理作为图像。将此纹理应用于整个球体很简单，但我试图将此纹理仅应用于球体的一部分。

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

无论如何，显然在 3D 图形中有一种叫做“UVs”的东西，它允许完成这样的事情......我不知道如何在 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);

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

我看过这个：How to map texture image onto a part of a sphere, or how to cut out (intersect) a rectangle of a sphere's surface?

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

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

我制作了一个 JSFiddle 来概述这个问题：http://jsfiddle.net/RCmBU/

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

对于这个问题的任何帮助将不胜感激。谢谢！

Answer 1

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

LOD example

Answer 2

使用 2 个画布：

1 从 svg 到画布

1 从画布到更小的画布

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