अपनी वेबसाइट पर Needle Engine

Needle Engine का उपयोग नए वेब ऐप्स बनाने के लिए किया जा सकता है, और इसे मौजूदा वेबसाइटों में भी इंटीग्रेट किया जा सकता है। दोनों ही मामलों में, आप दुनिया भर में एक्सेसिबल बनाने के लिए अपने प्रोजेक्ट के डिस्ट्रीब्यूशन फोल्डर को एक वेब होस्टर पर अपलोड करना चाहेंगे।

Needle Engine को अपनी वेबसाइट के साथ इंटीग्रेट करने के कई तरीके हैं। कौन सा तरीका बेहतर है यह कई कारकों पर निर्भर करता है, जैसे आपके प्रोजेक्ट की जटिलता, यदि आप कस्टम स्क्रिप्ट्स का उपयोग कर रहे हैं या केवल कोर कंपोनेंट्स, लक्ष्य वेबसाइट पर आपका कितना नियंत्रण है, आपके और लक्ष्य वेबसाइट के बीच "विश्वास का स्तर" क्या है, इत्यादि।

इसे आज़माएं

यदि आप जल्दी से यह आज़माना चाहते हैं कि Needle से बने प्रोजेक्ट आपकी वेबसाइट पर कैसे दिखेंगे, तो परीक्षण के लिए अपनी पेज पर कहीं भी ये दो लाइनें जोड़ें:

:::: code-group ::: code-group-item Option 1: Embedding Needle

<script type="module" src="https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.min.js"></script>
<needle-engine src="https://cloud.needle.tools/api/v1/public/873a48a/10801b111/MusicalInstrument.glb"></needle-engine>

::: ::: code-group-item Option 2: Using an iframe

<iframe src="https://engine.needle.tools/samples-uploads/musical-instrument/"
    allow="xr; xr-spatial-tracking; fullscreen;" width="100%" height="500px">
</iframe>

::: ::: code-group-item Resulting Website

::::

Needle के साथ वेब ऐप्स बनाने के तरीके

Needle Engine को अपनी वेबसाइट पर लाने के सबसे सामान्य वर्कफ़्लो ये हैं:

"Deploy to ..." कंपोनेंट्स का उपयोग करना
अपने वेब ऐप को एक फोल्डर में अपलोड करना
एक मौजूदा वेबसाइट में एक Needle प्रोजेक्ट एम्बेड करना

"Deploy to ..." कंपोनेंट्स का उपयोग करना

हमारे Needle Engine इंटीग्रेशन बिल्ट-इन डिप्लॉयमेंट विकल्पों के साथ आते हैं। आप अपने प्रोजेक्ट को Needle Cloud, FTP सर्वर, Glitch, Itch.io, GitHub Pages, और अन्य जगहों पर कुछ ही क्लिक के साथ डिप्लॉय कर सकते हैं।

इनमें से प्रत्येक विकल्प के बारे में अधिक जानकारी के लिए Deployment सेक्शन देखें।

आप जिस "Deploy to ..." कंपोनेंट का उपयोग करना चाहते हैं, उसे Unity या Blender में अपने सीन में जोड़ें।
आवश्यक विकल्प कॉन्फ़िगर करें और "Deploy" पर क्लिक करें।
बस हो गया! आपका प्रोजेक्ट अब लाइव है।

अनुशंसित वर्कफ़्लो

यह सबसे आसान विकल्प है, और अधिकांश वर्कफ़्लो के लिए अनुशंसित है – यह बहुत तेज़ है! आप अपने कंप्यूटर पर अपने प्रोजेक्ट पर इटरैक्टिव रूप से काम कर सकते हैं, और फिर कुछ ही सेकंड में वेब पर एक नया संस्करण अपलोड कर सकते हैं।

अपने वेब ऐप को एक फोल्डर में अपलोड करना

यदि आप हमारे "Deploy to..." कंपोनेंट्स का उपयोग नहीं करना चाहते हैं, या आपके विशेष वर्कफ़्लो के लिए कोई कंपोनेंट नहीं है, तो आप वही प्रक्रिया मैन्युअल रूप से कर सकते हैं। परिणामी वेब ऐप वही होगा जो आप प्रोजेक्ट पर काम करते समय अपने लोकल सर्वर में देखते हैं।

