مواد
- شروع ہوا چاہتا ہے
- ٹرنٹیبل کی بنیاد تشکیل دینا
- پیر بنانا
- بازو اور سر
- رنگ اور بناوٹ
- رینڈرنگ اور ایکسپورٹ
- علامت (لوگو) مکمل کرنا
- لوگو کو متحرک کریں
ویب پر 3 ڈی حرکت پذیری تخلیق کرنے کے بہت سارے طریقے ہیں ، ان میں سے بیشتر کو جاوا اسکرپٹ اور ویب جی ایل کی اچھی معلومات درکار ہوتی ہے ، یا فلیش جیسے پلگ ان کا استعمال ہوتا ہے۔ سی ایس ایس 3 ڈی تبدیلیوں کی بدولت ، صرف ایچ ٹی ایم ایل اور سی ایس ایس کا استعمال کرتے ہوئے 3D بنانا ممکن ہے ، لیکن ایسا کرنا آسان نہیں ہے۔ ٹریڈیو ، میری مفت آن لائن ایپ ، اس عمل کو آسان بناتا ہے ، جس میں ایک سادہ اور بدیہی WYSIWYG انٹرفیس پیش کیا گیا ہے جو صارفین کو کوڈ کی ایک لکیر کو لکھے بغیر 3D اشیاء تخلیق کرنے کے قابل بناتا ہے۔
اس ٹیوٹوریل میں ، ہم صرف HTML اور CSS کا استعمال کرتے ہوئے ، ایک خیالی ریکارڈ لیبل ، ’’ Tridiv ریکارڈز ‘‘ کے لئے ایک لوگو تیار اور متحرک کرنے جارہے ہیں۔ لوگو کے لئے مرکزی تصویری ٹریڈیو کا استعمال کرتے ہوئے 3D میں تخلیق کیا جارہا ہے۔ پھر ہم باقاعدگی سے ایچ ٹی ایم ایل اور سی ایس ایس کا استعمال کرتے ہوئے ٹائپوگرافک عناصر شامل کریں گے۔
آپ حتمی حرکت پذیری اور کوڈ دیکھ سکتے ہیں جو اسے یہاں پیدا کرتا ہے۔
شروع ہوا چاہتا ہے
ہم ٹرائڈیو کا استعمال کرتے ہوئے 3D میں ٹرنٹیبل تیار کرکے شروع کرنے جارہے ہیں۔ tridiv.com پر جائیں اور ایپ کو لانچ کریں۔ آپ کو یا تو کروم ، سفاری ، یا اوپیرا 15 (یا بعد میں) استعمال کرنا ہوگا۔
شروع کرنے سے پہلے ، تردیو انٹرفیس کو سمجھنا ضروری ہے۔ ایڈیٹر کا مرکزی حصہ چار خیالات پر مشتمل ہے: اوپر بائیں طرف 3D نظارہ ہے ، جو منظر کا مکمل نظارہ پیش کرتا ہے۔ دیگر تین خیالات اسے اوپر ، سائیڈ اور سامنے سے دکھاتے ہیں۔ ان تینوں ملاحظات کا استعمال کرتے ہوئے ، آپ 3D شکلیں تخلیق ، تدوین اور منتقل کرسکتے ہیں۔
افقی ٹول بار کو دو حصوں میں تقسیم کیا گیا ہے: بائیں حصہ آپ کی دستاویز سے متعلق معلومات دکھاتا ہے۔ دائیں حصہ میں شکلیں بنانے اور ترمیم کرنے کے اوزار شامل ہیں۔ اقدام انتخاب اور ترمیم انتخاب کے بٹن مختلف ترمیم کے طریقوں کے درمیان سوئچ کرتے ہیں۔
پراپرٹیز پین (سائڈبار) دستاویزات کی ترتیبات کو دکھاتا ہے جیسے گرڈ میں زوم اور اسنیپ اور منتخب کردہ شکل کی خصوصیات (سائز ، مقام ، گردش ، رنگ اور اسی طرح)۔ طول و عرض اور پوزیشن کے لئے استعمال ہونے والا یونٹ ئیمایس ہے۔ گردش زاویہ ڈگری میں ہیں۔
سبق کے بعد میں کسی قسم کی الجھن سے بچنے کے ل we ، ہم مندرجہ ذیل شارٹ ہینڈ کا استعمال کریں گے۔
ڈبلیو = چوڑائی h = اونچائی d = گہرائی سے متعلق diam = قطر x ڈگ = گھریلو x محور میں y = محور میں گردش
ٹرنٹیبل کی بنیاد تشکیل دینا
زوم ویلیو کو 200 پر سیٹ کرکے شروع کریں۔ شکلیں اپنی طرف متوجہ کرنے میں مدد کرنے کے لئے ، اس میں تصویر کو گرڈ سیٹنگ میں چالو کریں دستاویز کی ترتیبات سائڈبار کا سیکشن. اسنیپ ویلیو کو سیٹ کریں 0.125.
ٹرنٹیبل کی بنیاد ایک سادہ کیوبائڈ پر مشتمل ہے ، لہذا پر کلک کریں کیوبائڈ شامل کریں ٹاپ ٹول بار میں بٹن۔ آپ کو ایڈیٹر میں چاروں خیالات میں کیوبائڈ دکھائی دینا چاہئے۔
شکل کا نام تبدیل کریں بنیاد پراپرٹی پین کے نام فیلڈ کا استعمال (کے تحت) پراپرٹیز کی شکل دیں). شکل کا نام ایک درست سی ایس ایس کلاس کا نام ہونا چاہئے کیونکہ یہ ایڈیٹر کے ذریعہ تیار کردہ کوڈ میں استعمال ہوگا۔ علامت (لوگو) کو متحرک کرتے وقت ہم ان کلاس کے ناموں کا استعمال بعد میں کریں گے ، لہذا یہ یقینی بنائیں کہ آپ نے جس نئی شکل کو تیار کیا ہے اس کا نام لیں۔
ایک بار جب کیوبائڈ کا نام لیا گیا تو یہ یقینی بنائیں کہ اسے اوپر کے نظارے میں منتخب کیا گیا ہے (اسے نیلے رنگ میں اجاگر کیا جانا چاہئے ، اس کے آس پاس کے اوزاروں کی سرکلر انگوٹھی ہوگی) ، پھر کلک کریں ترمیم ترمیم کے ہینڈلز کو دکھانے کے لئے رنگ کے اوپری حصے کا بٹن۔ چوڑائی اور گہرائی تک پہنچنے تک ، کنٹرول ہینڈلز کو کیوبائڈ کے اطراف میں گھسیٹیں ڈبلیو = 10 اور d = 8 میں پراپرٹیز کی شکل دیں.
سائڈ ویو کے اندر کی شکل پر کلک کریں۔ یہ اس منظر میں ترمیم کرنے والے ہینڈلز کو دکھائے گا ، جس سے ہمیں اس کی قد کو تبدیل کرنے کی اجازت ہوگی۔ اونچائی کو ایڈجسٹ کریں یہاں تک کہ یہ پہنچ جائے h = 2. آپ پراپرٹی پین میں بھی اقدار کو براہ راست ٹائپ کرسکتے ہیں۔ کیوبائڈ کے کونے کونے کو دور کرنے کے لئے ، پراپرٹی پین میں کونے کونے کی اقدار کو تبدیل کریں 1.75، پھر دبائیں [درج کریں] تبدیلیوں کو لاگو کرنے کے لئے کلید. آپ کے پاس ایسا کچھ ہوگا۔
پیر بنانا
ٹرنبل کے پاؤں کے لئے ، ہم سلنڈر استعمال کرنے جارہے ہیں۔ ایک سلنڈر شامل کریں ، پھر اس کا قطر تبدیل کریں ڈائم = 1.75 اور اس کی اونچائی h = 0.5. پر کلک کریں اقدام شکل پر ڈریگ ایبل ایریا کو دکھانے کے لئے ٹول ٹول بار میں سلیکشن بٹن۔ سلنڈر کو کسی کونے میں رکھ کر اڈے کے نیچے منتقل کریں۔ (آپ کو اسے اوپر ، پہلو اور سامنے والے نظاروں میں منتقل کرنے کی ضرورت پڑسکتی ہے۔)
سلنڈر کی نقل تیار کریں (دبائیں ڈپلیکیٹ اوزار کے سرکلر رنگ میں بٹن ، یا دبائیں ڈی کلید) اور نئے سلنڈر کو اڈے کے دوسرے کونے میں منتقل کرنا۔ اس عمل کو دہرائیں جب تک کہ چاروں پاؤں صحیح طرح سے پوزیشن میں نہ ہوں۔ سلنڈر کا نام لینا نہ بھولیں (مثال کے طور پر ، پاؤں سے بائیں, فٹ - دائیں سب سے اوپر, پاؤں - بائیں نیچے, پاؤں سے بائیں). جب آپ یہ کر چکے ہیں تو ، نتیجہ اس طرح نظر آنا چاہئے۔
اب ہم تالی ، ڈسک ، بازو کے محور اور بٹن بنانے پر غور کریں گے۔ اگلی شکلیں بنانے کا عمل پیروں کے برابر ہے۔ مختلف سلنڈروں کے لئے استعمال ہونے والے طول و عرض یہ ہیں:
تالی: diam = 7؛ h = 0،5 ڈسک: ڈائم = 6.75؛ h = 0،25 بٹن: ڈائم = 1.5؛ h = 0،25 بازو-محور کی بنیاد: ڈائام = 2.25؛ h = 0،25 بازو محور: ڈائم = 1.375؛ h = 1
سلنڈروں کے اطراف کو بہتر بنانے کے لئے ، آپ پراپرٹی پین میں سائیڈ فیلڈ کا استعمال کرتے ہوئے ، ہر ایک میں چہروں کی تعداد بڑھا سکتے ہیں۔ بہت سارے پہلوؤں کو شامل نہ کریں کیونکہ اس سے ایڈیٹر کی عالمی کارکردگی اور آخری حرکت پذیری پر منفی اثر پڑ سکتا ہے۔ اس معاملے میں ، میں آپ کو مشورہ دوں گا کہ تالی اور ڈسک کیلئے 32 سے زیادہ اطراف نہ استعمال کریں۔ آپ کو کچھ ایسا ہونا چاہئے۔
بازو اور سر
ٹرنبل کے بازو اور سر کے لئے ، ہم کیوبائڈز استعمال کرنے جارہے ہیں۔ بازو کے لئے ، ایک کیوبائڈ بنائیں (w = 0.25؛ h = 0.25؛ d = 4) ، پھر کی گردش کا اطلاق کریں -33° پر y محور. سر کے لئے ، ایک کیوبائڈ بنائیں (w = 0.5؛ h = 0.5؛ d = 1) ، پھر کی گردش کا اطلاق کریں -33° پر y محور. دونوں شکلوں کو بازو محور سلنڈر کے ساتھ سیدھ کریں۔ نتیجہ اس طرح نظر آنا چاہئے۔
رنگ اور بناوٹ
ہم تقریبا ٹرنٹیبل کے ساتھ مکمل کر چکے ہیں۔ حتمی مرحلہ رنگوں کو تفویض کرنا اور وینائل (ایک تصویر جو ریکارڈ کی سطح کی نمائندگی کرتا ہے) پر رنگ لگانا ہے۔ رنگ تفویض کرنے کے لئے ، شکل منتخب کریں اور پر کلک کریں رنگ پراپرٹیز پین میں فیلڈ۔ تردیف آپ کو شکل کے ہر چہرے کے لئے انفرادی رنگوں کی وضاحت کرنے کی اجازت دیتا ہے ، لیکن ، اس مثال میں ، ہمیں تمام چہروں کا استعمال تمام چہروں کا رنگ تبدیل کرنے کی ضرورت ہے۔ ایسا کرنے کے لئے ، فیلڈ میں صرف ایک ہیکس رنگین کوڈ درج کریں ، پھر دبانے کی تصدیق کریں داخل کریں.
اس مثال میں استعمال ہونے والے رنگ یہاں ہیں:
بنیاد: # 0099FF پاؤں ، بٹن ، محور ، بازو اور سر: # F2EEE5 ڈسک: # fa7f7a
Vinyl کی ساخت کے لئے ، عمل رنگ تفویض کرنے جیسا ہی ہے۔ ڈسک سلنڈر منتخب کریں ، پھر پر کلک کریں تصاویر پراپرٹیز پین میں فیلڈ۔ جس تصویر کا URL آپ اعلی فیلڈ میں وینائل پر لگانا چاہتے ہیں اس کا URL پیسٹ کریں اور دبانے کی تصدیق کریں داخل کریں. آپ اپنی ایک شبیہہ استعمال کرسکتے ہیں ، یا اس مثال میں استعمال شدہ تصویر ڈاؤن لوڈ کرسکتے ہیں۔
آپ کے پاس اب کچھ ایسا ہونا چاہئے جو اس طرح نظر آتا ہے۔
رینڈرنگ اور ایکسپورٹ
اب چونکہ ٹرنبل قابل ہوچکا ہے ، ہم اسے برآمد کرنے سے پہلے جس راستے میں پیش کیا گیا ہے اس پر کام کرنے جارہے ہیں۔ پر کلک کریں پیش نظارہ پراپرٹیز پین کے اوپری حصے پر بٹن۔ زوم ویلیو کو سیٹ کریں 200 ترنٹیبل بڑا ظاہر کرنے کے لئے۔ شکلوں کی کالی سرحدوں کو دور کرنے کے لئے ، پر جائیں سرحدوں پین کا حصہ اور دھندلاپن کو سیٹ کریں 0. نتیجہ کچھ اس طرح نظر آنا چاہئے۔
ہم چاہتے ہیں کہ ٹرنبل کو اوپر سے روشن کیا جائے۔ ایسا کرنے کے لئے ، منظر کو اس طرح گھمائیں کہ ٹرنبل کے اوپر کی طرف آپ کا سامنا ہو۔ بنیاد بالکل آئتاکار نظر آنی چاہئے۔ پراپرٹی پین کے tridiv.com/d/4k6 سیکشن میں ہلکی اور تاریک اقدار کو تبدیل کرنے سے منظر کے اندر سائے دوبارہ پیدا ہوجائیں گے۔ روشنی کی قیمت کو تبدیل کریں 0.
ٹرن ٹیبل اب برآمد کرنے کے لئے تیار ہے!
علامت (لوگو) مکمل کرنا
ہم لوگو میں متن شامل کرنے اور لوگو حرکت پذیری بنانے کے لئے تیار ہیں۔ پر کلک کریں ترمیم کے نیچے بائیں طرف کوڈ پین کے بٹن پر پیش نظارہ کوڈ کوڈ کو برآمد کرنے کے لئے دیکھیں۔ یہ نوٹ کرنا ضروری ہے کہ ٹریڈیو کے ذریعہ تیار کردہ سی ایس ایس کوڈ وینڈر پریفیکس کا استعمال نہیں کرتا ہے ، لہذا آپ کو ہر براؤزر میں فعال بنانے کے ل pre پریفیکس ڈاٹ کام یا لیورور.github.io/prefixfree جیسے اوزار استعمال کرنے کی ضرورت ہوگی۔ جاوا اسکرپٹ پین کو بند کرکے شروع کریں ، کیوں کہ ہم اسے استعمال نہیں کررہے ہیں۔ HTML پین میں ، اس پر لاگو اسٹائل ٹیگ کو ہٹا دیں .سینی تقسیم
سی ایس ایس پین کو وسعت دیں اور آخر میں درج ذیل کوڈ شامل کریں:
.scene {transform: translateY (-140px) rotateX (-55deg)؛ }
یہاں ، ٹرانسلیٹ Y (-140px)) ٹرنبل ایبل 140px کو اوپر کی طرف لے جاتا ہے ، اس کے نیچے متن کے لئے جگہ چھوڑتا ہے۔ پھر گھماؤ ایکس (-55 ڈگ) ٹرنبل کے عمودی جھکاؤ کا تعین کرتا ہے۔
متن شامل کرنے کے ل you ، آپ کو ایک شامل کرنے کی ضرورت ہے .title دائیں کھولنے کے بعد دائیں # تردیو HTML پین میں ڈیو. اندر ، دو شامل کریں spans> (.main-title اور .sub-عنوان) ، کے ذریعہ الگ کیا گیا hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> ریکارڈ / مدت </ div>…
اس کے بعد آپ کو درست فونٹ اور اسٹائل لگانے کی ضرورت ہے۔ سی ایس ایس پین میں ، لوگو میں استعمال شدہ اوپن سانس فونٹ کو درآمد کریں ، اور متن عناصر کے ل for بنیادی اسٹائل شامل کریں۔
@ امپورٹ یو آر ایل (http://fouts.googleapis.com/css؟family=Open+Sans:300)؛ / * ٹیکسٹ بلاک سینٹرنگ + بنیادی فونٹ شیلیوں * / عنوان {پوزیشن: مطلق؛ سب سے اوپر: 50٪؛ بائیں: 50٪؛ مارجن: 0 0 0 -165px؛ چوڑائی: 330px؛ اونچائی: 5 ایم؛ فونٹ فیملی: ’اوپن سینز‘ ، سنس سیرف؛ فونٹ وزن: 300؛ فونٹ سائز: 24px؛ متن کی سیدھ: مرکز؛ خط وقفہ: 1.5 ملی میٹر؛ رنگ: # 0099FF؛ h عنوان گھنٹہ {بارڈر: 1px ٹھوس # fa7f7a؛ مارجن: .75 ایم 0؛ sp عنوان مدت {ڈسپلے: بلاک؛ main .مومن ٹائٹل {فونٹ سائز: 2.15 ایم؛ s .Sub-title {text-indent: .25m؛ }
Voilà! آپ کا لوگو مکمل ہو گیا ہے۔ اسے نیچے کی طرح کچھ نظر آنا چاہئے۔ ایک بار جب آپ کا 3D ماڈل مکمل ہوجاتا ہے ، تو آپ اس میں اسٹائل ، متحرک تصاویر یا ماؤس کے واقعات شامل کرکے اور بھی بہتر بنانے کیلئے سی ایس ایس کی طاقت کا استعمال کرسکتے ہیں: 3D ماڈل کو کسی دوسرے HTML عنصر کی طرح ہی سلوک کریں۔
لوگو کو متحرک کریں
لوگو کا استعمال کرتے ہوئے ایک حرکت پذیری دیکھیں۔ چونکہ ٹرنبل ایبل ’فال‘ کے حصے میں ، ان میں سے ہر ایک مختلف keyframe حرکت پذیری کو مختلف تاخیر کے ساتھ بانٹتا ہے۔ شکلوں میں سب سے اوپر کا وصف مرتب ہوتا ہے 50%. گرتے ہوئے اثر کو پیدا کرنے کے ل we ، ہم اس سے اوپر کی خصوصیت کو متحرک کرتے ہیں -400px کرنے کے لئے 50%:
@ کیفرامز گر {0٪ {سب سے اوپر: -400px؛ } / * ہم حرکت پذیری کی شکل 400px height * / 100٪ {اونچائی تک شکل کو پوزیشن میں لینا شروع کرتے ہیں: 50٪؛ } / * پھر ہم اسے اس کی اصل حیثیت پر ختم کرتے ہیں * /}
آپ اس حرکت پذیری کو تمام شکلوں میں شامل کرسکتے ہیں ، جیسا کہ:
.شپ {ٹاپ: -400px؛ حرکت پذیری: 1s آسانی سے 0s آگے؛ }
سب سے اوپر کی خصوصیت کو مرتب کریں -400px اور تاخیر شامل کریں:
. پلٹر {حرکت پذیری تاخیر: 1.05s؛ d .ڈسک {حرکت پذیری - تاخیر: 1.35s؛ b بٹن {حرکت پذیری میں تاخیر: 1.5s؛ } ...
استعمال کرکے حتمی ’باؤنس‘ اثر پیدا کریں گھماؤ وصف:
90٪ {ٹرانسفارم: ٹرانسلیٹ وائی (-5 ایم ایم) روٹیٹ ایکس (780 ڈےگ) روٹیٹ وائی (0 ڈےگ)؛ } 95٪؛ ٹرانسفارم: ٹرانسلیٹ وائی (-4 ایم) روٹیٹ ایکس (620 ڈگ) روٹیٹ وائی (0 ڈگ)؛ } 100٪؛ ٹرانسفارم: ٹرانسلیٹ وائی (-4.5 ملی میٹر) روٹیٹ ایکس (660 ڈےگ) روٹیٹ وائی (0deg)؛ }
اس طرح ہم نے یہ مخصوص ورژن تخلیق کیا ، لیکن یاد رکھیں: اس کی کوئی حد نہیں ہے!
الفاظ: جولین گارنیئر
یہ مضمون اصل میں نیٹ میگزین کے شمارے 248 میں شائع ہوا ہے۔
