Question

我目前正在试验three.js。我想更改下面示例中的代码，因此圆点是圆的，而不是正方形。

我发现另一个名为 canvas particle random 的例子，它有圆形粒子，基本上，脚本的唯一区别如下：

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更新了您的代码，使用画布作为纹理贴图 注意：我更改了参数对象中的颜色，以便更明显地使用不同的颜色。

在画布上创建圆圈以用作地图的功能。

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);

  }

必须在marterial上将depthWrite设置为false。请参阅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);

  }

Answer 3

尽管这个问题已经问了两年多了，但我认为补充一下您总是可以使用three.js ShaderMaterial来编写自己的片段着色器很有用：

let geom = new three.Geometry();
geom.vertices.push(new three.Vector3(0,0,0));
let material = new three.ShaderMaterial({
    transparent: true,
    uniforms: {
        size: {value: 10},
        scale: {value: 1},
        color: {value: new three.Color('maroon')}
    },
    vertexShader: three.ShaderLib.points.vertexShader,
    fragmentShader: `
    uniform vec3 color;
    void main() {
        vec2 xy = gl_PointCoord.xy - vec2(0.5);
        float ll = length(xy);
        gl_FragColor = vec4(color, step(ll, 0.5));
    }
    `
});
let points = new three.Points(geom, material);

Three.js - 给出圆形的粒子

3 个答案: