متوقع حقیقت اب تک تھوڑی دیر تک ہے، لیکن WeBrTC (ریئل ٹائم مواصلات) کی حمایت کے ساتھ، صارفین کو لوڈ، اتارنا Android اور ڈیسک ٹاپ کے آلات پر فون کے کیمرے تک رسائی حاصل کرنے کے لئے ممکن ہے.
اس وقت، iOS اس کی حمایت نہیں کر سکتے ہیں کیونکہ یہ ویب کٹ براؤزر میں لاگو نہیں کیا گیا ہے جو صفاری اختیار کرتا ہے، لیکن یہ ترقی میں ہے اور آپ کی حیثیت کو چیک کر سکتے ہیں
یہاں
. اگر آپ کے پاس iOS آلہ ہے تو، آپ کو باہر جانے کی ضرورت نہیں ہے، کیونکہ آپ اب بھی اپنے ڈیسک ٹاپ کمپیوٹر پر ویب کیم استعمال کرسکتے ہیں.
نوٹ:
موبائل کروم براؤزر پر یہ کام کرنے کے لۓ، مواد کو ایک محفوظ ساکٹ پرت (یعنی معیاری HTTP کے مقابلے میں HTTPS سے زیادہ HTTPS) کی طرف سے کام کرنا ضروری ہے. ڈیسک ٹاپ فی الحال باقاعدگی سے HTTP کے ساتھ کام کرتا ہے.
اس سبق کے لئے آپ کی ضرورت فائلوں کو ڈاؤن لوڈ کرنے کے لئے، جانا
فائلیلو
سبق کے آگے مفت سامان اور مفت مواد منتخب کریں.
اس ٹیوٹوریل میں میں آپ کو دکھانے کے لئے جا رہا ہوں کہ کس طرح ایک فون کیمرے کے سامنے بڑھتی ہوئی حقیقت کے مارکر کو برقرار رکھنے کے لۓ. یہ براؤزر کی طرف سے اٹھایا جائے گا
ar.js.
، اور مواد 3D میں سب سے اوپر پر نقشہ لگایا جائے گا، آر مار مارکر کو چپکے.
اس ٹیکنالوجی کے لئے بہت سے ممکنہ استعمال ہیں. مثال کے طور پر، آپ شاید ایک سادہ 3D بنانا چاہتے ہیں
تخلیقی دوبارہ شروع
، اور پھر آر مارکر آپ کے کاروباری کارڈ پر پرنٹ کیا جا سکتا ہے. کیونکہ آپ مارکر کے ارد گرد چل سکتے ہیں، یہ آپ کے لئے بہت اچھا ہے کہ آپ شاید مختلف زاویہ سے دیکھنا چاہتے ہیں - ایک مخصوص سویڈن فرنیچر کارخانہ دار کے بارے میں سوچتے ہیں کہ آپ کسی بھی زاویہ سے دیکھا جا سکتا ہے. بہت سے امکانات ہیں کہ یہ مفید ہوسکتا ہے.
01. لائبریریوں کو شامل کریں
اپنے پراجیکٹ لائبریریوں سے منسلک کرکے شروع کریں
ایک بار جب آپ نے
ٹیوٹوریل فائلوں کو ڈاؤن لوڈ
پروجیکٹ فولڈر پر جائیں، اپنے کوڈ ایڈیٹر میں شروع فولڈر کھولیں اور پھر کھولیں
index.html.
ترمیم کے لئے فائل. اس مرحلے پر لائبریریوں کو منسلک کرنے کی ضرورت ہے - اور اس منصوبے کے لئے کافی کچھ ہیں! لائبریریوں تین حصوں میں ہیں: تین. js، jsartolkit، اور Artoolkit اور مارکر کے لئے تین.js توسیع.
میں
ہیڈ
صفحے کا حصہ، کچھ شامل کریں
سکرپٹ
ٹیگز اور سٹائل کے قوانین میں ڈراپ
جسم
اور
کینوس
عنصر. یہ یقینی بناتا ہے کہ وہ براؤزر کی طرف سے شامل کردہ ڈیفالٹ مارجن کے بغیر صفحے پر صحیح طریقے سے رکھے جاتے ہیں.
جسم {
مارجن: 0px؛
چھپا ہوا رساو؛
}
کینوس {
پوزیشن: مطلق؛
اوپر: 0؛
بائیں: 0؛
}
03. عالمی متغیرات شامل کریں
میں
جسم
صفحے کا حصہ، کچھ شامل کریں
سکرپٹ
ٹیگز جہاں اس سبق کے لئے باقی جاوا اسکرپٹ کوڈ جائیں گے. کئی متغیرات کی ضرورت ہوتی ہے: پہلی لائن تین کے لئے ہے. js، ar.js کے لئے دوسرا، ماڈل کے لئے تیسری اور اس کے بعد ماڈل کو لوڈ کرنے کے لئے ایک متغیر.
Var Renderer، منظر، کیمرے؛
Var Artoolkitcontext، OnRenderfcts، Artoolkitsource، MarkerRoot، Artoolkitarker، LastTimemsec؛
وار ماڈل، ٹیوب 1، ٹیوب 2، مڈ، تفصیلات، پلس؛
var لوڈر = نیا تین.colladaloader ()؛
04. ماڈل لوڈ کریں
اس منظر کو قائم کرنے سے پہلے ماڈل کو لوڈ کیا جائے گا تاکہ مارکر کا پتہ چلا جب اسے ظاہر کیا جاسکتا ہے. یہ 10 کی طرف سے کم از کم AR مارکر پر فٹ ہونے کے لئے. یہ ماڈل چوڑائی اور اونچائی کے لئے 10CM ہے، لہذا مارکر 1cm ہے جس میں تینوں میں اضافہ ہوتا ہے.
ابھی تک کالاڈا لوڈنگ کوڈ کے اندر، ایک بار جب ماڈل بھری ہوئی ہے تو وہاں ایک جوڑے کی ٹیوبیں ہوں گے جو اس کے ارد گرد گھومتے ہیں تاکہ وہ کولاڈا منظر میں پایا جاتا ہے. پہلی ٹیوب پایا جاتا ہے اور اس کا مواد پکڑا جاتا ہے. یہاں یہ مواد صرف ماڈل کے اندر، باہر نہیں، باہر کے لئے مقرر کیا جاتا ہے.
tube1 = model.getobjectbyName ("tube1"، سچ)؛
var ایک = tube1.children . مواد؛
A.Transparent = سچ؛
a.side = تین ["پیچھے"]؛
a.blending = تین ["additivendlendling"]؛
A.opacity = 0.9؛
06. درست کریں
اگر شفافیت اور اضافی مرکب فعال نہیں ہے تو، ماڈل اس طرح کی طرح لگ رہا ہے اور آر مارکر کے سب سے اوپر پر لوڈ کیا جاتا ہے - بہت دلچسپ اور بمشکل نظر نہیں آتا!
جیسا کہ آخری مرحلے میں، یہ اصول دوسری ٹیوب اور مرکب موڈ کے لئے بار بار کیا جاتا ہے، اثرات اور فوٹوشاپ کے بعد مل گیا ان لوگوں کے ساتھ، ایک اضافی مرکب بننے کے لئے مقرر کیا جاتا ہے. یہ پکسلز کے باہر کیمرے کی تصویر میں ایک باہمی منتقلی کے لۓ قابل بناتا ہے.
tube2 = model.getobjectbyName ("tube2"، سچ)؛
c = tube2.چینجرز . مواد؛
c.transparent = سچ؛
C.Side = تین ["پس منظر"]؛
c.blending = تین ["additivendlendling"]؛
c.opacity = 0.9؛
07. فائنل فکس
آخری ماڈل صرف ڈیزائن کے وسط میں ایک کتائی دائرہ ہے. اس سے پہلے اسی قواعد پر عمل ہوتا ہے لیکن اعتراض کے پیچھے، صرف سامنے نہیں ہے. ان میں سے ہر ایک کی دھندلاپن صرف اس کو تھوڑا سا بنانے کے لئے 90٪ تک مقرر کیا گیا ہے. ایک بار جب ماڈل لوڈ ہو جاتا ہے تو انٹری فنکشن کہا جاتا ہے.
MID = model.getobjectbyName ("مڈ"، سچ)؛
B = MID.Children .مقابلہ؛
B.Transransparent = سچ؛
B.BLIGING = تین ["اضافی طور پر"]؛
B.opacity = 0.9؛
اس میں()؛
})؛
08. منظر شروع کریں
اندرونی فنکشن قائم کی جاتی ہے اور یہاں اندر اندر رینجر کی ترتیبات پیدا کی جاتی ہیں. رینجرر ویب جی ایل کا استعمال کر رہا ہے تاکہ سب سے تیزی سے مواد کو تیز رفتار فراہم کرے، اور پس منظر الفا قیمت شفافیت کو مقرر کیا جاسکتا ہے تاکہ اس کے پیچھے کیمرے کی تصویر دیکھی جاسکتی ہے.
رینجرر براؤزر ونڈو کے طور پر ایک ہی سائز بننے اور صفحے کے دستاویز اعتراض ماڈل میں شامل کیا جاتا ہے. اب ایک خالی صف پیدا کی جاتی ہے جو اشیاء کو ذخیرہ کرے گی جو انہیں لازمی ہے. ایک نیا منظر پیدا ہوتا ہے تاکہ اس مواد کو اس کے اندر دکھایا جا سکے.
onrenderfcts = []؛
منظر = نیا تین .scene ()؛
10. روشنی اپ
منظر میں مواد کو دیکھنے کے قابل ہو، صرف حقیقی دنیا کی طرح، روشنی کی ضرورت ہے. ایک ایک وسیع سرمئی روشنی ہے جبکہ سمتلی روشنی ایک خاموش نیلے رنگ ہے جس میں منظر میں ڈسپلے پر 3D مواد کو تھوڑا سا ٹنٹ دینا ہے.
کچھ مختلف ٹنٹ دینے کے لئے روشنی کے رنگ کے ساتھ استعمال
var محیط = نئے تین .مقابلہ (0x666666)؛
منظر. (محیط)؛
Var Diveetallight = نیا تین. Directionalight (0x4e5BA0)؛
DiveryAllight.position.Set.Set (-1، 1، 1) .مقابل ()؛
scene.add (DivaliveSallight)؛
