تین. js کے ساتھ ایک 3D آبجیکٹ کو پگھلنے کے لئے کس طرح

Feb 10, 2026
کيسے

ویب کے طور پر ہم اسے جانتے ہیں، مسلسل تبدیل اور تیار کر رہا ہے. ہم اب بھی ایک سادہ اور براہ راست درمیانے درجے کے طور پر یاد کر سکتے ہیں، چند سال پہلے ایک اور طول و عرض حاصل کی گئی ہے، اور یہ ایسا نہیں لگتا کہ یہ وہاں یا تو روکنے کے لئے جا رہا ہے. کے بدلے ویب سائٹ بلڈر ، ایک بار جب سائنس فکشن فلم کا حصہ کیا گیا تھا بصری اثرات اب آپ کی سوفی پر جھوٹ بولتے ہیں، اور بڑے پیمانے پر انٹرایکٹو تنصیبات میں احاطہ کرتا ہے جو اصل میں صرف پورے اسکرین گوگل کروم ونڈوز ہیں.

تین.js کے ساتھ ایک حقیقت پسندانہ پگھلنے کے اثر کو کیسے بنانے کے لئے ذیل میں مراحل پر عمل کریں.

01. تین.js منظر قائم کریں

آگے بڑھو اور تین. js لائبریری پکڑو اور اپنی سائٹ میں شامل کریں. آپ کو WebGlrenderer، منظر اور pheppececamera کو فوری طور پر انسٹال کرنے کی ضرورت ہوگی. ان کے بعد فوری طور پر، آپ کو اس منظر کو پیش کرنے کی ضرورت ہوگی درخواست ناممکن فریم .

02. منظر میں روشنی میں شامل کریں

اگلا، لائٹس 3D منظر میں شامل کرنے کی ضرورت ہے. اس مثال میں، دو روشنی استعمال کی جائیں گی: ایک وسیع روشنی اور ایک نقطہ روشنی. وسیع روشنی منظر کے لئے مجموعی طور پر عالمی رنگ کے طور پر کام کرتا ہے، جبکہ نقطہ روشنی روشنی کو کم کرے گا جو فاصلے سے کم ہوتی ہے. یہ منظر کچھ برعکس دے گا. 

 var abliviellight = نئے تین .ambientlight (0xcccccccccccc)؛
scene.add (Addientlight)؛
وار پوائنٹ لائٹ = نیا تین. پوائنٹ لائٹ (0xFFFFFFF، 1)؛
Pointight.position.set (10، 5، 0)؛

03. 3D ماڈل لوڈ کریں

اب یہ منظر قائم کیا گیا ہے، 3D ماڈل کو لوڈ کرنے کی ضرورت ہے. ماڈل کسی بھی معاون شکل (JSON، OBJ، DUE، وغیرہ) کا استعمال کرتے ہوئے لوڈ کیا جا سکتا ہے. ذیل میں ایک ڈائی ماڈل لوڈ کرنے کا ایک مثال ہے. اس مثال میں، یہ بہت اہم ہے کہ ماڈل عمودی ترمیم انجام دینے کے لئے کافی کثیر قزاقوں میں ہے.

اس مثال میں ہیر کھوپڑی کا استعمال کیا جا رہا ہے 3،500 پبلک. اگر پبلک شمار بہت کم ہے تو، عمودی حرکت پذیری بہت واضح اور خراب ہو جائے گی. 

 لوڈر = نیا تین .colladaloader ()؛
لوڈر. لوڈ ('DAE / deer_skull / deer_skull.dae'، Onloadcompletehandler)؛

04. ایک ٹمپ نقشہ شامل کریں

کم قیمت پر آپ کی ساختیوں کو گہرائی میں اضافہ کرنے کے لئے نقشہ جات نقشہ جات کامل ہیں. ایک بار جب آپ نے اپنے ٹمپ نقشہ کی تصویر کو تخلیق کیا ہے، تو آپ اسے صرف اس طرح کے طور پر ذیل میں مواد میں لاگو کرکے اسے لاگو کر سکتے ہیں. اس کے علاوہ، آپ کو آپ کے ماڈل کے پیمانے پر فٹ ہونے کے لئے آپ کے ٹمپ نقشے کے پیمانے کو ایڈجسٹ کرنے کی ضرورت ہوگی. 

 مواد. umpmapap = 'img / deer_skull / deer-bump.jpg'؛
مواد. bumpscale = .008؛

05. عمودی طور پر استعمال کریں

ان کی سائٹ کے دوران، جانی نے تین.js کے لئے جیروم Etienne کی طرف سے ایک کھیل کی توسیع کا استعمال کیا ہے جو عمودی حرکت پذیری کرنے کے لئے آسان بناتا ہے. یہ توسیع فریم کی شرح پر ایک ماڈل کے ہر عمودی کو آسان رسائی کی اجازت دیتا ہے، اس کے ساتھ ساتھ waveforms کا استعمال کرتے ہوئے عمودی کو جوڑنے کے لئے براہ راست بنانے کے لئے.

The. عمودی حرکت پذیری توسیع ETIENNE GITHUB کے ذریعہ دستیاب ہے. ہم آگے بڑھیں گے کہ اگلے مرحلے میں یہ کس طرح استعمال کیا جاتا ہے.

Users can interact with the 3D model and view from multiple angles

صارفین 3D ماڈل کے ساتھ بات چیت کرسکتے ہیں اور ایک سے زیادہ زاویہ سے دیکھیں گے

06. پگھلنے شروع

جیومیٹری کا ایک ٹکڑا پگھلنے میں کچھ مجموعی اقدامات شامل ہیں. سب سے پہلے، ہر نقطہ مسلسل نیچے نیچے دھکا دیا جاتا ہے. جب ایک نقطہ زمین تک پہنچ جاتا ہے، تو اس کا استعمال کرتے ہوئے اس سے باہر نکال دیا جاتا ہے جو ہم 'دھکا ویکٹر' کہتے ہیں.

اگلا، ہم اس پوائنٹس کو دے دیں گے جو نیچے موٹائی کے ساتھ جمع ہوتے ہیں تاکہ پگھل جیومیٹری مکمل طور پر فلیٹ نہیں ہے. اس کو حاصل کرنے کے لئے، جانی نے Houdini میں Skeel Lee کے VFX Shader سے کوڈ پیش کیا ہے اور اسے نظر ثانی کی.

07. عمودی نیچے کی طرف منتقل کرنا شروع کریں

