如何使用三个js渲染像素化纹理?

时间:2013-04-03 06:46:17

标签: javascript rendering three.js

我修改了一个Minecraft-ish演示,这样你就可以跳转并放置块。但是我构造的块的纹理是平滑的,并且由于某种原因没有像素化。

enter image description here

我认为相关的来源是相关的:

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);

现场演示: http://ubershmekel.github.com/mine3js/

其余来源: https://github.com/ubershmekel/mine3js/blob/master/js/main.js

1 个答案:

答案 0 :(得分:5)

在回顾完问题后,我发现了这个错误。我没有将过滤器应用到污垢材料

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

应该是

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