Three.js - дать частицы круглой формы

Question

В настоящее время я экспериментирую с three.js. Я хотел бы изменить код в приведенном ниже примере, чтобы точки были круглыми, а не квадратными.

Codepen example

Я нашел другой пример под названием холст частиц случайный, которая имеет круглые частицы, и в основном, разница только в сценарии заключается в следующем:

var PI2 = Math.PI * 2; 
var program = function (context) { 

    context.beginPath(); 
    context.arc(0, 0, 0.5, 0, PI2, true); 
    context.fill(); 

}; 

Я подумал, что если я добавьте это в другой скрипт, затем частицы станут круглыми. Однако, когда я добавил вышеприведенный скрипт к первому скрипту, он не работает (я просто получаю синий экран).

Кто-нибудь знает, что я делаю неправильно?

Answer 1

Как уже говорили другие, вы можете использовать текстуру в качестве карты в вашем PointsMaterial.
Но если вы просто хотите круги, более простым способом может быть создание карты динамически с помощью холста (это то, что, по-видимому, пытается сделать ваш код).

HERE is a fiddle с обновленным кодом, чтобы использовать холст в качестве текстурной карты.
ПРИМЕЧАНИЕ: Я изменил цвета в объекте paramters, чтобы сделать его более очевидным, что используются разные цвета.

Функция, которая создает круг на холсте для использования в качестве карты.

function createCanvasMaterial(color, size) { 
    var matCanvas = document.createElement('canvas'); 
    matCanvas.width = matCanvas.height = size; 
    var matContext = matCanvas.getContext('2d'); 
    // create exture object from canvas. 
    var texture = new THREE.Texture(matCanvas); 
    // Draw a circle 
    var center = size/2; 
    matContext.beginPath(); 
    matContext.arc(center, center, size/2, 0, 2 * Math.PI, false); 
    matContext.closePath(); 
    matContext.fillStyle = color; 
    matContext.fill(); 
    // need to set needsUpdate 
    texture.needsUpdate = true; 
    // return a texture made from the canvas 
    return texture; 
} 

создание холста карты в цикле с использованием объекта параметров.

for (i = 0; i < parameters.length; i++) { 

    color = parameters[i][0]; 
    size = parameters[i][1]; 

    var hexColor = new THREE.Color(color[0], color[1], color[2]).getHexString(); 

    materials[i] = new THREE.PointsMaterial({ 
     size: 20, 
     map: createCanvasMaterial('#'+hexColor, 256), 
     transparent: true, 
     depthWrite: false 
    }); 

    particles = new THREE.Points(geometry, materials[i]); 

    particles.rotation.x = Math.random() * 6; 
    particles.rotation.y = Math.random() * 6; 
    particles.rotation.z = Math.random() * 6; 

    scene.add(particles); 

    } 

Необходимо установить depthWrite на false на marterial. см. THIS выпуск.

я теперь создал пост в блоге на Three.js canvas particles

Answer 2

Вы можете использовать текстуру для ваших спрайтов:

var tex = new THREE.TextureLoader().load("https://threejs.org/examples/textures/sprites/disc.png"); 
    // load the texture 

    for (i = 0; i < parameters.length; i++) { 

    color = parameters[i][0]; 
    size = parameters[i][1]; 

    materials[i] = new THREE.PointsMaterial({ 
     size: size, 
     map: tex // apply the texture in your material 
    }); 

    particles = new THREE.Points(geometry, materials[i]); 

    particles.rotation.x = Math.random() * 6; 
    particles.rotation.y = Math.random() * 6; 
    particles.rotation.z = Math.random() * 6; 

    scene.add(particles); 

    }