Three.js: Skalieren und Versetzen von Bildtexturen

Ok, ich komme dorthin, aber ich muss Dokumentation finden, wie man die Offset- und Wiederholungsparameter verwendet. Sie müssen zwischen 0 und 1 liegen und sind sich nicht sicher, wie ein Wert erhalten werden soll, der in Pixel konvertiert wird.

tex = THREE.ImageUtils.loadTexture('texture.png');

tex.offset.x = ?
tex.offset.y = ?
tex.repeat.x = ?
tex.repeat.y = ?

Veröffentlichen Sie meine Lösung für den Fall, dass sie für andere hilfreich ist. Am Ende habe ich Leinwand für die Textur verwendet und stattdessen das Bild dort geladen / zugeschnitten. Scheint soweit gut zu funktionieren.

canvas = document.createElement('canvas');
canvas.height=200;
canvas.width=200;

ctx = canvas.getContext('2d');
ctx.fillStyle = '#FFFFFF';  
ctx.fillRect(0, 0, 200, val.200);

//this is where we set the "offset"
offx = -1 * 200;
offy = -1 * 200;

//img is a standard loaded image object
ctx.drawImage(img,offx,offy);

tex = new THREE.Texture(canvas);

Das ist eine Möglichkeit, aber wenn Sie die GPU verwenden möchten, können Sie dies tun:

tex.scale.x = 800 / 100;
tex.scale.y = 2000 / 100;
tex.offset.x = ( 300 / 100 ) * tex.scale.x;
tex.offset.y = ( 400 / 100 ) * tex.scale.y;

Oder so ähnlich :)

Cool! Vielen Dank für das Follow-up

Dies auf der GPU zu tun ist sicherlich performanter. Wenn ich jedoch versuche, die Eigenschaft scale.x der Textur festzulegen, erhalte ich immer wieder die Fehlermeldung "Eigenschaft von x kann nicht festgelegt werden". Irgendwelche Ideen? Ich habe es auch mit der Methode tex.scale.set (w, h) versucht, mit dem gleichen Ergebnis.

tex = THREE.ImageUtils.loadTexture(img.src);

scalex = img.width / 100;
scaley = img.height / 100;

tex.scale.x = scalex;
tex.scale.y = scaley;

tex = THREE.ImageUtils.loadTexture(img.src);

Das ist seltsam, wenn das Bild bereits einen src hat, bedeutet dies, dass es bereits geladen wurde. Warum wieder laden?

Ich denke, Sie möchten dies stattdessen tun:

tex = new THREE.Texture( img );

Danke, ja, nur THREE.Texture () direkt auf dem img-Objekt zu verwenden, scheint die Dinge beschleunigt zu haben. Bei tex.scale-Vorgängen wird jedoch immer noch ein Fehler angezeigt. Wie auch immer, um die Skalierung mit tex.repeat zu übersetzen? Ich kann diese Werte problemlos anpassen.

Ah, stimmt. Texture hat nicht .scale , sondern .repeat . Versuche dies:

tex.repeat.x = 100 / 800;
tex.repeat.y = 100 / 2000;
tex.offset.x = ( 300 / 100 ) * tex.repeat.x;
tex.offset.y = ( 400 / 100 ) * tex.repeat.y;

Ich bin hierher gekommen, um herauszufinden, wie man eine Textur skaliert, um mehr über die Wiederholungs- und Offset-Eigenschaften zu erfahren. Aber wie kann ich sie skalieren?

@nightlifelover Wie in den Richtlinien angegeben , sollten Hilfeanfragen an den