Webgl 2d 圆圈作为精灵答案

【问题标题】：Webgl 2d circle as spriteWebgl 2d 圆圈作为精灵
【发布时间】：2014-03-08 08:48:39
【问题描述】：

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

我可以使用画布渲染器轻松做到这一点：

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 中只支持精灵作为图像。

谢谢！

【问题讨论】：

标签： three.js

【解决方案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

【讨论】：