Why the Sprite disappears from scene when add map

Questions
1

I am working on a react js web app, I am working with the three js, I wanted to add a sprite that I will later copy and duplicate. anyway I can add a sprite to the scene (white square) but when I add the map(png image) to the spriteMaterial it disappears… any suggestions
Thank you in advance.

2

Can you show some code?

3

hi Xiaoming,
I used the basic code on the three documentation …

var spriteMap = new THREE.TextureLoader().load(“fish.png”);
var spriteMaterial = new THREE.SpriteMaterial({
// map: spriteMap,
color: 0xffffff
});
var sprite = new THREE.Sprite(spriteMaterial);
scene.add(sprite);

see when I comment the map in spriteMaterial it gives me the white square I can move it around but then when I add the map(a png images of a black fish) nothing appears.
And thank you so much for your help I really appreciate it.

4

Hi!
Any warnings or error messages in the browser console?

5

Hi prisoner849, the only threejs warning are actually the first just consoled THREE.WebGLRenderer 103 and THREE.Material: ‘color’ parameter is undefined. with no line number of the related warning

6

Any chance to provide the link to your project or a live code example?

7

Hey prisoner849, this is a pen with the code in the file, the project belong to my company… and you know disclosure agreements …awayway this is the header section I am a begginer with three so excuse my ignorance XD… and just ignore the commented lines
https://codepen.io/Yassine_Zanina/pen/ZNPoVN?editors=1010

8

I just stumbled upon one of your answer to a question about adding an image to a planeGeometry the funny thing is I gave my spriteMaterial map this image link “https://threejs.org/examples/textures/UV_Grid_Sm.jpg” and it showed up …so now that we figuered that the code works why doesn’t it work local file / image