I am encountering an issue with applying textures on both the top and bottom faces of a surfboard obj file. The texture seems to split in the middle instead of being applied seamlessly across the face, and it also gets applied on the inside of the mesh. I am unsure if this problem is related to the model itself or if there is something missing in my code.
var loader = new THREE.OBJLoader();
var texture = new THREE.Texture();
var ImageLoader = new THREE.ImageLoader();
ImageLoader.load("models/white.jpg", function (image) {
texture.image = image;
texture.needsUpdate = true;
});
var custom = new THREE.Texture();
var customLoader = new THREE.ImageLoader();
customLoader.load("models/UV_Grid_Sm.jpg", function(image) {
custom.image = image;
custom.mapping = THREE.UVMapping;
custom.needsUpdate = true;
});
loader.load("models/Hidden 5'4-19'5-2 (Holes_Patched).obj", function(object){
object.traverse(function(child) {
if (child instanceof THREE.Mesh) {
if(child.name === 'Bottom') {
child.material = new THREE.MeshStandardMaterial({ map: custom});
}
else if(child.name === 'Top') {
child.material = new THREE.MeshStandardMaterial({ map: custom});
}
else {
child.material = new THREE.MeshStandardMaterial({ map: texture});
}
}
});
download obj file here The object has two group named "Top" but I can change that later.