ذیل میں عمودی طور پر ایک ماڈل کی جیومیٹری کو زمین کی طرف بڑھانے کے لئے عمودییکس حرکت پذیری کا استعمال کرنے کا ایک مثال استعمال ہے. 

 var vertexanimation = نئے threeox.vertexanimation (جیومیٹری، فنکشن (اصل، پوزیشن، ڈیلٹا، اب) {پوزیشن. * meltamount * modelheight؛}

اس کی طرف سے وضاحت کی شرح پر پوائنٹس کو نیچے دھکا دے گا meltamount. . رینڈر سائیکل میں اپنے عمودی حرکت پذیری پر 'اپ ڈیٹ' کو بھی یاد رکھیں.

08. دھکا ویکٹر کا تعین کریں

جب ایک نقطہ زمین پر پہنچ گیا ہے، تو اسے پگھل اثر کو حاصل کرنے کے لئے باہر نکال دیا جائے گا. مندرجہ ذیل کوڈ اس بات کا تعین کر رہا ہے کہ ایکس اور Z محور میں عمودی کو دھکا دینے کے لئے جس طرح آپ کو یونیفارم بے گھر ہونے کی ضرورت ہے. مشروط اس بات کو یقینی بناتا ہے کہ صرف پوائنٹس جو ماڈل کی سب سے کم حد تک پہنچ گئی ہیں (زمین) باہر دھکیلے جاتے ہیں. 

اگر (پوزیشن. & lt؛ bbox.min.y) {
  Var Centroid = BBOX.MAX.CLONE (). شامل کریں (bbox.min.clone ()). ڈویژنسلر (2.0)؛
Pushvector = پوزیشن. کلون (). ذیلی (Centroid)؛
pushvector.y = 0؛ }

09. پگھل محسوس کرو قدرتی

مندرجہ ذیل کوڈ کو تحریک میں بے ترتیب بنانے کے لئے شور کا استعمال کرتا ہے لہذا پگھل نامیاتی محسوس ہوتا ہے. اثر کو حاصل کرنے کے لئے شور متغیر کو tweaked کیا جا سکتا ہے. اس کے بعد شور دھکا ویکٹر پر لاگو ہوتا ہے meltamount. اور Speadamount. پگھلنے والی پول کی شرح اور سائز کو کنٹرول کرنے کے لئے. یہ آؤٹ لک ویکٹر آخر میں شمار کیا جاتا ہے اور پھر عمودی خود کو لاگو کیا جاتا ہے. 

 var n = noiseampletuction * generator.getval ((پوزیشن. x) * شورفیریسیئنسی + شور آفسیٹ)؛
var outwardvector = pushvector.multiplyscalar (((meltamount * Speadamount) + N) * باہر کی طرف سے)؛
پوزیشن. (Outwardvector)؛

10. پگھلنے والی پول موٹائی دیں

کوڈ نے بتایا کہ اب تک پگھل اثر کو حاصل کرے گا، لیکن دو چیزیں اس کے ساتھ غلط ہیں. سب سے پہلے، پول کافی فلیٹ محسوس کرے گا، کیونکہ تمام پوائنٹس نے اسی Y پوزیشن میں پگھل دیا ہے. دوسرا، چونکہ وہ سب ایک ہی y کا اشتراک کرتے ہیں، بہت سے پوائنٹس اسی اونچائی پر اسٹیک کیے جائیں گے، جو flickering کی وجہ سے ہو سکتا ہے. اس سے بچنے کے لئے، پگھل کی شرح پر موٹائی لاگو ہوتی ہے: 

 پوزیشن. * = meltamount * poolthickness؛

11. دوسرے ماڈلوں پر اسے آزمائیں

مندرجہ بالا کوڈ کے ساتھ، کافی کثیر اجزاء کے ساتھ کسی بھی ماڈل پگھل جا سکتا ہے. کوڈ باہر ایک زپ فائل ڈاؤن لوڈ کریں یہاں اور جو کچھ چاہے اس کے ساتھ ماڈل کو تبدیل کریں. مزے کرو!

یہ مضمون اصل میں شائع ہوا ویب ڈیزائنر مسئلہ 265. اسے خریدیں یہاں .

متعلقہ مضامین:

  • تین.js کے ساتھ انٹرایکٹو 3D بصری بنائیں
  • ویب ڈیزائنرز کے لئے بہترین رنگ کے اوزار
  • ویب ڈیزائن کے کاٹنے سے بچیں

کيسے - انتہائی مشہور مضامین

ایک کتے کو کیسے ڈراؤ

کيسے Feb 10, 2026

آج کا ٹیوٹوریل آپ کو ایک کتے کو کیسے ڈراؤ گا. کتوں اور بلیوں کے کنکال بہت..

پیٹرن سٹیمپ کے آلے کے ساتھ بناوٹ بنائیں

کيسے Feb 10, 2026

(تصویری کریڈٹ: لینو Drieghe) اگر آپ کو ایک خالی کینوس پر گھومنے لگے تو..

فوٹوشاپ میں بناوٹ کیسے استعمال کریں

کيسے Feb 10, 2026

بناوٹ اکثر روایتی اور ڈیجیٹل آرٹ ورک کے درمیان لائنوں کو پھیلاتا ہے. اکثر دو کے درمیان فرق کو بتانا آسان ہ�..

فوٹوشاپ میں Colourise Greyscale کام

کيسے Feb 10, 2026

حتمی تصویر مکمل سائز کو دیکھنے کے لئے سب سے اوپر دائیں میں آئک�..

حیرت انگیز کے ساتھ کامل پروٹوٹائپ اور ہاتھ سے دور ڈیزائن

کيسے Feb 10, 2026

انٹرپرائز ٹیموں کے لئے پوشیدہ اے پی پی اور برانڈ کے نئے ڈیزائن ہینڈوف ک�..

مایا میں اپنی مرضی کے مطابق رگ کنٹرول کیسے بنائیں

کيسے Feb 10, 2026

یہ مایا ٹیوٹوریل آپ کو اپنی مرضی کے مطابق رگوں کی تعمیر کیسے کر�..

آپ کے پادری آرٹ ورک پر ڈرامہ کیسے شامل کریں

کيسے Feb 10, 2026

Rembrandt اور Caravaggio جیسے عظیم فنکاروں نے ان کے آرٹ ورک کو تھوڑا سا ڈرامہ اور ..

ایک گھوسٹ رائڈر تبدیلی کی سماعت

کيسے Feb 10, 2026

صفحہ 1 کا 2: صفحہ 1 صفحہ 1 ..

اقسام