My Object3D was imported in the following manner:
var customObject; // defining a global object
var loader = new THREE.ObjectLoader();
loader.load('path/to/object3d.json', function(object) {
customObject = object;
scene.add(customObject);
});
Now, my goal is to change the texture of certain Mesh elements within this object when a user clicks a button. Here's how I'm attempting to accomplish this:
// on button click {
for(var i in customObject.children) {
// applying texture to specific Mesh elements {
var texture = THREE.ImageUtils.loadTexture('path/to/image.jpg');
customObject.children[i].material = new THREE.MeshLambertMaterial({map: texture, needsUpdate: true});
} // end applying texture to specific Mesh elements
}
} // end on button click
While the code above successfully sets the texture, there seems to be an issue with distortion. The current result can be seen here:
How can I fix this problem so that the texture is correctly applied to both surfaces?