Three.js - Points

Question

当我使用Three.js创建一个点时，它看起来像一个正方形。我怎样才能让它看起来圆？我在文档中看到了一些混合因素，但我不太明白如何将它们用于我的观点，我甚至不知道它是否是正确的方式。

Answer 1

我使用的一个技巧是创建一个SVG圆形元素，将其渲染到Canvg的画布上，并将该画布渲染到点云中使用的纹理。

通过在圆上应用渐变，我可以给3D圆球上带有2D圆的发光幻觉。

有太多的代码发布到答案，但我有一个在Github上的项目，你可以看看，如果感兴趣，这表明了这个想法。请参阅：https://github.com/alexpreynolds/cubemaker及相关演示：http://alexpreynolds.github.io/cubemaker/

如果您只是想要圆圈而没有“闪亮”效果，则可以删除渐变。或者直接画一个圆圈到一个画布元素并完全跳过SVG。

Answer 2

亚历克斯雷诺兹的答案是正确的。我添加这一个来提供更多细节：据我所知，有两种方法来定制你的点的外观。

• 随着docs suggets，使用纹理（THREE.PointsMaterial({map:texture})）：

  • 最直观的就是用你的形象：

    var texture=THREE.ImageUtils.loadTexture('url-to-my-image'); 
    

  • 您也可以借鉴的东西一个画布，并将其用作纹理。这包括画布中的原始绘图，Alex Reynolds建议的SVG导入或任何其他技术。你可以检查他的链接并寻找threejs的例子。这特别用于渲染精灵上的2D文本，你会发现更多的例子。

    var texture=THREE.Texture(canvas); 
    

  检查three.js所使用的纹理的更多细节的例子在Points

• 使用着色器：

  如果你知道着色器，你可以写一个小片段着色器即会导致这些解决方案中最轻，最精确的解决方案。