Question

我是three.js的新手，并且在Webgl中有一些难以创建简单的2d圆形精灵。

我可以使用canvas渲染器轻松完成此操作：

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

他们是否可以轻松地在Webgl中实现相同的效果？在阅读文档时，我只在Webgl中找到了对精灵的支持。

谢谢！

Answer 1

以下是要遵循的模式：

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

Webgl 2d圈作为精灵

1 个答案: