Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

PixelPerfect Sprite (feature request)

See original GitHub issue

I love three.js but it amaze me that we are not able to render images in a scene without changing it’s properties.

On the left side the best result I could get with this config:

SpriteMaterial.sizeAttenuation = false
texture.minFilter = THREE.NearestFilter
sprite.scale = 0.008

On the right side the actual PNG pasted in Photoshop. I can achieve the result I want by overlapping a div and using CSS/HTML but I see this as a dirty solution.

Issue Analytics

State:
Created 3 years ago
Comments:14

Top GitHub Comments

1reaction

Josemacommented, Mar 31, 2020

Imagine that Three.js is ported in the future to a smart-tv device that support WebGL but does not have CSS+HTML. I don’t think Unity or any other 3D engine use CSS+HTML to solve this issue.

0reactions

Mugen87commented, Mar 31, 2020

I’m sorry but this is not a real feature request since you can implement annotations or status bars with existing library features like sprites or the CSS renderers. I suggest you search in the forum for more information about this topic. Especially the following post explains how to implement health bars like in your screenshot in a web-based game:

https://discourse.threejs.org/t/sphere-health-bar/11890/5?u=mugen87

Classes like CSS2DRenderer might be helpful in this context.

BTW: Using HTML/CSS is not a dirty solution like you mentioned in your initial post. Many games used Flash in the past for implementing UIs. Using HTML/CSS with JS is definitely the better choice.