Get started with WebVR

Feb 5, 2026
कैसे करना है

वेबवीआर ब्राउज़र में 3 डी वर्चुअल रियलिटी अनुभव बनाने के लिए एक जावास्क्रिप्ट एपीआई है। इसके लिए कम विलंबता, उच्च फ्रेम दर और उत्कृष्ट प्रदर्शन की आवश्यकता होती है। इसका उद्देश्य किसी को भी प्रवेश के लिए बाधाओं को कम करके वीआर अनुभवों में शामिल होना आसान बनाना है।

वेबजीएल डेवलपर्स को अमीर, कंसोल-गुणवत्ता अनुभव बनाने में सक्षम बनाता है जो मोबाइल डिवाइस और डेस्कटॉप ब्राउज़र पर वास्तविक समय में प्रस्तुत करते हैं (बस सुनिश्चित करें कि आप प्राप्त करें वेब होस्टिंग इष्टतम क्षमता के लिए अधिकार)। लगभग सार्वभौमिक ब्राउज़र और डिवाइस समर्थन वेब डेवलपर्स के लिए अविश्वसनीय वीआर अनुभव बनाने के लिए एक आदर्श दृष्टिकोण बनाता है। यहां, हम आपको दिखाते हैं कि वेबवीआर के साथ कैसे शुरू किया जाए। इस आलेख के निचले भाग में, आपको अपने ज्ञान को आगे बढ़ाने के लिए कुछ उपयोगी संसाधन मिलेंगे।

06. वैश्विक चर जोड़ें

कोड के लिए स्क्रिप्ट टैग के बीच, वैश्विक स्तर पर कैमरे, दृश्य, रेंडर, ऑब्जेक्ट्स और रायकास्टर तक पहुंचने के लिए निम्न वैश्विक चर जोड़ें। एक भी जोड़ें मारो कैमरे की नज़र से छेड़छाड़ की गई वस्तुओं का ट्रैक रखने के लिए चर। यह दर्शाता है कि कैसे एक उपयोगकर्ता वीआर में देख रहा है कि क्या जानना है।

[11 9] var घड़ी = नया तीन। क्लॉक (); वार कंटेनर, कैमरा, दृश्य, रेंडरर, कमरा, क्रॉसहेयर, हिट; var ऑब्जेक्ट्स = []; // वस्तुओं का संग्रह var num = 100; // वस्तुओं की संख्या var raycaster = नया तीन.raycaster ();

07. एक 3 डी दृश्य बनाएँ

आप एक मूल 3 डी दृश्य जोड़ने जा रहे हैं, जो आपकी वस्तुओं के लिए कंटेनर होगा। दृश्य वह चरण है जो कैमरे के साथ प्रस्तुत करेगा। सभी 3 डी प्रस्तुतियों में कुछ रूप का एक दृश्य या चरण होगा। उस चरण में क्या है और कैमरे को देखते हुए उपयोगकर्ता क्या देखेगा। एक दृश्य जोड़ने के लिए निम्न कोड जोड़ें: 

 // एक दृश्य वस्तु बनाएँ
var दृश्य = नया तीन .Scene ();

08. एक परिप्रेक्ष्य कैमरा जोड़ें

इसके बाद, आपको एक कैमरा जोड़ने की जरूरत है। आप 3 डी दृश्यों के लिए परिप्रेक्ष्य कैमरा का उपयोग करेंगे। पहली विशेषता कैमरा के दृश्य का क्षेत्र है। दूसरा पहलू अनुपात है ( चौड़ाई ऊंचाई )। फिर आप निकट क्लिपिंग विमान और दूर क्लिपिंग विमान दूरी को इंगित कर सकते हैं, जो परिभाषित करते हैं कि कैमरे के लिए क्या दिखाई देना है। 

 // कैमरा बनाएं
कैमरा = नया तीन। PerspectiveCamera
(70, window.innerwidth / window.innerheight,
0.1, 1000);
scene.add (कैमरा);

09. एक रेंडरर और कैनवास तत्व जोड़ें

रेंडरर आपके दृश्य में वस्तुओं की ड्राइंग को संभालता है जो कैमरे के लिए दृश्यमान होते हैं। ऑब्जेक्ट पर चिकनी किनारों को प्राप्त करने के लिए एंटीअलाइज प्रॉपर्टी को सत्य पर सेट करें। रेंडरर एक बनाता है अपमान , जो वास्तव में एक HTML है & lt; कैनवास और जीटी; तत्व। फिर आप शरीर में संलग्न कर सकते हैं। रेंडरर के नए वीआर-सक्षम ध्वज के उपयोग पर ध्यान दें। 

 प्रस्तुतकर्ता = नया तीन.वेग्रेंडरर (
{ANTIALIAS: TRUE});
renderer.setpixelratio (विंडो।
Deverepixelratio);
renderer.setsize (window.innerwidth, खिड़की।
इनरहाइट);
renderer.vr.enabled = true;
document.body.appendchild (रेंडरर।
डोमेलेशन);

10. कैमरा क्रॉसहेयर जोड़ें

कैमरे के फोकस के लिए उपयोगकर्ताओं को उन्मुख करने में मदद करने के लिए, कैमरे के सामने एक क्रॉसहेयर या लक्ष्यीकरण आइकन जोड़ने के लिए यह अच्छा अभ्यास है। आप इसे सीधे कैमरे की वस्तु में जोड़ सकते हैं, इसलिए यह हमेशा कहां होना चाहिए।

[11 9] क्रॉसहेयर = नया तीन। नई तीन. रिंगबफेग्रेट्री (0.02, 0.04, 32), नया तीन.शासिकमटेरियल ({ रंग: 0xFFFFFF, अस्पष्टता: 0.5, पारदर्शी: सच }) ); crosshair.position.z = - 2; कैमरा। जोड़ें (क्रॉसहेयर);

11. एक वीआर रूम ऑब्जेक्ट बनाएं (वैकल्पिक)

इसके बाद, एक साधारण रूम ऑब्जेक्ट बनाएं। उपयोगकर्ता को वीआर दुनिया में अभिविन्यास की भावना देना अच्छा है। यह दीवारों, फर्श और छत को इंगित करने के लिए लाइनों के साथ एक साधारण कमरे का बक्सा बनाता है।

[11 9] कमरा = नया तीन.लिगेन्स ( नई तीन.बॉक्सलाइनगेमेट्री (6, 6, 6, 10, 10, 10), नया तीन. लाइनबासिकमटेरियल ({रंग: 0x808080})); road.position.y = 2; scene.add (कमरा);

12. दृश्य में लाइट जोड़ें

दृश्य को प्रकाश देने के लिए, हम एक साधारण गोलार्द्ध प्रकाश और एक दिशात्मक प्रकाश का उपयोग करेंगे। यह एक अच्छी परिवेश दृश्यता और एक समान प्रकाश स्रोत से कुछ यथार्थवादी छायांकन भी देगा। 

 scene.add (नया तीन.मिस्फेरलाइट
(0x806060, 0x404040));
var light = नया तीन.देवता
(0xffffffffffff);
light.position.set (1, 1, 1) .normalize ();
scene.add (प्रकाश);

13. कुछ ऑब्जेक्ट बनाएं

आप कमरे को अगले ऑब्जेक्ट्स के साथ भरने जा रहे हैं। उन्हें कमरे के चारों ओर यादृच्छिक रूप से लागू करें। आप विविधता के लिए रोटेशन और स्केल को यादृच्छिक रूप से सेट करेंगे। आप अगले चरण में थोड़ा और कोड जोड़ सकते हैं, जहां यह कहता है ऑर्बिट विशेषताएँ बनाएं कुछ कस्टम ऑर्बिट पथ सक्षम करने के लिए।

[11 9] var geometry = नई तीन.बॉक्सबफ़रजमीटरी (0.15, 0.15, 0.15); के लिए (i = 0; i & lt; = num; i ++) { var सामग्री = नया तीन. meshlambertmaterial ({रंग: math.random () * 0xffffffff}); var ऑब्जेक्ट = नया तीन. (ज्यामिति, सामग्री); object.position.set (math.random () * 4.0 - 2.0, math.random () * 4.0 - 2.0, गणित। यादृच्छिक () * 4.0 - 2.0); object.scale.set (math.random () + 5, गणित। यादृच्छिक () +। 5, math.random () +। 5); Object.Rotation.set (math.random () * 2 * Mat.pi, math.random () * 2 * math.pi, गणित। यादृच्छिक () * 2 * math.pi); // ऑर्बिट विशेषताएं}

14. ऑब्जेक्ट्स में ऑर्बिट विशेषताएँ जोड़ें

कुछ अच्छी यादृच्छिक रूपरेखा गति को सक्षम करने के लिए, और वस्तुओं को 'कमरे से बचने' से रखने के लिए हम कुछ प्रारंभिक कोण डेटा (रेडियंस में) और दूरी तय करेंगे। यह रेंडर लूप में ऑब्जेक्ट्स को एनिमेट करने के लिए एक आसान तरीका सक्षम बनाता है। 

// orbit विशेषताएँ बनाएं
// calc दूरी स्थिर और असाइन के रूप में
वस्तु
var a = नया तीन.vector3 (0, 0, 0);
var b = object.position;
var d = a.distanceto (b);
object.distance = d;
object.radians = math.random () * 360 * गणित।
पीआई / 180; // प्रारंभिक कोण
object.radians2 = math.random () * 360 * गणित।
पीआई / 180; // प्रारंभिक कोण
object.radians3 = math.random () * 360 * गणित।
पीआई / 180; // प्रारंभिक कोण
कक्ष। (ऑब्जेक्ट);
objects.push (ऑब्जेक्ट);

15. एक विंडो आकार बदलें हैंडलर जोड़ें

जैसे ही हम अपने वेबवीआर ऐप का परीक्षण करते हैं, हम स्क्रीन का आकार बदल देंगे, इसे चारों ओर ले जा रहे हैं, और इसी तरह। एक हैंडलर होना एक अच्छा विचार है जो रेंडर क्षेत्र के आयामों को समायोजित करता है और चीजों को ठीक से स्क्रीन भरने और अच्छी लगती है।

[11 9] window.addeventlistener ('आकार बदलें', onwindowresize, गलत); फ़ंक्शन ऑनविंडोइज़ाइज () { camera.aspect = window.innerwidth / विंडो। इनरहाइट; कैमरा। अपडेट प्रोपेक्शनमेट्रिक्स (); renderer.setsize (window.innerwidth, window.innerheight); }

16. WebVR बटन बनाएँ

छवि 1 में से 1

Non-VR mode

गैर-वीआर मोड
2 की छवि 2

In VR mode

वीआर मोड में

तीन.जेएस 'नई वेबवीआर कक्षा में एक वेबवीआर बटन शामिल है, जो हमारे लिए वीआर मोड में और बाहर टॉगलिंग करता है। यह भी संभालता है अगर डिवाइस वीआर मोड का समर्थन नहीं करता है। आप इसे इस सरल कोड के साथ शामिल कर सकते हैं: 

 // three.js webvr बटन दर्ज करने के लिए /
वीआर मोड से बाहर निकलें
document.body.appendchild (webvr.createbutton)
(रेंडरर));

17. वीआर एनीमेशन लूप शुरू करें

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

 // वीआर एनीमेशन लूप शुरू करें
renderer.setanimationLoop (प्रस्तुत करना);

18. रेंडर फ़ंक्शन बनाएं

इसके बाद, एक रेंडर फ़ंक्शन बनाएं। यदि आप अपने ऑब्जेक्ट्स को एनिमेट नहीं करना चाहते हैं या ऑब्जेक्ट्स के साथ छेड़छाड़ किए गए कैमरे / क्रॉसहेयर के लिए परीक्षण नहीं करते हैं, तो आप केवल निम्न कोड का उपयोग कर सकते हैं:

[11 9] फ़ंक्शन रेंडर () { // चौराहों को खोजें // वस्तुओं को एनिमेट करें // दृश्य प्रस्तुत करें renderer.render (दृश्य, कैमरा); }

19. चौराहे के लिए परीक्षण

ज़ेड स्पेस में कैमरे से पता लगाने वाली किरण को छेड़छाड़ करने वाली वस्तुओं के लिए परीक्षण सक्षम करने के लिए, निम्न कोड को अपने रेंडर लूप में जोड़ें जहां आपने इसे अंतिम चरण में टिप्पणी की:

[11 9] raycaster.setfromcamera ({x: 0, y: 0}, कैमरा ); var intersects = raycaster.intersectobjects (कमरा। चिल्ड्रेन); यदि (intersects.length & gt; 0) { अगर (हिट! = इंटरसेक्ट्स
.Object) { अगर (हिट) {hit.material.emissive। सेठेक्स (हिट .currenthex); } हिट = इंटरसेक्ट्स
.Object; Hit.currenthex = hit.material.emissive। Gethex (); Hit.material.emissive.sethex (0x00ff00); } } अन्य { अगर (हिट) {hit.material.emissive.sethex (Hit.currenthex); } हिट = अपरिभाषित; }

20. ऑर्बिट्स के साथ ऑब्जेक्ट्स को एनिमेट करें

इसके बाद, आप इस कोड का उपयोग करके अपनी ऑब्जेक्ट्स को अपने ऑब्जेक्ट पथों को एनिमेट कर सकते हैं: 

 के लिए (i = 0; i & lt; = num; i ++) {
var o = ऑब्जेक्ट्स [i];
O.Rotation.y + =। 01;
अगर (I% 2 == 0) {
o.radians + =। 004;
o.radians2 + =। 005;
o.radians3 + =। 008;
} अन्य {
o.radians - =। 006;
o.radians2 - =। 005;
o.radians3 - =। 003;
}
o.position.x = (math.cos (o.radians) *
o.distance);
o.position.z = (math.sin (o.radians3) *
o.distance);
o.position.y = (math.sin (o.radians2) *
o.distance * .5);
}

21. वेबवीआर दृश्य प्रस्तुत करें

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

 // दृश्य प्रस्तुत करें
renderer.render (दृश्य, कैमरा);

वेबवीआर संसाधन

वेबवीआर में शुरू करना भारी हो सकता है। हमने आपको रोलिंग करने में मदद के लिए वेबवीआर और संसाधनों का उपयोग करके साइटों के कुछ उदाहरणों को इकट्ठा किया है।

[2 9 0] [2 9 1] [2 9 2]

[2 9 9] स्केचफैब


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

एक ढाँचा
यह एआर और वीआर के लिए एक चट्टान-ठोस ढांचा है। यह आपके लिए फ़ॉलबैक और डिवाइस समर्थन के दर्द को संभालता है, जिसमें आपको परीक्षण के लिए अपने ब्राउज़र में प्रस्तुत करने में सक्षम बनाता है। यह भी सामान्य 3 डी वस्तुओं के निर्माण को दूर करता है।

तीन.जेएस
इस पुस्तकालय में कई हैं उदाहरण वेबवीआर के साथ जाने में आपकी सहायता के लिए स्रोत कोड के साथ। यह एक आदर्श प्रारंभिक बिंदु है।

वेबवीआर
चूंकि वेबवीआर एक उभरती हुई तकनीक है, इसलिए नवीनतम विकास को बनाए रखना एक अच्छा विचार है। आपको यह जानने की जरूरत है कि कौन से डिवाइस समर्थित हैं और किन स्थितियों के तहत। यह साइट आपको अद्यतित रहने में मदद करेगी। वहाँ है [32 9] उदाहरण के लिए समर्पित पृष्ठ

, भी।

और यह हमेशा सही होने में मदद करता है घन संग्रहण , भी।

यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका के अंक 283 में प्रकाशित किया गया था वेब डिजाइनर । अंक 283 खरीदें या सदस्यता लेने के ।

अधिक पढ़ें:

  • 7 बोनकर्स वीआर रुझान आपके रास्ते पर जा रहे हैं
  • Redux Thunk के साथ शुरू करें
  • 11 गर्म वेब रुझान अभी

कैसे करना है - सर्वाधिक लोकप्रिय लेख

How to Photoshop on the iPhone (yes, it’s a thing)

कैसे करना है Feb 5, 2026

(छवि क्रेडिट: जेसन पार्नेल-ब्रूक्स) [1 9] पर क�..

सुपर शीघ्र जावास्क्रिप्ट के लिए 21 कदम

कैसे करना है Feb 5, 2026

(छवि क्रेडिट: Pexels.com) [1 9] पहली नज़र में, समांतर प्..

फ़ोटोशॉप में गहराई जोड़ने के लिए कलम टूल और बनावट का उपयोग करें

कैसे करना है Feb 5, 2026

निम्नलिखित लघु स्क्रीन-कैप्चर वीडियो पर, चार्..

Improve your concept art skills in Photoshop

कैसे करना है Feb 5, 2026

इस कार्यशाला के लिए, मैं आपको केवल अपनी कल्पना से �..

Create special print finishes in InDesign

कैसे करना है Feb 5, 2026

4 का पृष्ठ 1: पन्नी अवरुद्ध [2 9] �..

How to paint a castle with SketchUp

कैसे करना है Feb 5, 2026

की एक श्रृंखला है कला तकनीक यह आपके डिजिटल प..

How to create a papercraft robot

कैसे करना है Feb 5, 2026

केवल पिछली गर्मियों में स्नातक होने के बाद, मैं अ�..

Top tips for sculpting a creature in ZBrush

कैसे करना है Feb 5, 2026

ज़ब्रश में एक प्राणी का निर्माण करने के लिए मैं इ�..

श्रेणियाँ