Center a Label on an Can or Bottle with resize the Texture

Questions
1

Hello everyone,

I’m currently working on a label configurator.
The created label should be displayed on a can or bottle.

Unfortunately I can’t find a way to shrink and center the label loaded as a texture.
Have I taken the wrong approach here?
I can’t find a solution at the moment!

In which direction would you consider to solve the problem?

Here is the Code:

var scene = new THREE.Scene();
scene.background = new THREE.Color(0xeeeeee); 
var loader = new GLTFLoader();
var canLid: any;
var canBody: any;


loader.load( 'assets/3dmodel/Can-2.glb',  ( gltf ) => {

  canBody = gltf.scene.children[0];
  canLid = gltf.scene.children[1];
  scene.add(canLid);

  var texture = new THREE.TextureLoader().load(this.getDataUrlFromSvg());
  texture.wrapS = THREE.RepeatWrapping;
  texture.repeat.set(1, 1);
  texture.flipY = false;
 
  canBody.material.map = texture;
  canBody.material.transparent = false;
  canBody.needsUpdate = true;

  scene.add(canBody);

}, undefined, function ( error ) {

  console.error( error );

} );

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 2000);
var renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth/2, window.innerHeight/2);
document.body.appendChild(renderer.domElement);

camera.position.z = 15;

var light = new THREE.DirectionalLight(0xffffff, 5);
light.position.set(1, 1, 1).normalize();
scene.add(light);

var ambientLight = new THREE.AmbientLight(0x40404, 8); // Mittelgraues Licht
scene.add(ambientLight);

var mouseDown = false;
var mouseX = 0;
var mouseY = 0;

function onMouseDown(event: any) {
    mouseDown = true;
    mouseX = event.clientX;
    mouseY = event.clientY;
}

function onMouseUp() {
    mouseDown = false;
}

function onMouseMove(event: any) {
    if (mouseDown) {
        var deltaX = event.clientX - mouseX;
        var deltaY = event.clientY - mouseY;

        canBody.rotation.y += deltaX * 0.01;
        canBody.rotation.x += deltaY * 0.01;

        canLid.rotation.y += deltaX * 0.01;
        canLid.rotation.x += deltaY * 0.01;

        mouseX = event.clientX;
        mouseY = event.clientY;
    }
}

window.addEventListener('mousedown', onMouseDown, false);
window.addEventListener('mouseup', onMouseUp, false);
window.addEventListener('mousemove', onMouseMove, false);

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

animate();

Editor
Editor1181×708 224 KB

can-with-texture

Thanks a lot

Marco

2

The size and positioning of the texture is based on the UV mapping - it’s best you adjust it in a 3D editing software, Blender for example.