Three.js: إنشاء HUD على مشهد ثلاثي الأبعاد (WebGLRenderer)؟

تم إنشاؤها على ٢٩ مايو ٢٠١١  ·  19تعليقات  ·  مصدر: mrdoob/three.js

مرحبا

هل يعرف أي شخص ما هي الطريقة الصحيحة لإنشاء طبقة HUD (نقوش متحركة ثنائية الأبعاد ، واجهة مستخدم) فوق مشهد ثلاثي الأبعاد باستخدام THREE.js؟ أريد محاكاة مؤشر الماوس وعرض بعض الصور على المشهد. فكرتي هي إنشاء كاميرا تقويمية واستخدام النقوش المتحركة. لكني لا أعرف كيف يمكنني وضع هذه العروض فوق العرض الرئيسي. في الأمثلة وجدت بعض "المعالجة اللاحقة" ، لكنني لا أعتقد أن هذا هو السبيل للذهاب.

شكر
ريمو

Question

التعليق الأكثر فائدة

كنت أعمل في مشروع WebVR ولم يكن حل DOM خيارًا. انتهى بي الأمر بعمل HUD مع Three.js النقي. لقد صنعت مشهدًا منفصلاً وجعلته فوق المشهد الأصلي.

يمكنك مشاهدة المثال الحي هنا:
http://codepen.io/jaamo/pen/MaOGZV

ومدونة حول الحل هنا:
http://www.evermade.fi/pure-three-js-hud/

ال 19 كومينتر

استخدم HTML

+1 لـ HTML. أنت تطور لمنصة _مصممة_ لواجهة المستخدم ؛ الاستفادة منه. :)

في الواقع لا أفهم لماذا لا يجب عليك استخدام HTML! +1

نعم ، ما لم تكن بحاجة إلى دمجها في المشهد ثلاثي الأبعاد ، فسأستخدم HTML أعلى اللوحة.

شكر.
mrdoob ، نعم أريد الاندماج في المشهد ثلاثي الأبعاد. أريد استخدام WebGL لبعض الرسومات ثنائية الأبعاد. لكنني لم أر عينة عمل للقيام بذلك باستخدام THREE.js.

عندما تقول "intergrate in the 3D scene" فإنك تعني أنك لا تريد واجهة المستخدم كتراكب أعلى ثلاثي الأبعاد ، أليس كذلك؟

Loupax ، لقد غيرت العنوان قليلاً :) أعني في المقدمة ولكن مع WebGL المقدمة. أعني شيئًا من هذا القبيل:

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

أود ببساطة أن أستخدم HTML لواجهة المستخدم الرسومية ، لذا ببساطة <div> 's etc أعلى عنصر <canvas> ...

إذا كنت تريد عرض واجهة المستخدم الرسومية مع Three.js أعلى المشهد الفعلي ، فسأستخدم عنصرين من قماش الرسم فوق بعضهما البعض ، أحدهما للعبة / المشهد / أيًا كان ، والعنصر العلوي للواجهة الرسومية. ستحتاج إلى التأكد من أن الجزء العلوي شفاف بين عناصر واجهة المستخدم الرسومية ، لكنني لا أعرف ما إذا كان ذلك ممكنًا مع Three.js ...

نعم ، بالنسبة لمعظم الحالات ، يعد HTML هو السبيل للذهاب ، وهو أبسط بكثير.

إذا كنت تريد أن تصبح خياليًا وأن تعرض شاشة HUD الخاصة بك بواسطة WebGL (على سبيل المثال للرسوم المتحركة ثلاثية الأبعاد أو بعض تأثيرات التظليل) ، فيمكنك القيام بشيء مثل هذا:

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

(من المحتمل أن تكون هناك طريقة ما لكيفية القيام بذلك دون لعب FBO فقط مع عمق الكتابة / القراءة / الإخفاء ، على الأقل للتراكبات ثنائية الأبعاد)

Alternedq شكرا لك على هذا الرابط. لم أجد حاليًا طريقة مع "اللعب". لكنني قمت بتحليل الكود على WebGLRenderer واكتشفت أنه يمكنني استخدام شيء من هذا القبيل:

var sprite = THREE.Sprite جديدة ({map: tex، useScreenCoordinates: true}) ؛
scene.addChild (sprite) ؛

هذا يعمل.

لكن ما زلت مهتمًا بالطريقة مع العرض المزدوج ومزج هذا.

كنت أعمل في مشروع WebVR ولم يكن حل DOM خيارًا. انتهى بي الأمر بعمل HUD مع Three.js النقي. لقد صنعت مشهدًا منفصلاً وجعلته فوق المشهد الأصلي.

يمكنك مشاهدة المثال الحي هنا:
http://codepen.io/jaamo/pen/MaOGZV

ومدونة حول الحل هنا:
http://www.evermade.fi/pure-three-js-hud/

أنا أعمل بالفعل على أداة HUD لـ webVR.
يعتمد على ملف StereoEffect.js الذي يمكنك العثور عليه في أمثلة three.js.
يتم عرض جزأين من المشهد الأول ، ثم الجزءين من مشهد HUD على تراكب كل ذلك مع StereoEffectCamera الذي يمثل PerspectiveCamera.

