The loaded texture appears to be blurry or similar to a single color. How to make a texture clear and sharp
I am using three.js to generate some basic 3D image. I am loading a jpeg image as a texture to apply in custome geometry as shown:
var floor = new THREE.Shape([
new THREE.Vector2 (300, 50),
new THREE.Vector2 (450, 100),
new THREE.Vector2 (650, 80),
new THREE.Vector2 (700, 180),
new THREE.Vector2 (980, 280),
new THREE.Vector2 (900, 420),
new THREE.Vector2 (850, 560),
new THREE.Vector2 (600, 590),
new THREE.Vector2 (500, 500),
new THREE.Vector2 (370, 570),
new THREE.Vector2 (200, 410),
new THREE.Vector2 (10, 300),
new THREE.Vector2 (100, 200),
new THREE.Vector2 (230, 180),
]);
var floorGeometry = new THREE.ExtrudeGeometry(floor, {
bevelEnabled: false,
amount: 10
});
var grass_1 = new THREE.ImageUtils.loadTexture("images/grass_1.jpg");
var floorMaterial = new THREE.MeshPhongMaterial({
map:grass_1
});
var mesh = new THREE.Mesh(floorGeometry, floorMaterial);
mesh.rotation.x = -90 * Math.PI / 180;
mesh.position.x = -500;
mesh.position.z = 300;
mesh.receiveShadow = true;
scene.add(mesh);
var light = new THREE.DirectionalLight(0xFFFFFF, 1);
light.position.set(1, 3, 2);
scene.add(light);
light.castShadow = true;
light.shadowDarkness = .1;
light.shadowMapWidth = 2048;
light.shadowMapHeight = 2048;
light.position.set(500, 1500, 1000);
light.shadowCameraFar = 2500;
light.shadowCameraLeft = -2000;
light.shadowCameraRight = 2000;
light.shadowCameraTop = 2000;
light.shadowCameraBottom = -1000;
Instead of harsh grass texture, it looks like a blurry / flat green fill.
Texture used:
Texture file
is a 512 x 512 px JPEG file.
+1
source to share
1 answer