Question

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

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

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

无论如何，显然3D Graphics中有一些叫做“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图形的经验不足让我无法理解答案......

在继续这个项目之前，我是否应该更多地了解Shader编程？

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

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

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

Answer 1

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

LOD example

Answer 2

使用2个画布：

1从svg到canvas

1从画布到小画布

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

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

2 个答案: