ویب جی ایل کے ساتھ مائع اثرات کیسے بنائیں

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

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

• 14 عظیم لینڈنگ پیج ڈیزائن

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

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

فائلوں کو ڈاؤن لوڈ کریں اس سبق کے لئے.

01. ابتدائی متغیرات شامل کریں

پروجیکٹ فائلوں سے شروع فولڈر کھولیں اور اسے اپنے کوڈ ایڈیٹر میں ڈال دیں. کھولیں ' index.html. 'اور آپ دیکھیں گے کہ جاوا اسکرپٹ لائبریریوں کو پہلے سے ہی آپ کے لئے منسلک کیا گیا ہے. خالی سکرپٹ ٹیگ کے اندر اندر یہ ہے کہ کوڈ کہاں جائے گا. یہاں ویب جی ایل نے اس بات کا یقین کرنے کے لئے پتہ چلا ہے کہ اس منصوبے کو چلایا جا سکتا ہے، پھر متغیرات کی ایک مکمل رینج شامل کردی جاتی ہے جو منظر میں استعمال کیا جائے گا.

 اگر (! detector.webgl) detector.addgetwebglmessage ()؛
var screen_width = window.innerwidth؛
var screen_height = window.innerheight؛
Var Renderer، کیمرے، منظر، MoverGroup، Florgeometry، Floormaterial، پوائنٹ لائٹ، pointight2، pgeometry؛
var floor_res = 60؛
var floor_ht = 650؛
وار stepcount = 0؛
var noisescale = 9.5؛
var noisesed = math.random () * 100؛ 

02. مزید متغیر بنائیں

متغیرات کے اگلے بلاک کو ہینڈل کرنا پانی کی منزل کتنی بڑی ہے اور اس کی رفتار کو ابتدائی ماؤس کے عہدوں کے ساتھ ساتھ منتقل کرے گا. اسکرین کا مرکز کام کیا جاتا ہے اور بہتر شور لائبریری پانی کی سطح کو پیدا کرنے کے لئے استعمال کیا جا رہا ہے.

 var floor_width = 3600؛
var floor_depth = 4800؛
var move_spd = 1.9؛
var mousex = 0؛
وار ماؤس = 0؛
var windowhalfx = window.innerwidth / 2؛
var windowhalfy = window.innerheight / 2؛
Var Snoise = نیا بہتر ونڈوز ()؛
var textureloader = نیا تین.textureloader ()؛ 

03. ماؤس کا حساب

منظر کے پوسٹ پروسیسنگ اثرات کے لئے کچھ حتمی متغیر شامل ہیں. ایک ایونٹ سننے والا شامل ہے کہ ماؤس کی تحریک کو چیک کرتا ہے. یہ منظر ماؤس کی تحریک پر ردعمل کرنے کے لئے ڈسپلے پورٹ میں منتقل کرنے جا رہا ہے. اس تقریب کو شامل کیا جاتا ہے جو تحریک کی اجازت دی جا رہی ہے.

04. پوسٹ پروسیسنگ کی ترتیبات کو تبدیل کریں

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

05. حتمی پیرامیٹرز مقرر کریں

پیرامیٹرز کے آخری اسکرین کے کنارے کے ارد گرد تاریک ویگن کے لئے ہے. ' اس میں 'اور' متحرک 'افعال کو چلانے کے لئے کہا جاتا ہے. ' متحرک 'تقریب بہت زیادہ بعد میں سبق میں پیدا کیا جائے گا، لیکن' اس میں 'فنکشن یہاں پیدا ہوتا ہے. کیمرے اور منظر 3D مواد کو دیکھنے کی اجازت دینے کے لئے قائم ہیں.

 اثر Vignette.uniforms ["آفسیٹ"]. قیمت = 1.0؛
  اثر vignette.uniformms ["اندھیرے"].value = 1.3؛
}
اس میں()؛
متحرک ()؛
فنکشن انٹیل () {
  کیمرے = نیا تین.persepeceCamera (70، ونڈو. innerwidth / window.inerheight، 1، 4000)؛
  کیمرے. Position.Z = 2750؛
  منظر = نیا تین .scene ()؛
  scene.fog = نیا تین. fogexp2 (0x11C3C4A، 0.00045)؛ 

06. روشنی میں دو

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

 Var HemispherElight = نیا تین.hemispherelight (0xe3feff، 0xe6ddc8، 0.7)؛
scene.add (hemisphereleight)؛
HemisphereLight.Position.Y = 300؛
Var Centerlight = نیا تین.spotlight (0xb7f9ff، 1)؛
scene.add (Centerlight)؛
Centerlight.position.set (2500، 300، 2000)؛
Centerlight.penumbra = 1؛
Centerlight.decay = 5؛ 

07. متحرک لائٹس

اگلے دو لائٹس شامل کیے جائیں گے. ' پوائنٹ لائٹ 'اور' پوائنٹ لائٹ 2. 'رنگ کی روشنی ہے جو منظر کے ارد گرد مخالف سمتوں میں حلقہ کرے گی تاکہ روشنی میں مسلسل تبدیل ہوجائے. سب سے پہلے ایک گلابی روشنی ہے اور دوسرا ایک سنتری روشنی ہے. عکاسی کی تصاویر کے لئے راستہ اور شکل آخری دو لائنوں میں مقرر کی جاتی ہے.

 پوائنٹ لائٹ = نیا تین. پوائنٹ لائٹ (0xE07BFF، 1.5)؛
pointight.position.z = 200؛
scene.add (پوائنٹ لائٹ)؛
Pointight2 = نیا تین. پوائنٹ لائٹ (0xFF4E00، 1.2)؛
pointight2.position.z = 200؛
scene.add (پوائنٹ لائٹ 2)؛
وار راہ = "img /"؛
var کی شکل = '.jpg'؛ 

08. چمکدار سطحوں

مائع کی سطح میں عکاس، چمکدار سطح ہوگی اور یہ ایک عکاسی کیوب بنانے کی طرف سے کیا جاتا ہے. یہ ایک 360 ڈگری اسکائی باکس کے ساتھ ایک کیوب ہے جس کے اندر اندر رکھا جاتا ہے، جس میں مائع کی سطح پر عکاس کیا جائے گا. ' یو آر ایل 'صف میں تصاویر پر مشتمل ہے، پھر مواد قائم کی گئی ہے.

09. کچھ گروپوں کو قائم

پریمی گروپ میں کچھ ذرات شامل ہوں گے جو بعد میں شامل کیے جائیں گے، جبکہ فرش گروپ میں مائع کی سطح پر مشتمل ہوگی. ایک نیا 3D اعتراض پیدا ہوتا ہے کہ اس سطح کو پکڑ لیں گے. دو مائع سطحیں ہوں گے؛ کسی کو عکاس مواد ملے گا اور دوسرا تار فریم ہوگا ' Florormaterial. '، جیسا کہ یہاں بیان کیا گیا ہے.

 MoverGroup = نیا تین.OBject3d ()؛
scene.add (movergroup)؛
وار فلور گروپ = نیا تین.OBject3d ()؛
var florormaterater = نیا تین.Meshphongmential ({
رنگین: 0xeeeeee، سائیڈ: تین.doubleside، مرکب: تین .additivendlending، wireframe: Still
})؛
فلورجیٹری = نیا تین 

10. سطحوں کو بنائیں

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

 var florormesh = نئے تین .mesh (فرشومیٹری، کیوبیم مواد)؛
var floormesh2 = نیا تین .mesh (فرشومیٹری، florormaterial)؛
florormesh2.position.y = 20؛
florormesh2.position.z = 5؛
Floorgroup.add (Flotormesh)؛
Floorgroup.add (floormesh2)؛
منظر. (فرش گروپ)؛
florormesh.rotation.x = math.pi / 1.65؛
Florormesh2.rotation.x = ریاضی = 1.65؛
Floorgroup.position.y = 180؛ 

11. فلوٹنگ ذرات شامل کریں

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

 pgeometry = نئے تین.geometry ()؛
سپرے = textureloader.load ("img / sprite.png")؛
کے لئے (i = 0؛ i & lt؛ 2000؛ i ++) {
  var vertex = نیا تین.vector3 ()؛
  عمودی .x = 4000 * ریاضی. رینڈوم () - 2000؛
  vertex.y = -200 + ریاضی. رینڈوم () * 700؛
  vertex.z = 5000 * ریاضی. رینڈوم () - 2000؛
  pgeometry.vertices.push (عمودی)؛
} 

12. نظر بنائیں

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

13. علامت (لوگو) شامل کریں

ایک علامت (لوگو) اسکرین کے مرکز میں رکھا جائے گا اور یہ ایک فلیٹ ہوائی جہاز پر شامل کیا جائے گا جو کیمرے کا سامنا کرے گا. علامت (لوگو) تھوڑا شفاف بنا دیا گیا ہے اور ایک اضافی مرکب دیا جاتا ہے تاکہ اس سے زیادہ نظر آتا ہے جب ہلکے اشیاء اس کے پیچھے گزرتے ہیں. یہ پوزیشن میں ہے اور منظر میں رکھا جاتا ہے.

 سپرے = textureloader.load ("img / logo.png")؛
جیومیٹری = نیا تین .PENEBUFFERGEMETRY (500، 640، 1)؛
مواد = نیا تین
  شفاف: سچ، دھندلاپن: 0.8، مرکب: تین .additivendlending، نقشہ: سپرائٹ، سائڈ: تین.doubleside
})؛
وار ہوائی جہاز = نیا تین. میش (جیومیٹری، مواد)؛
planne.position.set (0، 70، 1800)؛
scene.add (طیارے)؛ 

