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:
is a 512 x 512 px JPEG file.
+1
kochumvk
source
to share
1 answer
ExtrudeGeometry
was originally for text. If you look at the UV rays it generates, it uses the x- and y-components of the vertex positions for the UVs. In your case, these values ββare outside the range [0, 1].
. - - . . .
, 1000, [0, 1]. : mesh.scale.set( 1000, 1000, 1 );
three.js r.67
+1
WestLangley