5

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

在此处查看原始问题...

我正在使用使用 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);

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

我已经看到了：如何将纹理图像映射到球体的一部分，或者如何切割（相交）球体表面的矩形？

但是我对 3d 图形的缺乏经验让我无助于理解答案......

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

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

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

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

4

2 回答 2

0

use 2 canvas:

1 from svg to canvas

1 from canvas to smaller canvas

EDIT:the uvs decide where it will be placed on the sphere.

于 2013-01-03T19:41:35.330 回答
0

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

细节层次示例

于 2013-01-03T19:24:16.970 回答