14. رینڈر ترتیبات شامل کریں

رینجر ہموار، اینٹی غیر معمولی کناروں کو قائم کیا جاتا ہے اور اب پس منظر کا رنگ مقرر کیا جاتا ہے. یہ دستاویز کے جسم میں شامل کیا جاتا ہے تاکہ منظر HTML صفحہ پر ہے. پوسٹ پروسیسنگ اثرات مختلف رینڈر اور Shader شروع کی طرف سے قائم کی طرف سے قائم ہیں.

15. پاس کرو

فلم اور گلیچ پاس شامل ہونے کے بعد، ایک اثر موسیقار پیدا کیا جاتا ہے جس میں ایک دوسرے کے ساتھ مل کر تمام منظور ہوتا ہے. یہ ایک میں سے ایک کو موسیقار میں شامل کیا جاتا ہے اور یہ آخر میں سامعین کے ڈسپلے کے لئے اسکرین پر پیش کیا جائے گا.

16. 'اندرونی' تقریب کو بند کریں

منظر کے ابتداء کے لئے آخری چند ترتیبات شامل ہیں. پوسٹ پروسیسنگ کے لئے پیرامیٹرز مقرر کیے جاتے ہیں، لہروں کی ترتیب کہا جاتا ہے اور جب براؤزر کو دوبارہ تبدیل کیا جاتا ہے تو ایک ایونٹ سننے والا شامل ہے. یہ نئے طول و عرض کو فٹ ہونے کے لئے ڈسپلے کو اپ ڈیٹ کرنے کے قابل بناتا ہے.

17. لہریں مقرر کریں

