I have a project idea to develop a 3D shoe design tool that allows users to create patterns and apply them to the shoes.
I am facing an issue with adding an image to a Three.js material. The texture appears blurry after updating it. As a beginner in Three.js, I'm uncertain if the aspect ratio is causing the problem or if it's something else.
This is how I am loading the texture:
var texture_loader = new THREE.TextureLoader();
var texture = texture_loader.load( 'https://ik.imagekit.io/toesmith/pexels-photo-414612_D4wydSedY.jpg', function ( texture ) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.offset.set( 0, 0 );
texture.repeat.set( 1, 1 );
vamp.material = new THREE.MeshPhongMaterial({
map: texture,
color: new THREE.Color('#f2f2f2'),
shininess: 20,
});
});
The current result looks like this:
https://i.sstatic.net/vhQ5B.png
However, the expected outcome should resemble this:
https://i.sstatic.net/fisUm.jpg
If anyone has insights or can provide assistance, I would greatly appreciate it. Thank you.
You can view the code on Codepen.