3d - 三.JS 对球体的一部分应用纹理

Question

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

see original question here ...

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

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

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

这就是我制作纹理/ 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 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/

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

对此问题的任何帮助将不胜感激。谢谢!

Answer 1

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

LOD example