Three js, block textures are blured

debugcn Published at Dev

Antoine Duval

I'm trying to make a 3D block with the three.js library.
I've done it. Now i wan't to put a texture on it. I did that and it's working :

var textureHerbe = [
     new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('img/texture/herbe/border.gif')}),
     new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('img/texture/herbe/border.gif')}),
     new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('img/texture/herbe/top.gif')}),
     new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('img/texture/herbe/bottom.gif')}),
     new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('img/texture/herbe/border.gif')}),
     new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture('img/texture/herbe/border.gif')})
];

Thats the result :
enter image description here
But look at this, it's blured !
So i looked at this this link. And i don't know how to mix my code with his solution's code :/
Do you jnow how i can do it ? Thx and have a good day.

gaitat

First of all you are loading the same texture several times. So assign it to a variable and then make the textures resolution-independent and render without blurriness.

var border_tex = new THREE.ImageUtils.loadTexture('img/texture/herbe/border.gif');
border_tex.magFilter = THREE.NearestFilter;
border_tex.minFilter = THREE.LinearMipMapLinearFilter;

var top_tex = new THREE.ImageUtils.loadTexture('img/texture/herbe/top.gif');
top_tex.magFilter = THREE.NearestFilter;
top_tex.minFilter = THREE.LinearMipMapLinearFilter;

var bottom_tex = new THREE.ImageUtils.loadTexture('img/texture/herbe/bottom.gif');
bottom_tex.magFilter = THREE.NearestFilter;
bottom_tex.minFilter = THREE.LinearMipMapLinearFilter;

var textureHerbe = [
    new THREE.MeshBasicMaterial( { map: border_tex } ),
    new THREE.MeshBasicMaterial( { map: border_tex } ),
    new THREE.MeshBasicMaterial( { map: top_tex } ),
    new THREE.MeshBasicMaterial( { map: bottom_tex } ),
    new THREE.MeshBasicMaterial( { map: border_tex } ),
    new THREE.MeshBasicMaterial( { map: border_tex } ),
];

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-07-8

Comments

0 comments

From Dev

Related Related

Article

Three js, block textures are blured

Three js, block textures are blured

three.js: BufferGeometry and textures

Textures are Black in Three.JS

three.js mesh with many textures

Rotating textures using canvas with Three.js

User uploaded textures in three.js

Three js transparency issue with PointClouds and textures

Three.js Merge objects and textures

Two canvases as textures for plane in three.js

Export from Blender to Three js with Textures

square textures for circular particles in three.js

Is three.js ObjectLoader capable of loading textures?

Three.js: Passing array of textures to shaderMaterial

preloading multiple textures in with Three.js THREE.textureLoader

Load textures from Base64 in Three.js

Applying Textures to Non-Cube Polyhedra with Three.js

Changing textures for specific faces on the fly in three.js

Managing z-buffering with transparent textures in Three.js

Three.js Multiple textures and images in one scene

How to import model and associated textures into three.js from Blender?

How do I repeat textures without stretching in Three.js?

THREE.js Imported model doesn't apply face textures

Cloning textures without causing duplicate card memory in THREE.js

Can you reflect geometry (not textures) in three.js?

Is there a way to make a custom transition between textures in three.js

How to add front and Back textures in Three.js shape geometry?

Three.js Multiple textures and images in one scene

Cloning textures without causing duplicate card memory in THREE.js

Three.js Cube - Different textures didn't work

Voxelizing in three.js — particle materials from Textures