Currently, I am working on a customization project where I am using three.js to export an HTML5 canvas as a 3D preview. My goal is to have the texture placed only on the front side, but it seems to appear on all sides instead.
This is the code I am using:
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);
}
Unfortunately, the output I am getting is not what I expected. Here's how it looks: