Webgl 2d circle as sprite

问题

I am brand new to three.js and am having some difficultly creating a simple 2d circle sprite in Webgl.

I am able to do this easily with the canvas renderer:

var PI2 = Math.PI * 2;
var material = new THREE.SpriteCanvasMaterial( {

 color: 0xffffff,
 program: function ( context ) {
  context.beginPath();
  context.arc( 0, 0, 2, 0, PI2, true );
  context.fill();
 }
});

particle = new THREE.Sprite( material );

Is their an easy way to achieve the same effect in Webgl? When reading through the documentation, I only found support for sprites as images in Webgl.

Thanks!

回答1:

Here is the pattern to follow:

function generateTexture() {

    var canvas = document.createElement( 'canvas' );
    canvas.width = width;
    canvas.height = height;

    var context = canvas.getContext( '2d' );

    < insert drawing code here >

    return canvas;

}

...

var texture = new THREE.Texture( generateTexture() );
texture.needsUpdate = true; // important!

var material = new THREE.SpriteMaterial( { map: texture } );

sprite = new THREE.Sprite( material );

three.js r.66

来源：https://stackoverflow.com/questions/22262826/webgl-2d-circle-as-sprite