Thee.js纹理精细化一个模型，模糊另一个模型（自定义模型）

Question

所以我对Three.js很陌生，因此我遵循了关于纹理化自定义地理的教程，该教程将经典的头部obj作为一个有效的测试文件。我尝试编辑脚本来渲染我自己的自定义地理位置，但它会使纹理极其模糊和像素化。我只是将我的地理位置和纹理添加到与示例头相同的路径中，但它仍然无效。还有什么我需要改变的吗？这是调用材料的片段

＆＃13;

＆＃13;

	// 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,
	};

＆＃13;

＆＃13;

＆＃13;

Answer 1

我最终放弃了自定义几何体，只是将我的地图加载到一个带有数组的立方体上，同时将立方体划分为一个置换贴图...由于自定义地理位置非常靠近一个盒子，因此效果很好反正...