Three.js: تحجيم وإزاحة نسيج الصورة

حسنًا ، سأصل إلى هناك ، لكني بحاجة إلى العثور على وثائق حول كيفية استخدام الإزاحة وتكرار المعلمات. يبدو أنهم بحاجة إلى أن تكون بين 0 و 1 ، وليسوا متأكدين من كيفية الحصول على قيمة تتحول إلى بكسل.

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

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

نشر الحل الخاص بي في حال كان مفيدًا لأي شخص آخر. انتهى بي الأمر باستخدام قماش للنسيج وتحميل / اقتصاص الصورة هناك بدلاً من ذلك. يبدو أنه يعمل بشكل جيد حتى الآن.

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

هذه طريقة للقيام بذلك ، ولكن إذا كنت تريد استخدام وحدة معالجة الرسومات ، فيمكنك القيام بذلك:

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;

أو شيء من هذا القبيل :)

رائع! شكرا للمتابعة

من المؤكد أن القيام بذلك على وحدة معالجة الرسومات (gpu) هو أكثر كفاءة. ومع ذلك ، عندما أحاول ضبط خاصية scale.x للنسيج ، أستمر في الحصول على أخطاء "لا يمكن تعيين خاصية x". أيه أفكار؟ لقد جربته باستخدام طريقة tex.scale.set (w، h) وكذلك بنفس النتيجة.

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

هذا غريب ، إذا كانت الصورة تحتوي بالفعل على src ، فهذا يعني أنه تم تحميلها بالفعل. لماذا تحميله مرة أخرى؟

أعتقد أنك تريد القيام بذلك بدلاً من ذلك:

tex = new THREE.Texture( img );

شكرًا ، نعم فقط باستخدام THREE.Texture () مباشرة على الكائن img يبدو أنه يسرع الأمور. لا يزال هناك خطأ في عمليات tex.scale. على أي حال لترجمة القياس باستخدام tex.repeat؟ يمكنني تعديل هذه القيم لا مشكلة.

آه ، صحيح. Texture على .scale ، بل يحتوي على .repeat . جرب هذا:

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;

لقد جئت إلى هنا لمعرفة كيفية قياس نسيج فقط للتعرف على خصائص التكرار والإزاحة .. ولكن كيف يمكنني قياسها؟

nightlifelover كما هو مذكور في الإرشادات ، يجب توجيه طلبات المساعدة إلى stackoverflow .