Three.js: mise à l'échelle et textures d'image décalées

Créé le 1 mai 2012 · 10Commentaires · Source: mrdoob/three.js

J'ai une grande image que je charge comme texture. J'ai alors plusieurs cubes sur lesquels j'essaye d'appliquer cette texture. Le problème est que lorsque la texture est appliquée, elle met l'image à l'échelle en fonction de la largeur et de la hauteur du cube. Ce que je veux faire, c'est m'assurer qu'aucune mise à l'échelle ne se produit, puis je peux déplacer le "décalage" de la texture pour sélectionner la partie que je veux afficher.

Est-ce que quelqu'un peut-il me montrer la bonne direction?

Par exemple, si ma texture est de 800x2000. Et j'ai un cube 100x100, je veux montrer une partie 100x100 de cette grande texture, décalée à 300x400. Donc quelque chose comme:

tex = THREE.ImageUtils.loadTexture('texture.png');
tex.left = 300
tex.top = 400

var pictureMaterial = new THREE.MeshBasicMaterial({map: tex});

Dois-je utiliser les textures de canevas pour cela?

Question

Source

moondev

Commentaire le plus utile

Ah, c'est vrai. Texture n'a pas de .scale , il a .repeat . Essaye ça:

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;

mrdoob le 2 mai 2012

👍8

Tous les 10 commentaires

Ok, j'y arrive, mais j'ai besoin de trouver de la documentation sur la façon d'utiliser les paramètres de décalage et de répétition. Ils semblent devoir être compris entre 0 et 1, et ne savent pas comment obtenir une valeur qui se convertit en pixels.

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

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

moondev le 1 mai 2012

Publier ma solution au cas où cela serait utile à quelqu'un d'autre. J'ai fini par utiliser la toile pour la texture et charger / recadrer l'image à la place. Semble bien fonctionner jusqu'à présent.


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);

moondev le 2 mai 2012

👍1

C'est une façon de le faire, mais si vous souhaitez utiliser le GPU, vous pouvez le faire:

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;

Ou quelque chose du genre :)

mrdoob le 2 mai 2012

👍1

Cool! Merci pour le suivi

moondev le 2 mai 2012

Faire cela sur le GPU est certainement plus performant. Cependant, lorsque j'essaie de définir la propriété scale.x de la texture, j'obtiens des erreurs "impossible de définir la propriété de x". Des idées? Je l'ai essayé en utilisant la méthode tex.scale.set (w, h) également avec le même résultat.

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

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

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

moondev le 2 mai 2012

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

C'est bizarre, si l'image a déjà un src, cela signifie qu'elle a déjà été chargée. Pourquoi le charger à nouveau?

Je pense que vous voulez faire ceci à la place:

tex = new THREE.Texture( img );

mrdoob le 2 mai 2012

Merci, oui, simplement utiliser THREE.Texture () directement sur l'objet img semble avoir accéléré les choses. Encore une erreur sur les opérations tex.scale. Quoi qu'il en soit pour traduire la mise à l'échelle en utilisant tex.repeat? Je peux modifier ces valeurs sans problème.

moondev le 2 mai 2012

Ah, c'est vrai. Texture n'a pas de .scale , il a .repeat . Essaye ça:

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;

mrdoob le 2 mai 2012

👍8

Je suis venu ici pour comprendre comment mettre à l'échelle une texture uniquement pour en savoir plus sur les propriétés de répétition et de décalage ... mais comment puis-je les mettre à l'échelle?