थ्री.जेएस

Question

के साथ वेबजीएल क्षेत्र में सीधे यूआई तत्वों को रेखांकित करना तीन.जेएस में, क्या सीधे वेबजीएल क्षेत्र (उदाहरण के लिए हेड-अप डिस्प्ले या यूआई तत्वों के लिए) को आकर्षित करना संभव है, जिस तरह से आप नियमित एचटीएमएल 5 कैनवास तत्व?

यदि हां, तो आप संदर्भ कैसे प्राप्त कर सकते हैं और कौन से ड्राइंग आदेश उपलब्ध हैं?

यदि नहीं, तो यह अन्य तीन.जेएस या वेबजीएल-विशिष्ट ड्राइंग कमांड के माध्यम से इसे पूरा करने का एक और तरीका है जो तीन.जेएस के साथ सहयोग करेगा?

मेरी बैकअप योजना HTML divs को ओवरले के रूप में उपयोग करना है, लेकिन मुझे लगता है कि एक बेहतर समाधान होना चाहिए।

धन्यवाद!

Answer 1

आप नियमित रूप से कैनवास के साथ वेबग्ल कैनवास पर सीधे आकर्षित नहीं कर सकते हैं। हालांकि, अन्य विधियां भी हैं, उदा। हमेशा की तरह एक छिपे हुए 2D कैनवास को

• ड्रा और WebGL में स्थानांतरित है कि एक ट्रैक्टर
• बनावट मैप किया quads का उपयोग कर छवियों (आपके स्वास्थ्य के बॉक्स से जैसे फ्रेम)
• ड्रा पथ ड्रा करने के लिए एक बनावट के रूप में यह का उपयोग करके (और आकार) को उनके वर्टिसेस को एक वीबीओ में डालकर खींचें और उचित पॉलीगॉन प्रकार
• बिटमैप फ़ॉन्ट (मूल रूप से बनावट वाले क्वाड) या वास्तविक ज्यामिति (तीन.जे.एस. के उदाहरण और मददगार) का उपयोग करके टेक्स्ट ड्रा करें

इनका उपयोग आमतौर पर एक ऑर्थोग्राफिक कैमरा स्थापित करना है।

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

यह भी याद रखें कि आप CSS3 के साथ काफी कुछ प्राप्त कर सकते हैं, उदा। गोलाकार कोनों, अल्फा पारदर्शिता, यहां तक ​​कि 3 डी परिप्रेक्ष्य परिवर्तन, जैसा कि प्रश्न की टिप्पणी में एंटोन के लिंक द्वारा प्रदर्शित किया गया है।

Answer 2

मेरे पास बिल्कुल वही समस्या थी। मैं डीओएम के बिना एक एचयूडी (हेड-अप डिस्प्ले) बनाने की कोशिश कर रहा था और मैंने इस समाधान को तैयार किया:

1. मैंने ऑर्थोग्राफिक कैमरे के साथ एक अलग दृश्य बनाया।
2. मैंने एक कैनवास तत्व बनाया और मेरे ग्राफिक्स को प्रस्तुत करने के लिए 2 डी ड्राइंग प्राइमेटिव का उपयोग किया।
3. फिर मैंने पूरी स्क्रीन को फिट करने के लिए एक विमान बनाया और बनावट के रूप में 2 डी कैनवास तत्व का उपयोग किया।
4. मैं मूल दृश्य

कि कैसे HUD कोड लग रहा है के शीर्ष पर है कि माध्यमिक दृश्य प्रदान की गई की तरह:

// Render HUD on top of the scene. 
renderer.render(sceneHUD, cameraHUD); 

:

// We will use 2D canvas element to render our HUD. 
var hudCanvas = document.createElement('canvas'); 

// Again, set dimensions to fit the screen. 
hudCanvas.width = width; 
hudCanvas.height = height; 

// Get 2D context and draw something supercool. 
var hudBitmap = hudCanvas.getContext('2d'); 
hudBitmap.font = "Normal 40px Arial"; 
hudBitmap.textAlign = 'center'; 
hudBitmap.fillStyle = "rgba(245,245,245,0.75)"; 
hudBitmap.fillText('Initializing...', width/2, height/2); 

// Create the camera and set the viewport to match the screen dimensions. 
var cameraHUD = new THREE.OrthographicCamera(-width/2, width/2, height/2, -height/2, 0, 30); 

// Create also a custom scene for HUD. 
sceneHUD = new THREE.Scene(); 

// Create texture from rendered graphics. 
var hudTexture = new THREE.Texture(hudCanvas) 
hudTexture.needsUpdate = true; 

// Create HUD material. 
var material = new THREE.MeshBasicMaterial({map: hudTexture}); 
material.transparent = true; 

// Create plane to render the HUD. This plane fill the whole screen. 
var planeGeometry = new THREE.PlaneGeometry(width, height); 
var plane = new THREE.Mesh(planeGeometry, material); 
sceneHUD.add(plane); 

और क्या मैं अपने प्रस्तुत करना पाश को जोड़ा गया है कि

आप यहां पूर्ण स्रोत कोड के साथ खेल सकते हैं: http://codepen.io/jaamo/pen/MaOGZV

और अपने ब्लॉग पर कार्यान्वयन के बारे में अधिक पढ़ें: http://www.evermade.fi/pure-three-js-hud/