لہروں کو اب مائع کی سطح کے لئے پیدا کیا جاتا ہے. یہ ایکس اور Z محور پر فرش جیومیٹری کے ہر عمودی کے ذریعے منتقل کر کے اور اسے محور پر آگے بڑھانے کے ذریعے چل رہا ہے. اس مرحلے پر کے لئے ایکس اور Z محور کے لئے لوپس پیدا ہوتے ہیں.

 فنکشن سیٹ ویوز () {
  Stepcount ++؛
  movergroup.position.z = move_spd؛
  وار میں، ipos؛
  وار آفسیٹ = stepcount * move_spd / flort_depth * flor_res؛
  کے لئے (i = 0؛ i & lt؛ floor_res + 1؛ i ++) {
  کے لئے (var j = 0؛ j j lt؛ floor_res + 1؛ j ++) {
  ipos = i + آفسیٹ؛ 

18. لہریں بنائیں

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

 اگر ((i & gt؛ 30) || (j & lt؛ 12) || (j & gt؛ 48)) {
  ForligheMetry.veritices [I * (forlet_res + 1) + J] .z = yoise.noise (ipos / flor_res * noisescale، j / flor_res * noisescale، noiseseed) * flor_ht؛
  } اور اگر (i & gt؛ 25 & amp؛ & amp؛ i & lt؛ 30) {
  ForligheMetry.veritices [i * (for floor_res + 1) + J] .z = yoise.noise (ipos / flor_res * noisescale، j / flor_res * noisescale، noiseseed) * (floor_ht / 1.2)؛
  } اور
  ForligheMetry.veritices [I * (for floor_res + 1) + J] .z = yoise.noise (ipos / flor_res * noisescale، j / flor_res * noisescale، noiseseed) * (for floor_ht / 2)؛
  }
  }
  }
  Forturegeometry.verticesneedupdate = سچ؛
} 

19. دوبارہ سائز اور متحرک

جب ونڈو کا سائز تبدیل ہوجاتا ہے تو، یہاں کام سننے والے سے کہا جاتا ہے کہ مرحلہ 16 میں قائم کیا گیا تھا. متحرک فنکشن صرف 60fps پر خود کو سیٹ کرتا ہے، ڈسپلے کو اپ ڈیٹ کرنے کے لئے رینڈر تقریب کو بلا رہا ہے.

 فنکشن OnWindowResize () {
  کیمرے. compect = window.innerwidth / winder.innerheheight؛
  کیمرے. updateprotionmantmatrix ()؛
  renderer.setsize (ونڈو. innerwidth، window.innerheight)؛
  composer.setsize (ونڈو. innerwidth، window.innerheight)؛
}
فنکشن متحرک () {
  درخواست ناممکن فریم (متحرک)؛
  رینڈر ()؛
} 

20. کارروائی کے ہر فریم کو مقرر کریں

رینڈر تقریب ہر فریم کہا جاتا ہے. نقطہ روشنی منظر میں ارد گرد مدار کے لئے مقرر کیا جاتا ہے اور کیمرے ماؤس کی تحریک کے مطابق پوزیشن میں رکھا جاتا ہے، تھوڑا سا آسان ہے تاکہ یہ آہستہ آہستہ جگہ پر چلیں. کیمرے ہمیشہ منظر کے مرکز کو دیکھنے کے لئے مقرر کیا جاتا ہے.

فنکشن رینڈر () {
  وار ٹائمر = -0.0002 * تاریخ. ()؛
  Pointight.position.x = 2400 * ریاضی. cos (ٹائمر)؛
  pointight.position.z = 2400 * ریاضی (ٹائمر)؛
  Pointight2.position.x = 1800 * ریاضی. cos (-timer * 1.5)؛
  pointight2.position.z = 1800 * ریاضی (-timer * 1.5)؛
  کیمرے. position.x + = (mousex - کیمرے. position.x) * .05؛
  کیمرے. Position.Y + = (-mouesy - کیمرے. position.y) * .05؛
کیمرے .logat (scene.position)؛ 

21. منظر رینڈر

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

یہ مضمون اصل میں تخلیقی ویب ڈیزائن میگزین میں شائع کیا گیا تھا ویب ڈیزائنر . یہاں ویب ڈیزائنر کو سبسکرائب کریں .

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

• تین.js کا استعمال کرتے ہوئے ویب جی ایل کے ساتھ شروع کرو
• بہتر علامات پیدا کرنے کے لئے 11 اقدامات
• 18 ویب ڈیزائن یو ٹیوب چینلز آپ کو دیکھنے کی ضرورت ہے