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

• 使用着色器：

  如果你知道着色器，你可以寫一個小片段着色器即會導致這些解決方案中最輕，最精確的解決方案。