Three.js:如何绘制表面有球形三角形的球体?

时间:2014-10-20 12:37:40

标签: three.js geometry

我没有找到任何关于threejs和球形三角形的文档或信息,所以我想这还没有在threejs中编码。

我的目标是创建一个球体并在其表面上绘制一个弯曲三角形。加上三角形的颜色。它应该是这样的:

enter image description here

由于threejs,

Creating a sphere很容易,但我如何绘制三角形呢?

我是否需要绘制多个小三角形来伪造球形三角形?还是有另一种更简单的方法吗?

感谢。

1 个答案:

答案 0 :(得分:1)

我有3个选项可以在球体表面构建一个伪三角形:几何,纹理和颜色。

采用几何路线需要构建一组符合要求的顶点。执行此操作的最佳方法可能是使用您的首选段数构建球体,然后从三角形不存在的位置移除不需要的顶点。通过使用SphereGeometry的phiStart,phiLength,thetaStart,thetaLength构造函数属性,可以使自己更容易。

纹理解决方案可能是动态创建适当尺寸的平面三角形图像/纹理,然后将其显示在实心球体的表面上。这可能需要一些复杂的数学和动态图像知识,以便在图像拉伸到适合时正确显示三角形。

颜色解决方案(以及你最好的解决方案)将创建一个纯色的整个球体,并在材质中使用SubtractiveBlending删除它的相应部分,如下所示:

blending: THREE.SubtractiveBlending,

以下是我的意思:http://jsfiddle.net/Angrypickle/8pwLca8p/59/

请注意,我创建了一个带有指定phiStart和phiLength的外部球体,以移除内部球体的不需要部分。你应该能够对alpha和beta角度做同样的事情。如果您尝试这个并且它适合您,请告诉我!

修改 这是另一个几何选项:http://jsfiddle.net/Angrypickle/oax054wL/23/

在这个例子中,我们构建了一个标准化的等边三角形。然后我们将几何体细分几次。最后,我们将每个顶点的长度设置为我们想象的球体的半径,并且我们留下一个漂亮的球形三角形。注意:我们开始的3个顶点的位置决定了最终的形状。