在粒子系統中渲染球體（或點）

我正在使用Three.JS庫在網絡瀏覽器中顯示點雲。點雲在啓動時生成一次，並且不再添加或刪除點。但它確實需要旋轉，平移和縮放。我已經閱讀了有關在three.js中創建粒子的教程here 在粒子系統中渲染球體（或點）

使用示例，我可以創建正方形或使用球體圖像創建紋理的粒子。圖像更接近我想要的，但可以在不使用圖像的情況下生成點雲？例如，球的幾何形狀。

圖像的問題是，當你有成千上萬的點時，它們有時會在邊緣周圍隱約看到它們。從我可以收集的信息看來，點的png文件中的黑色區域會立即阻擋當前點後面的圖像。（但它是透明的進一步落後）

這種模糊的圖像是我想使用形狀生成點的原因。我試圖用THREE.SphereGeometry(radius, segments, rings)替換particles = new THREE.Geometry()並嘗試將頂點更改爲球體。

所以我的問題是。如何修改示例代碼，使其呈現球體（或點）而不是正方形？另外，對於我的特定情況，粒子系統是最有效的系統，還是應該生成粒子並設置其各自的位置？正如我所提到的，我只生成一次點，然後旋轉，縮放，平移點。（我使用TrackBall示例代碼來獲取鼠標事件）。

感謝您的幫助

來源

2012-09-11 Chaitanya

我希望如果圖像的背景是透明的而不是黑色，那麼使用圖像將會有效。試試這張圖片：https：//github.com/mrdoob/three.js/blob/master/examples/textures/sprites/ball.png。另外，'TrackBallControls'旋轉攝像頭，而不是點。 – WestLangley

我不認爲渲染點雲與球是非常有效的。您應該能夠脫離粒子系統，並使用紋理或小型畫布程序繪製一個圓圈。

其中第一three.js sample的使用帆布程序，這裏是重要的位：

var PI2 = Math.PI * 2; 
var program = function (context) 
{ 
    context.beginPath(); 
    context.arc(0, 0, 1, 0, PI2, true); 
    context.closePath(); 
    context.fill();  
}; 
var particle = new THREE.Particle(new THREE.ParticleCanvasMaterial({ 
    color: Math.random() * 0x808008 + 0x808080, 
    program: program 
}));

three.js particles