Three.js: penskalaan dan offset tekstur gambar

Dibuat pada 1 Mei 2012 · 10Komentar · Sumber: mrdoob/three.js

Saya memiliki satu gambar besar yang saya muat sebagai tekstur. Saya kemudian memiliki beberapa kubus yang saya coba terapkan tekstur ini. Masalahnya adalah ketika tekstur diterapkan, itu mengubah skala gambar ke lebar dan tinggi kubus. Yang ingin saya lakukan adalah memastikan bahwa tidak ada penskalaan yang terjadi, lalu saya dapat memindahkan "offset" tekstur untuk memilih bagian yang ingin saya tampilkan.

Adakah yang bisa mengarahkan saya ke arah yang benar?

Misalnya, jika tekstur saya 800x2000. Dan saya memiliki kubus 100x100, saya ingin menunjukkan porsi 100x100 dari tekstur besar itu, diimbangi seperti 300x400. Jadi sesuatu seperti:

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

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

Apakah saya perlu memanfaatkan tekstur kanvas untuk ini?

Question

Sumber

moondev

Komentar yang paling membantu

Ah benar. Texture tidak memiliki .scale , memiliki .repeat . Coba ini:

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 pada 2 Mei 2012

👍8

Semua 10 komentar

Ok saya menuju ke sana, tetapi saya perlu menemukan dokumentasi tentang cara menggunakan parameter offset dan pengulangan. Tampaknya nilai tersebut harus antara 0 dan 1, dan tidak yakin bagaimana cara mendapatkan nilai yang dapat diubah menjadi piksel.

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

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

moondev pada 1 Mei 2012

Memposting solusi saya seandainya bermanfaat bagi orang lain. Saya akhirnya menggunakan kanvas untuk tekstur dan memuat / memotong gambar di sana sebagai gantinya. Sepertinya bekerja dengan baik sejauh ini.


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 pada 2 Mei 2012

👍1

Begitulah cara melakukannya, tetapi jika Anda ingin menggunakan GPU, Anda dapat melakukannya:

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;

Atau sesuatu di sepanjang garis :)

mrdoob pada 2 Mei 2012

👍1

Keren! Terima kasih atas tindak lanjutnya

moondev pada 2 Mei 2012

Melakukan ini pada GPU tentu lebih baik. Namun ketika saya mencoba untuk mengatur properti scale.x dari tekstur saya terus mendapatkan kesalahan "tidak dapat mengatur properti x". Ada ide? Saya mencobanya menggunakan metode tex.scale.set (w, h) juga dengan hasil yang sama.

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

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

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

moondev pada 2 Mei 2012

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

Aneh, jika gambar tersebut sudah memiliki src, artinya sudah dimuat. Mengapa memuatnya lagi?

Saya pikir Anda ingin melakukan ini sebagai gantinya:

tex = new THREE.Texture( img );

mrdoob pada 2 Mei 2012

Terima kasih, ya, hanya menggunakan THREE.Texture () langsung pada objek img tampaknya telah mempercepat segalanya. Masih mendapatkan kesalahan pada operasi tex.scale. Pokoknya menerjemahkan penskalaan menggunakan tex.repeat? Saya bisa mengubah nilai-nilai itu tanpa masalah.

moondev pada 2 Mei 2012

Ah benar. Texture tidak memiliki .scale , memiliki .repeat . Coba ini:

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 pada 2 Mei 2012

👍8

Saya datang ke sini untuk mencari tahu bagaimana menskalakan tekstur hanya untuk mempelajari tentang properti pengulangan dan offset .. tapi bagaimana saya bisa menskalakannya?