Three.js: dimensionamento e deslocamento de texturas de imagem

Criado em 1 mai. 2012 · 10Comentários · Fonte: mrdoob/three.js

Tenho uma imagem grande que estou carregando como textura. Então, tenho vários cubos aos quais estou tentando aplicar essa textura. O problema é que quando a textura é aplicada, ela dimensiona a imagem para a largura e altura do cubo. O que eu quero fazer é garantir que nenhum dimensionamento aconteça, então posso mover o "deslocamento" da textura para escolher a parte que desejo mostrar.

Alguém pode me apontar na direção certa?

Por exemplo, se minha textura for 800x2000. E eu tenho um cubo 100x100, quero mostrar uma parte 100x100 dessa textura grande, deslocada em cerca de 300x400. Então, algo como:

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

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

Eu preciso aproveitar as texturas da tela para isso?

Question

Fonte

moondev

Comentários muito úteis

Ah, verdade. Texture não tem .scale , tem .repeat . Experimente isto:

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 em 2 mai. 2012

👍8

Todos 10 comentários

Ok, estou chegando lá, mas preciso encontrar a documentação sobre como usar os parâmetros de deslocamento e repetição. Eles parecem estar entre 0 e 1 e não têm certeza de como obter um valor que converte em pixels.

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

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

moondev em 1 mai. 2012

Postar minha solução caso seja útil para outra pessoa. Acabei usando a tela para a textura e carregando / recortando a imagem ali. Parece funcionar bem até agora.


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 em 2 mai. 2012

👍1

Essa é uma maneira de fazer isso, mas se você quiser usar a GPU, pode fazer o seguinte:

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 algo parecido :)

mrdoob em 2 mai. 2012

👍1

Legal! Obrigado pelo seguimento

moondev em 2 mai. 2012

Fazer isso na GPU certamente tem um desempenho melhor. No entanto, quando tento definir a propriedade scale.x da textura, recebo erros "não é possível definir a propriedade de x". Alguma ideia? Eu tentei usando o método tex.scale.set (w, h) também com o mesmo resultado.

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

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

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

moondev em 2 mai. 2012

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

Isso é estranho, se a imagem já tem um src, significa que já foi carregada. Por que carregá-lo novamente?

Acho que você quer fazer isso:

tex = new THREE.Texture( img );

mrdoob em 2 mai. 2012

Obrigado, sim, apenas usar THREE.Texture () diretamente no objeto img parece ter acelerado as coisas. Ainda estou recebendo um erro nas operações tex.scale. Como traduzir o dimensionamento usando tex.repeat? Posso ajustar esses valores sem problemas.

moondev em 2 mai. 2012

Ah, verdade. Texture não tem .scale , tem .repeat . Experimente isto:

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 em 2 mai. 2012

👍8

Vim aqui para descobrir como dimensionar uma textura apenas para aprender sobre as propriedades de repetição e deslocamento ... mas como posso dimensioná-las?