अपने वेब प्रोजेक्ट का प्रोडक्शन बिल्ड बनाएं। इससे dist/ फोल्डर बनेगा जिसमें डिस्ट्रीब्यूशन के लिए आवश्यक सभी फ़ाइलें होंगी। इसमें जावास्क्रिप्ट बंडल, HTML फ़ाइल, और टेक्सचर, ऑडियो, या वीडियो फ़ाइलों जैसे किसी भी अन्य एसेट्स सहित सभी आवश्यक फ़ाइलें शामिल हैं।
अपने वेब होस्टर पर अपने वेब प्रोजेक्ट के dist/ फोल्डर की सामग्री अपलोड करें। आप यह FTP, SFTP, या किसी अन्य फ़ाइल ट्रांसफर विधि के माध्यम से कर सकते हैं जो आपका होस्टर प्रदान करता है। विवरण के लिए अपने वेब होस्टर के दस्तावेज़ देखें।
बस हो गया! आपका वेब ऐप अब लाइव है।

फोल्डर का स्थान आपके वेब ऐप के URL को प्रभावित करता है।

आपके होस्टर की सेटिंग्स के आधार पर, फोल्डर का स्थान और नाम यह निर्धारित करता है कि आपके वेब ऐप का URL क्या है। यहाँ एक उदाहरण दिया गया है:

आपका डोमेन https://your-website.com/ आपके वेबस्पेस पर /var/www/html फोल्डर की ओर इंगित करता है।
आप अपनी फ़ाइलों को /var/www/html/my-app पर अपलोड करते हैं ताकि index.html फ़ाइल /var/www/html/my-app/index.html पर हो।
आपके वेब ऐप का URL अब https://your-website.com/my-app/ होगा।

एक मौजूदा वेबसाइट में एक Needle प्रोजेक्ट एम्बेड करना

कुछ मामलों में, आप चाहते हैं कि एक Needle Engine प्रोजेक्ट एक मौजूदा वेबसाइट का हिस्सा हो, उदाहरण के लिए एक ब्लॉग पोस्ट, एक प्रोडक्ट पेज, या एक पोर्टफोलियो के हिस्से के रूप में। प्रक्रिया बहुत समान है, लेकिन फ़ाइलों को अपने वेबस्पेस के रूट में अपलोड करने के बजाय, आप कुछ लाइनों के कोड के साथ एक मौजूदा वेबसाइट में प्रोजेक्ट को एम्बेड करते हैं।

अपने वेब प्रोजेक्ट का प्रोडक्शन बिल्ड बनाएं। इससे dist/ फोल्डर बनेगा जिसमें डिस्ट्रीब्यूशन के लिए आवश्यक सभी फ़ाइलें होंगी। इसमें जावास्क्रिप्ट बंडल, HTML फ़ाइल, और टेक्सचर, ऑडियो, या वीडियो फ़ाइलों जैसे किसी भी अन्य एसेट्स सहित सभी आवश्यक फ़ाइलें शामिल हैं।
अपने वेब प्रोजेक्ट के dist/ फोल्डर को अपने वेब होस्टर पर अपलोड करें।
फोल्डर कहीं भी होस्ट किया जा सकता है!
यदि आपके पास अपने वेब होस्टर के फ़ाइल सिस्टम तक पहुंच नहीं है, या फ़ाइलें अपलोड करने का कोई तरीका नहीं है, तो आप फोल्डर को किसी अन्य वेबस्पेस पर अपलोड कर सकते हैं और अगले चरण में उसकी पब्लिक URL का उपयोग कर सकते हैं।
अपने dist फोल्डर के अंदर, आपको एक index.html फ़ाइल मिलेगी। हम इस फोल्डर से कुछ लाइनें कॉपी करना चाहते हैं, इसलिए फ़ाइल को टेक्स्ट एडिटर में खोलें। आमतौर पर, यह इस तरह दिखता है:
```
<head>
    ...
    <script type="module" crossorigin src="./assets/index-732f0764.js"></script>
    ...
</head>
<body>
    <needle-engine src="assets/scene.glb"></needle-engine>
</body>
```
यहाँ दो महत्वपूर्ण लाइनें हैं:
- <script> के अंदर जावास्क्रिप्ट बंडल,
- <needle-engine> HTML टैग।
लक्ष्य वेबसाइट पर, <script...> और <needle-engine...> टैग्स भी जोड़ें। सुनिश्चित करें कि पथ उस स्थान की ओर इंगित करते हैं जहाँ आपने फ़ाइलें अपलोड की हैं।
```
<script type="module" src="/your-upload-folder/assets/index-732f0764.js"></script>
<needle-engine src="/your-upload-folder/assets/scene.glb"></needle-engine>
```
बस हो गया! सीन अब आपकी वेबसाइट पर प्रदर्शित होना चाहिए।

एक Needle प्रोजेक्ट को आईफ्रेम के रूप में एम्बेड करना

जब आपके पास वेबसाइट तक सीमित पहुंच होती है, उदाहरण के लिए जब आप WordPress जैसे CMS का उपयोग कर रहे होते हैं, तो आप अपनी वेबसाइट में एक Needle Engine सीन एम्बेड करने के लिए आईफ्रेम का उपयोग कर सकते हैं। आप YouTube वीडियो या Sketchfab मॉडल एम्बेड करने के इस वर्कफ़्लो को जानते होंगे।

अपने वेब प्रोजेक्ट का प्रोडक्शन बिल्ड बनाएं। इससे dist/ फोल्डर बनेगा जिसमें डिस्ट्रीब्यूशन के लिए आवश्यक सभी फ़ाइलें होंगी।
अपने वेब प्रोजेक्ट के dist/ फोल्डर को अपने वेब होस्टर पर अपलोड करें।
फोल्डर कहीं भी होस्ट किया जा सकता है!
यदि आपके पास अपने वेब होस्टर के फ़ाइल सिस्टम तक पहुंच नहीं है, या फ़ाइलें अपलोड करने का कोई तरीका नहीं है, तो आप फोल्डर को किसी अन्य वेबस्पेस पर अपलोड कर सकते हैं और अगले चरण में उसकी पब्लिक URL का उपयोग कर सकते हैं।
अपनी वेबसाइट में एक आईफ्रेम जोड़ें, जो dist/ फोल्डर में index.html फ़ाइल की ओर इंगित करता है।
```
<iframe
    src="https://your-website.com/needle-files/dist/index.html"
    allow="xr; xr-spatial-tracking; fullscreen;">
</iframe>
```
आईफ्रेम के अंदर अनुमतियाँ
allow= के अंदर की सूची उन सुविधाओं पर निर्भर करती है जिनका आपका वेब ऐप उपयोग करता है। उदाहरण के लिए, XR एप्लिकेशन को आईफ्रेम के अंदर काम करने के लिए xr और xr-spatial-tracking की आवश्यकता होती है।
अतिरिक्त सुविधाओं की आवश्यकता हो सकती है, उदाहरण के लिए camera; microphone; display-capture; geolocation। MDN पर iframe Permissions Policy निर्देशिकाओं की पूरी सूची देखें।
बस हो गया! सीन अब आपकी वेबसाइट पर प्रदर्शित होना चाहिए।

कस्टम स्क्रिप्ट्स का उपयोग न करने वाले सीन को एम्बेड करना

जब आपका प्रोजेक्ट केवल कोर कंपोनेंट्स का उपयोग करता है और कोई कस्टम स्क्रिप्ट नहीं, तो आप सीधे CDN (कंटेंट-डिलीवरी नेटवर्क) से Needle Engine का उपयोग कर सकते हैं।

निम्नलिखित स्निपेट को अपनी वेबसाइट में जोड़ें, उदाहरण के लिए अपने CMS में "HTML Block" के रूप में:

<script type="module" src="https://cdn.jsdelivr.net/npm/@needle-tools/engine/dist/needle-engine.min.js"></script>
<needle-engine src="https://cloud.needle.tools/api/v1/public/873a48a/10801b111/MusicalInstrument.glb" background-blurriness="0.8"></needle-engine>

अपने वेब प्रोजेक्ट से assets/ फोल्डर को अपने वेब होस्टर पर अपलोड करें। आपकी प्रोजेक्ट सेटिंग्स के आधार पर, इस फोल्डर में एक या अधिक .glb फ़ाइलें और ऑडियो, वीडियो, स्काईबॉक्स और बहुत कुछ जैसी कोई भी संख्या में अन्य फ़ाइलें शामिल होती हैं।
needle-engine टैग के src= एट्रिब्यूट को उस .glb फ़ाइल के URL में बदलें जिसे आप प्रदर्शित करना चाहते हैं। आमतौर पर, यह https://your-website.com/assets/MyScene.glb जैसा कोई पथ होगा।
बस हो गया! सीन अब आपकी वेबसाइट पर प्रदर्शित होना चाहिए।

Needle Cloud वेब ऐप को आईफ्रेम के रूप में एम्बेड करना

यदि आपने अपने प्रोजेक्ट को Needle Cloud पर डिप्लॉय किया है, तो आप इसे आईफ्रेम के साथ अपनी खुद की वेबसाइट पर आसानी से प्रदर्शित कर सकते हैं।

निर्माणाधीन। यह सेक्शन अभी तक पूरा नहीं हुआ है।

सामान्य वर्कफ़्लो

एक ग्राहक की वेबसाइट के लिए वेब ऐप बनाना

समझें कि आप किस प्रकार का ऐप बना रहे हैं, और क्या और कैसे यह किसी मौजूदा वेबसाइट से जुड़ता है। अक्सर, आप एक स्टैंडअलोन ऐप बना रहे होते हैं जो ग्राहक के डोमेन पर एक लिंक से एक्सेसिबल होता है। लेकिन इसमें अन्य सर्वर-साइड और क्लाइंट-साइड कंपोनेंट्स भी शामिल हो सकते हैं।
समझें कि वेब ऐप किस URL से एक्सेसिबल होना चाहिए। यह हो सकता है
- Needle Cloud पर एक पेज collaborativesandbox-zubcks1qdkhy.needle.run
- ग्राहक की वेबसाइट पर एक सबपेजmy-page.com/app
- एक नया सबडोमेनapp.my-page.com
- एक नया या मौजूदा डोमेनmy-app.com
यहाँ कोई "अच्छा" या "बुरा" नहीं है।
प्रारंभिक प्रोटोटाइप और विकास के दौरान Needle Cloud पर शुरुआत करना और अंतिम संस्करण के लिए ग्राहक के वेबस्पेस और डोमेन पर जाना एक सामान्य दृष्टिकोण है।
चुनाव ज्यादातर ब्रांडिंग, SEO और तकनीकी सेटअप के संबंध में ग्राहक की आवश्यकताओं पर निर्भर करता है। अक्सर, आपको इस पर ग्राहक के IT विभाग या वेबमास्टर से चर्चा करनी होगी।
समझें कि वेब ऐप को कैसे डिप्लॉय और मेंटेन किया जाएगा।
- क्या आपको ग्राहक के वेब सर्वर पर एक फोल्डर तक पहुंच होगी ताकि आप नवीनतम संस्करण अपलोड कर सकें, या क्या वे डिप्लॉयमेंट को स्वयं प्रबंधित करना चाहते हैं?
  एक सरल दृष्टिकोण: FTP एक्सेस
  अक्सर, आप ग्राहक के वेब सर्वर पर एक फोल्डर तक FTP या SFTP एक्सेस मांग सकते हैं। आपको एक URL, उपयोगकर्ता नाम और पासवर्ड मिलेगा, और फिर आप अपनी फ़ाइलें उस फोल्डर पर अपलोड कर सकते हैं। हम एक "Deploy to FTP" कंपोनेंट प्रदान करते हैं जो इसे विशेष रूप से आसान बनाता है। ग्राहक का IT विभाग सेट करेगा कि फोल्डर किस URL से एक्सेसिबल है।
- क्या बहुत सारी सामग्री है जिसे नियमित रूप से अपडेट करने की आवश्यकता है, या ऐप ज्यादातर स्टैटिक है?
  स्टैटिक बनाम डायनामिक सामग्री
  ज्यादातर स्टैटिक सामग्री के लिए, समय-समय पर एक नया बिल्ड अपलोड करना अक्सर पर्याप्त होता है। डायनामिक सामग्री के लिए, आपको CMS (कंटेंट मैनेजमेंट सिस्टम) या डेटाबेस कनेक्शन की आवश्यकता हो सकती है।
- लक्ष्य दर्शक किन उपकरणों और ब्राउज़रों का उपयोग कर रहे हैं?
  ब्राउज़र संगतता और परीक्षण
  जबकि Needle Engine सभी आधुनिक उपकरणों और ब्राउज़रों पर काम करता है, यह सुनिश्चित करने के लिए हमेशा एक अच्छा विचार होता है कि सब कुछ अपेक्षा के अनुसार काम कर रहा है या नहीं, अपने ऐप को उन उपकरणों और ब्राउज़रों पर परीक्षण करें जिनका उपयोग आपके लक्ष्य दर्शक कर रहे हैं। उदाहरण के लिए, फ़ोन के लिए AR ऐप बनाते समय, आप Android और iOS उपकरणों पर परीक्षण करना चाहेंगे।
प्रोजेक्ट, एक टेस्ट डिप्लॉयमेंट, और क्लाइंट डिप्लॉयमेंट सेट करें। यह सुनिश्चित करने के लिए कि आप समझते हैं कि यह कैसे काम करता है और आवश्यकताएं क्या हैं, डिप्लॉयमेंट प्रक्रिया को जल्दी परीक्षण करना अक्सर एक अच्छा विचार होता है। उदाहरण के लिए, जब आपने FTP का उपयोग करने का फैसला किया है, तो आप अपने स्वयं के वेब सर्वर पर एक टेस्ट फोल्डर सेट कर सकते हैं और वहां डिप्लॉयमेंट प्रक्रिया का परीक्षण कर सकते हैं। एक बार जब ग्राहक द्वारा बदलावों को मंजूरी दे दी जाती है, तो आप ग्राहक के सर्वर पर डिप्लॉय कर सकते हैं।
बनाना शुरू करें! आवश्यकताओं और डिप्लॉयमेंट को स्थापित करने के साथ, आगे बढ़ें और अपना प्रोजेक्ट बनाना शुरू करें! आप आमतौर पर स्थानीय रूप से दोहराएंगे, फिर अनुमोदन के लिए अपने टेस्ट सर्वर पर डिप्लॉय करेंगे, और फिर ग्राहक के सर्वर पर।

Wordpress

उस विधि पर निर्णय लें जिसका उपयोग आप अपने Needle Engine प्रोजेक्ट को एम्बेड करने के लिए करना चाहते हैं। आप या तो "एक मौजूदा वेबसाइट में एक Needle प्रोजेक्ट एम्बेड करना" विधि, या "एक Needle प्रोजेक्ट को आईफ्रेम के रूप में एम्बेड करना" विधि का उपयोग कर सकते हैं।
अपने वेब प्रोजेक्ट के dist/ फोल्डर की सामग्री को अपने वेब होस्टर पर अपलोड करें। आमतौर पर, Wordpress अपलोड निर्देशिका wp-content/uploads/ पर स्थित होती है।
Wordpress बैकअप
आप तय कर सकते हैं कि आपका नया प्रोजेक्ट wp-content/uploads/my-project/ पर होना चाहिए, या my-projects/my-project जैसे किसी भिन्न स्थान पर। यह इस बात को प्रभावित करता है कि आपका प्रोजेक्ट Wordpress बैकअप में शामिल होगा या नहीं और कैसे।
जिस पेज में आप Needle Engine जोड़ना चाहते हैं, उसमें एक HTML ब्लॉक जोड़ें और ऊपर बताए अनुसार कोड स्निपेट पेस्ट करें - या तो स्क्रिप्ट एम्बेड के रूप में, या आईफ्रेम के रूप में।