Ridimensionare l’oggetto Shape di Three.js

In alcuni contesti specifici dell’uso di Three.js può essere necessario lavorare intensivamente con l’oggetto THREE.Shape (il quale è una estensione dell’oggetto THREE.Path); viene solitamente usato durante il caricamento di file SVG (tramite THREE.SVGLoader) in quanto rappresenta bene un profilo 2D vettoriale.

Lavorando con questo oggetto può rendersi necessario attuare delle operazioni di ridimensionamento o scalatura in quanto spesso le forme posso avere dimensioni eccessive o fuori scala. Per questo motivo di seguito vengono riportate 3 funzioni Javascript fondamentali durante l’uso di THREE.Shape.

Calcolare la dimensione di una Shape

Funzione per il calcolo delle componenti larghezza e altezza (su un piano 2D) dell’oggetto THREE.Shape.

function GetShapeSize(shape)
{
    let boundingBox = new THREE.Box2();
    boundingBox.setFromPoints(shape.getSpacedPoints(100));
    let bbWidth = boundingBox.max.x - boundingBox.min.x;
    let bbHeight = boundingBox.max.y - boundingBox.min.y;
    return { width:bbWidth, height:bbHeight };
}

Ridimensionare una Shape tramite fattore di scala

Funzione per scalare un oggetto THREE.Shape di due fattori di scala distinti (X e Y).

function GetShapeScaled(shape, scaleX, scaleY) 
{
    const points = shape.getSpacedPoints(100);
    const resizedPoints = points.map(point => {
        return new THREE.Vector2(point.x * scaleX, point.y * scaleY);
    });

    const resizedShape = new THREE.Shape(resizedPoints);
    return resizedShape;
}

Ridimensionare una Shape a dimensioni specifiche

Funzione per ridimensionare un oggetto THREE.Shape a valori di larghezza e altezza definiti.

function GetShapeResized(shape, targetWidth, targetHeight)
{
    const boundingBox = new THREE.Box2();
    boundingBox.setFromPoints(shape.getSpacedPoints(100)); 

    const originalWidth = boundingBox.max.x - boundingBox.min.x;
    const originalHeight = boundingBox.max.y - boundingBox.min.y;

    const scaleX = targetWidth / originalWidth;
    const scaleY = targetHeight / originalHeight;

    const points = shape.getSpacedPoints(100);
    const resizedPoints = points.map(point => {
        return new THREE.Vector2(point.x * scaleX, point.y * scaleY);
    });

    const resizedShape = new THREE.Shape(resizedPoints);
    return resizedShape;
}