Three.js: Is there a way to use Nearest Neighbour scaling for textures?

Created on 28 Feb 2012  路  2Comments  路  Source: mrdoob/three.js

I am trying to use pixel art for my models and I'm loading a 16x16 .png for each face of a cube. Textures seem to be scaled using something that looks similar to Photoshop's Bicubic option, and this causes the pixel art to blur. Is there a way I can scale them in a manner more similar to Photoshop's Nearest Neighbour option, and preserve the sharp edges?

Question

Most helpful comment

For WebGLRenderer:

texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;

For CanvasRenderer this is more complicated and browser-specific but at least to some extent possible. See #1164

All 2 comments

For WebGLRenderer:

texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;

For CanvasRenderer this is more complicated and browser-specific but at least to some extent possible. See #1164

Thanks, that worked great.

Was this page helpful?
0 / 5 - 0 ratings