Search code examples
javascriptthree.jstextures

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


So I'm pretty new to Three.js and so I'm following a tutorial on texturing custom geo which gave the classic head obj as a test file which is working. I'm trying to edit the script to render my own custom geo instead but it makes the textures extremely blurry and pixelated. I just added my geo and textures to the same paths as the example head and its still not working. is there something else I need to change? Here is the snippet calling the 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,
	};

Image issue pictures


Solution

  • I ended up ditching the custom geometry and just loaded up my maps on a cube with an array, while bumping up the cubes divisions for a displacement map... which worked out fine since the custom geo was so close to a box anyways...