Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to render pixelated textures with three js?

I modified a minecraft-ish demo so you can jump around and place blocks. But the texture of the blocks I construct is smoothed and not pixelated for some reason.

enter image description here

The source I think is relevant:

var textureDirt = THREE.ImageUtils.loadTexture( 'img/dirt.png' );
textureGrass.magFilter = THREE.NearestFilter;
textureGrass.minFilter = THREE.LinearMipMapLinearFilter;
var material = new THREE.MeshLambertMaterial( { map: textureDirt, ambient: 0xbbbbbb, vertexColors: THREE.VertexColors } );

var geometry = new THREE.CubeGeometry(1,1,1);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = point[0];
mesh.position.y = point[1];
mesh.position.z = point[2];

// for physics
mesh.blockType = type;
world[point] = mesh;

scene.add(mesh);

Live demo: http://ubershmekel.github.com/mine3js/

The rest of the source: https://github.com/ubershmekel/mine3js/blob/master/js/main.js

like image 487
ubershmekel Avatar asked Apr 03 '13 06:04

ubershmekel


1 Answers

After reviewing the question, I found the bug. I didn't apply the filters to the dirt material

textureGrass.magFilter = THREE.NearestFilter;
textureGrass.minFilter = THREE.LinearMipMapLinearFilter;

Should have been

textureDirt.magFilter = THREE.NearestFilter;
textureDirt.minFilter = THREE.LinearMipMapLinearFilter;
like image 54
ubershmekel Avatar answered Oct 26 '22 22:10

ubershmekel