As a beginner in the realm of Three.js, I have been following a tutorial on texturing custom geometric shapes. The tutorial used a classic head OBJ file as a test case, which worked perfectly fine. However, when I tried to tweak the script to render my own custom geometry, the textures turned out to be extremely blurry and pixelated. Even though I placed my geometry and textures in the same paths as the example head file, it didn't resolve the issue. Is there something else that needs to be adjusted? Below is the snippet that calls the material properties:
// 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,
};