New THREE.Sprite - black box around

Questions
1

Hi,

I am creating sprites using THREE.Sprite.
Even though I do not get any errors and the sprites get constructed,
each of them is surrounded by a huge black box.

Could you help me, please?

2

Please demonstrate the issue with a live example. Use the following fiddle as a basis which already renders a simple sprite:

https://jsfiddle.net/h4duq68o/

3

The problem occurred when I converted my project, so as to use webpack.
Maybe some features has been changed in the newer editions.

I create a label like this:

const createLabel = (id, label) => {
    let material = label.material;
    let sprite = new THREE.Sprite(material);   
    sprite.text = label.text;
};

and here is how I create the material used in the above function:

let texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
texture.minFilter = THREE.LinearFilter;
let material = new THREE.SpriteMaterial({map: texture,
transparent: false
});

Here is the result of a mesh having a label on it.Untitled

4

THREE.Sprite does not have a text property.

6

Unfortunately, the issue remains.
It appeared after converting the project so as to use webpack.

I think it derives from the creation of canvas.
I installed canvas using npm and imported it as:

import {createCanvas} from ‘canvas’;

Then, I used it as:
let canvas = createCanvas(100, 100);
let context = canvas.getContext(‘2d’);
…
…
let texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
texture.minFilter = THREE.LinearFilter;
let material = new THREE.SpriteMaterial({map: texture,
transparent: false
});

Thanks for your time and your help.

7

Why are you not creating your canvas the usual way? Meaning:

let canvas = document.createElement( 'canvas' );
canvas.width = 100;
canvas.height = 100;
8

/cc

9

The issue derived from the material:

let material = new THREE.SpriteMaterial({map: texture, transparent: true, opacity: 1 });

Now, it’s fixed : - )

1 Like