Сделайте "частицы" SpriteMaterial закругленными или круглыми в виде трех. js с помощью React. - PullRequest
Новая
       167

Сделайте "частицы" SpriteMaterial закругленными или круглыми в виде трех. js с помощью React.

2 голосов
/ 07 августа 2020

Первоначально это был код (который отлично работает в большинстве сред): 

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

    color: 0x939393, //changes color of particles
    program: function ( context ) {

        context.beginPath();
        context.arc( 0, 0, 0.1, 0, PI2, true );
        context.fill();

    }

} );

Однако, когда я пытаюсь запустить это (рендеринг через THREE.CanvasRendered), я получаю сообщение об ошибке, говорящее, что SpriteCanvasMaterial не является действительный конструктор. Я провел некоторое исследование и, по-видимому, в моей среде реакции (Gatsby) я должен использовать вместо этого SpriteMaterial.

Внесение этого изменения (а также изменение рендеринга на WebGLRenderer) сработало, однако материал квадратной формы вместо круглого . «Программная функция», кажется, больше не работает.

Я попытался сделать наложение текстуры как таковое: 

var spriteMap = new THREE.TextureLoader().load('mycircle.png');


        var material = new THREE.SpriteMaterial({
            map: spriteMap,
            color: 0xFAFAFA, //changes color of particles
        });

И это меняет форму на круг, как я хотел, однако он попадает в качество очень плохое, а круги размытые (несмотря на отличное качество png).

Я исследовал это в течение нескольких часов и, похоже, не могу найти решение, чтобы просто визуализировать круги хорошего качества вместо квадратов, которые у меня есть.

Спасибо.

...