Custom infospot with png image

[jingliseah]

I'm unable to load png files in each of the infospots by receiving errors such as: THREE.WebGLRenderer: Texture marked for update but image is incomplete or WebGL: INVALID_VALUE: texImage2D: no image [.WebGL-000001E6DA108E80] GL_INVALID_OPERATION: Texture format does not support mipmap generation.

It's only able to load a image in one infospot but the rest are displaying as a black square box. Is there a solution for this? @pchen66

Thanks, Jing

[OrsHH]

The same has happened to me and I solved it.

Check if the texture is x2 and correct format (maybe obvious, but sometimes needed) Before use the texture, you have to load it, I solve it using this: var textureLoader = new THREE.TextureLoader(); var texture = textureLoader.load(url, function(){ var infospot = new PANOLENS.Infospot('scale','url'); }); I hope this help you

[arp99]

what do each parameter of infospot.position.set(a,b,c) mean?.. and also how to add multiple infospots?

[claytonrothschild]

I also noticed if I set a timeOut in postLoad and delay a couple seconds, that the textures will load.

Very odd behavior. The above is good. I also solved it with: https://github.com/pchen66/panolens.js/issues/204

In general, these are just bandaids. In general, it has to do with scene rendering and texture rendering before image load is complete. Would love it if someone would swoop in and solve this for us.

[NickChen14]

maybe try this solution. import image through webpack. i used in vue-cli, it work!

import spotSrc from "@/assets/infospot/none.png";
const infospot = new PanoLens.Infospot(n, spotSrc);
panorama.add(infospot);

[jediborre]

Make it base64 and it will load! No black image.