加载的纹理看起来模糊，或者像单一颜色.如何使纹理清晰锐利

问题描述

我正在使用three.js来制作一些基本的3D，我正在加载一个jpeg图像作为纹理应用到如图所示的客户几何上:

I am using three.js to make some basic 3D, I am loading a jpeg image as texture to apply on a 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 a sharp grass texture, it appears like a blurred/ flat green fill.

使用的纹理:

纹理文件是一个 512 x 512 像素的 jpeg 文件.

texture file is a 512 x 512 px jpeg file.

推荐答案

ExtrudeGeometry 最初用于文本.如果查看它生成的 UV，它会使用 UV 顶点位置的 x 和 y 分量.在您的情况下，这些值超出范围 [ 0, 1 ].

ExtrudeGeometry was originally for text. If you look at the UVs it generates, it uses the x- and y-components of the vertex positions for UVs. In your case, those values are outside the range [ 0, 1 ].

您有两个选择.第一个选项是在回调函数中提供您自己的 UV 发生器.查看源代码注释.

You have two options. The first option is to provide your own UV-generator in a callback function. See the source code comments.

或者，将形状坐标除以​​ 1000，使它们位于 [ 0, 1 ] 范围内.然后将比例应用于您的网格: mesh.scale.set( 1000, 1000, 1 );

Alternatively, divide your shape coordinates by 1000 so they lie in the [ 0, 1 ] range. Then apply a scale to your mesh: mesh.scale.set( 1000, 1000, 1 );

three.js r.67

three.js r.67

这篇关于加载的纹理看起来模糊，或者像单一颜色.如何使纹理清晰锐利的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！