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