three.js texture on jSON object

Question

I'm using three.js to export HTML5 canvas as 3D preview on my customization project. my expected result is texture should placed on front side only. But, it appears on all sides.

My code :

var scene, renderer, camera;
var controls;
init();
animate();

function init()
{
var width = window.innerWidth;
var height = window.innerHeight;

renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize (width, height);
renderer.setClearColor (0x888888);
document.body.appendChild (renderer.domElement);

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera (45, width/height, 1, 10000);
camera.position.y = 120;
camera.position.z = 120;
camera.lookAt (new THREE.Vector3(0,0,0));

controls = new THREE.OrbitControls (camera, renderer.domElement);

var hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
hemiLight.color.setHSL( 0.6, 1, 0.6 );
hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
hemiLight.position.set( 0, 500, 0 );
scene.add( hemiLight );

var ambientLight = new THREE.AmbientLight (0xffffff);
scene.add(ambientLight);

//manager
var manager = new THREE.LoadingManager();
manager.onProgress = function (item, loaded, total) {
console.log( item, loaded, total );
};

var texture = new THREE.Texture();
var loader = new THREE.ImageLoader( manager );
loader.load( 'texturemug.jpg', function ( image ) {
console.log('load image');
texture.image = image;
texture.needsUpdate = true;
});

var loader = new THREE.ObjectLoader(manager);
loader.load ('shirt.json', function ( obj ) {
obj.traverse( function (child) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture;
child.material.needsUpdate = true;
}
});
scene.add( obj );
});
}

function animate()
{
controls.update();
requestAnimationFrame ( animate ); 
renderer.render (scene, camera);
}

But, I'm getting unexpected output. as follows,

Answer 1

I would consider looking into how the model you use is mapped with that texture in blender. And also check if the image you using as texture is not in anyway rotated or flipped