Webgl 2d 圆作为精灵 [英] Webgl 2d circle as sprite

问题描述

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

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

它们是在 Webgl 中实现相同效果的简单方法吗?在阅读文档时，我只发现 Webgl 支持将精灵作为图像.

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.

谢谢！

推荐答案

以下是要遵循的模式:

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

three.js r.66

这篇关于Webgl 2d 圆作为精灵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！