يوجد عرض توضيحي بشعر متقاطع وتفاعل مع بعض العناصر في المشهد.
https://github.com/trinketmage/three.js-vr-hud/

أنا أعمل حاليًا على ميزة "التسمية" ضمن إطار عمل مشهد HUD ، وسأقدر أي نصائح أو أي مساعدة.
شكر

إذا كان شخص ما لا يزال يبحث عن كيفية تقديم مشهد Ortho أعلى منظور واحد (بحيث يمكنك محاذاة الكائنات مع الحدود العلوية / اليسرى / اليمنى / السفلية أو الحصول على أحجام بالبكسل) ، فقد كان لدي مثال هناك .

cecilemuller - مشروعك لا يسمح لي بفتح القضايا لذلك أنا أعلق هنا. هل يعمل؟ http://jsbin.com/sisutopede/edit؟html ، js، output (لقد استبدلت let const بـ var ) يمكنني رؤية كرة زرقاء فقط ، ولا يبدو أنني أرى أيًا منها عناصر واجهة المستخدم؟

@ trinketmage - شكرًا لك على إنشاء برنامج تجريبي / مكون إضافي رائع وأخذ الوقت لشرح المشكلة 1 ، الآن أحاول تحديد المشكلة 2 : https://github.com/trinketmage/three.js-vr-hud/issues/ 2 - تعمل بشكل لا تشوبه شائبة عندما أستخدم لوحة المفاتيح ، في اللحظة التي أبدأ فيها باستخدام جهازي المحمول / أدوات Chrome Dev ومحاكاة الاتجاه ، يقفز ...


على sidenote - ما يكفي من النسخ واللصق - في مرحلة ما ، يجب أن أكون قادرًا على كتابة الكود الخاص بي نظرًا لكل المعرفة الموجودة في هذا الموضوع ...

@ stefek99 يجب أن تظهر مستطيلات ملونة أعلى الكرة الزرقاء ؛ جربت للتو jsbin في Chrome و Firefox ، وإليك لقطة شاشة:
screenshot

على الرغم من نعم ، هناك بعض ميزات es6 في الكود ، لذا يمكنك استخدام Babel REPL للتحويل إلى es5 إذا لم يكن قيد التشغيل.

إنه عام 2020 ، ما هي أفضل طريقة لإنشاء تراكب HUD ثنائي الأبعاد داخل ThreeJS دون استخدام طرق هجينة أو غريبة؟ من الناحية المثالية للوصول إلى شيء مثل PixiJS داخل ThreeJS؟

sylwesterdigital يمكنك استخدام منتدى three.js إذا كنت بحاجة إلى مساعدة.

نعم ... لقد كنت هناك وحسابي معلق ، لذا لا يمكنني التعليق أو الرد أو إنشاء مواضيع جديدة. هل مجتمع ThreeJS ذاهب إلى أي مكان وكل شخص يقوم بالترميز f * يتفاعل للحصول على دفعة شهرية؟

بعد سنوات من الخداع ، أعتقد أنه لا توجد طرق مطلقة للقيام بـ Hud في WebGL ، فهذا يعتمد كليًا على المشروع ، لكن فكرتي هي:

  • إذا لم تكن بحاجة إلى تأثيرات محددة على HUD ، فانتقل إلى HTML ، فهناك "تكلفة تركيب" ولكن طالما لم يكن لديك الكثير من التراكب (إذا استخدمت 4 مرات / 5 أضعاف أحجام تراكبات الشاشة ، فستتأخر على Chrome مع Mac Book Pro Retina منتصف عام 2015) ، مثال على HUD في html: demo waymaze .
  • إذا كنت تريد أن تكون في العالم لأي سبب من الأسباب ، فسأضعها مباشرة في مجموعة بحيث يتم وضع كل إطار أمام الكاميرا معروضًا فوق كل شيء ؛ احسب نطاقات المجموعة من الكاميرا على مسافة z محددة عند تغيير الحجم لوضع العنصر في أعلى / يمين / أسفل / يسار ؛ توفر هذه الطرق مرونة في استخدام المنظور (إذا كنت بحاجة إلى عناصر ثلاثية الأبعاد في HUD) أم لا ، وأعتقد أنه يجب أن يكون أقل تكلفة للأداء (يرجى تصحيح ما إذا كنت مخطئًا).
  • الطريقة الأكثر "منطقية" من sylwesterdigital ، في رأيي ، هي عمل
  • Pixi.js أعلى Three.js هو حل سيء sylwesterdigital ، لأنني أعتقد أنه سيكون لديك
  • يجب أن تعمل لوحة الرسم القديمة الجيدة أعلى ثلاثة.js أيضًا ، علمني أحد زملائي المذهلين فيnamide درسًا ضخمًا للمطورين: "كيف يمكنهم تحسينها لألعاب الفيديو؟" ، في Unity ، الطرق الشائعة للتعامل مع HUD هي استخدام CanvasRenderer على فوق كل شيء.

لذا في الختام ، في رأيي ، يجب أن تعتمد المكونات المرئية HUD على تكلفة الأداء التي يمكنك تحملها.

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات