Three.js: 3D दृश्य (WebGLRenderer) पर HUD बनाना?

HTML का उपयोग करें

HTML के लिए +1। आप UI के लिए एक मंच _design_ के लिए विकसित कर रहे हैं; इसका उपयोग करें। :)

वास्तव में मैं नहीं देखता कि आप HTML का उपयोग क्यों कर रहे हैं! +1

हां, जब तक इसे 3 डी दृश्य में एकीकृत करने की आवश्यकता नहीं है मैं कैनवास के शीर्ष पर HTML के साथ जाऊंगा।

धन्यवाद।
mrdoob, हाँ मैं 3D दृश्य में एकीकृत करना चाहता हूँ। मैं कुछ 2d ग्राफिक्स के लिए WebGL का उपयोग करना चाहता हूं। लेकिन मैंने THREE.js के साथ ऐसा करने के लिए एक कार्य नमूना नहीं देखा।

जब आप कहते हैं "3 डी दृश्य में इंटरग्रेट करें" तो आपका मतलब है कि आप यूआई को 3 डी के शीर्ष पर ओवरले के रूप में नहीं चाहते हैं, चीर?

लूपैक्स, मैंने शीर्षक को थोड़ा बदल दिया है :) मेरा मतलब शीर्ष पर है लेकिन वेबजीएल के साथ प्रदान किया गया है। मेरा मतलब कुछ इस तरह है:

http://www.smokycogs.com/blog/o3d-tutorial-4-the-beginnings-of-a-hud/
http://code.google.com/p/o3d/source/browse/trunk/samples_webgl/o3d-webgl-samples/hud-2d-overlay.html?spec=svn218&r=218

मैं बस GUI के लिए HTML का उपयोग करूंगा, इसलिए <कैनवास> तत्व के शीर्ष पर बस <div> 'आदि ...

यदि आप चाहते हैं कि GUI को आपके वास्तविक दृश्य के शीर्ष पर तीन.js के साथ प्रस्तुत किया जाए, तो मैं एक दूसरे के ऊपर दो कैनवास तत्वों का उपयोग करूंगा, एक खेल / दृश्य के लिए / जो भी हो, और गुई के लिए शीर्ष एक। आपको यह सुनिश्चित करने की आवश्यकता होगी कि जीयूआई तत्वों के बीच शीर्ष एक पारदर्शी है, लेकिन मुझे नहीं पता कि क्या थ्री। जेएस के साथ संभव है ...

हां, अधिकांश मामलों के लिए HTML जाने का तरीका है, यह बहुत सरल है।

यदि आप फैंसी प्राप्त करना चाहते हैं और आपके HUD को WebGL द्वारा प्रस्तुत किया गया है (उदाहरण के लिए एनिमेटेड 3D या कुछ shader प्रभाव), तो आप ऐसा कुछ कर सकते हैं:

http://mrdoob.github.com/three.js/examples/webgl_rtt.html

(FBO बिना गहराई से लिखने / पढ़ने / मास्किंग के साथ कम से कम 2d ओवरले के लिए खेलने के तरीके के बारे में कुछ तरीका है।

alteredq, इस लिंक के लिए धन्यवाद। मुझे वर्तमान में "खेलने" के साथ एक रास्ता नहीं मिला है। लेकिन मैंने WebGLRenderer पर कोड का विश्लेषण किया और पाया कि मैं कुछ इस तरह का उपयोग कर सकता हूं:

var sprite = new THREE.Sprite ({मैप: टेक्स, यूसेजस्क्रीनऑर्डिनेट्स: ट्रू});
scene.addChild (स्प्राइट);

यह काम।

लेकिन मैं अभी भी दोहरी प्रतिपादन और इस सम्मिश्रण के साथ रास्ते के बारे में दिलचस्पी है।

मैं एक WebVR प्रोजेक्ट पर काम कर रहा था और DOM सॉल्यूशन एक विकल्प नहीं था। मैंने शुद्ध थ्री जज के साथ एचयूडी करना समाप्त कर दिया। मैंने एक अलग दृश्य बनाया और अपने मूल दृश्य के शीर्ष पर उसका प्रतिपादन किया।

आप इसका जीता जागता उदाहरण देख सकते हैं:
http://codepen.io/jaamo/pen/MaOGZV

और यहाँ समाधान के बारे में ब्लॉग पोस्ट:
http://www.evermade.fi/pure-three-js-hud/

मैं वास्तव में webVR के लिए एक HUD टूल पर काम कर रहा हूं।
यह StereoEffect.js पर आधारित है जिसे आप तीन.js उदाहरणों में पा सकते हैं।
यह पहले दृश्य के दो भाग को प्रस्तुत करता है, फिर HUD दृश्य के दो भाग को स्टीरियोएफ़ेक्टमेकेरा के साथ ओवरले पर रखा जाता है जो पर्सपेक्टिवकोमेरा हैं।

एक क्रॉसहेयर के साथ एक डेमो होता है और दृश्य में कुछ तत्वों के साथ बातचीत होती है।
https://github.com/trinketmage/three.js-vr-hud/

मैं वर्तमान में HUD के दृश्य के केंद्र में "लेबल" सुविधा पर काम कर रहा हूं, मैं किसी भी सुझाव या किसी भी मदद की सराहना करूंगा।
धन्यवाद

यदि कोई अभी भी देख रहा है कि एक दृष्टिकोण के शीर्ष पर एक ऑर्थो दृश्य कैसे प्रस्तुत किया जाए (इसलिए आप ऑब्जेक्ट्स को शीर्ष / बाईं / दाईं / नीचे की सीमाओं में संरेखित कर सकते हैं या पिक्सेल में आकार कर सकते हैं), तो मेरा एक उदाहरण था ।

@cecilemuller - आपकी परियोजना मुझे मुद्दों को खोलने की अनुमति नहीं देती है इसलिए मैं यहां टिप्पणी कर रहा हूं। क्या यह काम करता है? http://jsbin.com/sisutopede/edit?html , जे एस, निर्गम (मैं प्रतिस्थापित let const के साथ var ) मैं केवल एक नीले क्षेत्र देख सकते हैं, मैं किसी भी देखने के लिए नहीं है यूआई तत्व?

@trinketmage - शानदार डेमो / प्लगइन बनाने और समस्या 1 को समझाने के लिए समय देने के लिए धन्यवाद, अभी मैं 2 अंक की कोशिश कर रहा हूं: https://github.com/trinketmage/three.js-vr-hud/issys 2 - यह त्रुटिपूर्ण रूप से काम करता है जब मैं कीबोर्ड का उपयोग कर रहा होता हूं, जिस क्षण मैं अपने मोबाइल डिवाइस / क्रोम देव टूल्स का उपयोग करना शुरू करता हूं और उन्मुखीकरण का अनुकरण करता हूं, यह कूद रहा है ...

• वीडियो: https://www.youtube.com/watch?v=fO_yJ1bcSCM (23s)
• लाइव: https://stefek99.github.io/three.js-vr-hud/example/

एक सिडोनेट पर - कॉपी और पेस्ट के लिए पर्याप्त - कुछ बिंदु पर मुझे अपना कोड लिखने में सक्षम होना चाहिए जो इस ज्ञान में सभी ज्ञान दिए गए हैं ...

@ stefek99 यह नीले क्षेत्र के शीर्ष पर रंगीन आयत दिखा रहा होगा; बस क्रोम और फ़ायरफ़ॉक्स में jsbin की कोशिश की, यहाँ एक स्क्रीनशॉट है:

यद्यपि हां, कोड में कुछ es6 विशेषताएं हैं, इसलिए आप बाबेल REPL का उपयोग कर es5 में परिवर्तित कर सकते हैं यदि यह नहीं चल रहा है।

यह 2020 है, हाइब्रिड या अजीब तरीकों का उपयोग किए बिना थ्रीजेएस के अंदर 2 डी एचयूडी ओवरले बनाने का सबसे अच्छा तरीका क्या है? आदर्श रूप से थ्री जेएस के अंदर पिक्सीज जैसी किसी चीज की पहुंच है?

@sylwesterdigital आप तीन .js मंच का उपयोग कर सकते हैं यदि आपको मदद की ज़रूरत है।

हाँ ... मैं वहां गया हूं और मेरा खाता चालू है, इसलिए मैं नए विषयों पर टिप्पणी नहीं कर सकता, उत्तर नहीं दे सकता हूं या बना नहीं सकता हूं। क्या थ्री जेएस समुदाय कहीं नहीं जा रहा है और हर कोई मासिक भुगतान करने के लिए f * रिएक्ट को कोड कर रहा है?

वर्षों के आसपास घूमने के बाद, मुझे लगता है कि वेबजीएल में हड करने के लिए कोई सटीक तरीका नहीं है, यह पूरी तरह से परियोजना पर निर्भर करता है, लेकिन मेरे विचार हैं:

• यदि आपको एचयूडी पर विशिष्ट प्रभावों की आवश्यकता नहीं है, तो एचटीएमएल के लिए जाएं, "कंपोजिटिंग कॉस्ट" है, लेकिन जब तक आपके पास बहुत अधिक ओवरले नहीं है (यदि मैं 4 बार / 5 बार स्क्रीन ओवरले का उपयोग करता हूं, तो यह सुस्त हो जाता है) क्रोम ऑन मैक बुक प्रो रेटिना मिड 2015), HTML में एक HUD का उदाहरण: डेमो तरीके ।
• अगर आपको इसे किसी भी कारण से gl में होना चाहिए, तो मैं इसे सीधे एक ग्रुप में डाल
• मेरी राय में अधिक "तार्किक" तरीका @sylwesterdigital , दृश्य के शीर्ष पर एक दूसरे रेंडर (wether Orthographic या परिप्रेक्ष्य) करने के लिए एक ही दृश्य के अंदर एक बनावट के रूप में करना होगा; लेकिन भारी नकारात्मक पक्ष यह है कि यह कम प्रदर्शन के तरीके से पिक्सेल अनुपात द्वारा स्क्रीन के आकार के एक दूसरे रेंडरर को गुणा करने का कारण बनता है, या, अगर HUD रेंडरर छोटा होता है तो आप गुणवत्ता खो देते हैं।
• Pixi.js थ्री के ऊपर। एक बुरा समाधान @sylwesterdigital है , क्योंकि मुझे लगता है कि आपके पास 2 WebGL इंस्टेंसेस होंगे और मुझे लगता है कि यह भारी है?
• तीन के शीर्ष पर अच्छे पुराने कैनवास को भी काम करना चाहिए, मेरे अद्भुत सहकर्मियों में से एक @ डायनामाइड ने मुझे एक बहुत बड़ा डेवलपर सबक सिखाया: "वे इसे वीडियोगेम के लिए कैसे अनुकूलित करेंगे?", एकता में, HUD को संभालने के सामान्य तरीके CanvasRenderer पर हैं? सब कुछ के ऊपर।

इसलिए निष्कर्ष में, मेरी राय में, HUD दृश्य घटकों को इस बात पर निर्भर करना चाहिए कि आपके प्रदर्शन की लागत क्या हो सकती है।