Thee.js 纹理在一个模型上很好，在另一个模型上模糊（自定义模型）

Question

所以我是 Three.js 的新手，所以我正在学习关于纹理化自定义 geo 的教程，该教程将经典的 head obj 作为测试文件提供。我正在尝试编辑脚本以渲染我自己的自定义地理区域，但它使纹理极其模糊和像素化。我只是将我的地理和纹理添加到与示例头部相同的路径，但它仍然无法正常工作。还有什么我需要改变的吗？这是调用 material stuff

的片段

 // load external geometry
 var loader = new THREE.OBJLoader();
 var textureLoader = new THREE.TextureLoader();

 loader.load('/assets/model/Terrain/Terrain.obj', function (object) {
  var colorMap = textureLoader.load('/assets/model/Terrain/Terrain_Color.jpg');
  var bumpMap = textureLoader.load('/assets/model/Terrain/Terrain_Disp.jpg');
  var faceMaterial = getMaterial('phong', 'rgb(255, 255, 255)');

  object.traverse(function(child) {
   if (child.name == 'Plane') {
    child.visible = false;
   }
   if (child.name == 'Infinite') {
    child.material = faceMaterial;
    faceMaterial.roughness = 0.875;
    faceMaterial.map = colorMap;
    faceMaterial.bumpMap = bumpMap;
    faceMaterial.roughnessMap = bumpMap;
    faceMaterial.metalness = 0;
    faceMaterial.bumpScale = 0.175;
   }
  } );

  object.scale.x = 20;
  object.scale.y = 20;
  object.scale.z = 20;

  object.position.z = 0;
  object.position.y = -2;
  scene.add(object);
 });

 // renderer
 var renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth, window.innerHeight);
 renderer.shadowMap.enabled = true;

 var controls = new THREE.OrbitControls( camera, renderer.domElement );

 document.getElementById('webgl').appendChild(renderer.domElement);

 update(renderer, scene, camera, controls);

 return scene;
}

function getMaterial(type, color) {
 var selectedMaterial;
 var materialOptions = {
  color: color === undefined ? 'rgb(255, 255, 255)' : color,
 };

Answer 1

我最终放弃了自定义几何图形，只是将我的地图加载到一个带有数组的立方体上，同时增加了置换贴图的立方体分区...由于自定义几何图形非常接近，所以效果很好无论如何一个盒子...

Thee.js 纹理在一个模型上很好，在另一个模型上模糊（自定义模型）

Thee.js Textures fineon one model and blurry on another (custom models)

javascript

textures

three.js