ããã«ã¡ã¯
THREE.jsã䜿çšããŠ3Dã·ãŒã³äžã«HUDã¬ã€ã€ãŒïŒ2Dã¹ãã©ã€ããUIïŒãäœæããæ£ããæ¹æ³ãç¥ã£ãŠãã人ã¯ããŸããïŒ ããŠã¹ã«ãŒãœã«ããšãã¥ã¬ãŒãããŠãã·ãŒã³äžã«ããã€ãã®ç»åãã¬ã³ããªã³ã°ããããšæããŸãã ç§ã®ã¢ã€ãã¢ã¯ããªã«ãœã«ã¡ã©ãäœæããã¹ãã©ã€ãã䜿çšããããšã§ãã ãããããã®ã¬ã³ããªã³ã°ãã¡ã€ã³ã¬ã³ããªã³ã°ã®äžã«éããæ¹æ³ãããããŸããã äŸã§ã¯ãããã€ãã®ãåŸåŠçããèŠã€ããŸãããããããé²ãã¹ãéã§ã¯ãªããšæããŸãã
ããããšã
ã¬ã¢
HTMLã䜿çšãã
HTMLã®å Žåã¯+1ã UIçšã«_èšèšããã_ãã©ãããã©ãŒã çšã«éçºããŠããŸãã ãããå©çšããŠãã ããã :)
å®éãHTMLã䜿çšãã¹ãã§ã¯ãªãçç±ãããããŸããã +1
ã¯ãã3Dã·ãŒã³ã«çµ±åããå¿ èŠããªãéãããã£ã³ãã¹ã®äžã«HTMLã䜿çšããŸãã
ããããšãã
mrdoobãã¯ãã3Dã·ãŒã³ã«çµ±åããããšæããŸãã ããã€ãã®2Dã°ã©ãã£ãã¯ã¹ã«WebGLã䜿çšããããšæããŸãã ããããTHREE.jsã§ãããè¡ãããã®å®çšçãªãµã³ãã«ã¯èŠåœãããŸããã§ããã
ã3Dã·ãŒã³ã«çµ±åããããšã¯ãUIã3Dã®äžã«ãªãŒããŒã¬ã€ãšããŠäœ¿çšããããªããšããæå³ã§ãã
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
GUIã«ã¯HTMLã䜿çšããã ããªã®ã§ã<canvas>èŠçŽ ã®äžã«<div>ãªã©ãè¿œå ããŸãã
å®éã®ã·ãŒã³ã®äžã«Three.jsã䜿çšããŠGUIãã¬ã³ããªã³ã°ããå Žåã¯ã2ã€ã®ãã£ã³ãã¹èŠçŽ ãéããŠäœ¿çšããŸãã1ã€ã¯ã²ãŒã /ã·ãŒã³/ãã®ä»çšã§ããã1ã€ã¯GUIçšã§ãã äžçªäžã®èŠçŽ ãGUIèŠçŽ éã§ééçã§ããããšã確èªããå¿ èŠããããŸãããThree.jsã§ãããå¯èœãã©ããã¯ããããŸãã...
ã¯ããã»ãšãã©ã®å ŽåãHTMLãæé©ãªæ¹æ³ã§ãããã¯ããã«ç°¡åã§ãã
ãã¡ã³ã·ãŒã«ãªããHUDãWebGLã§ã¬ã³ããªã³ã°ãããå ŽåïŒããšãã°ãã¢ãã¡ãŒã·ã§ã³åããã3DãŸãã¯ããã€ãã®ã·ã§ãŒããŒå¹æïŒã次ã®ãããªããšãã§ããŸãã
http://mrdoob.github.com/three.js/examples/webgl_rtt.html
ïŒå°ãªããšã2DãªãŒããŒã¬ã€ã®å ŽåãFBOã䜿çšããã«ã深床ã®æžã蟌ã¿/èªã¿åã/ãã¹ãã³ã°ã§éã¶æ¹æ³ã¯ããããããã€ããããŸãïŒ
alterqããã®ãªã³ã¯ãããããšãã ç§ã¯çŸåšããéã¶ãæ¹æ³ãèŠã€ããŠããŸããã ããããWebGLRendererã§ã³ãŒããåæãããšããã次ã®ãããªãã®ã䜿çšã§ããããšãããããŸããã
var sprite = new THREE.SpriteïŒ{mapïŒtexãuseScreenCoordinatesïŒtrue}ïŒ;
scene.addChildïŒã¹ãã©ã€ãïŒ;
ããã¯æ©èœããŸãã
ããããç§ã¯ãŸã ãã¥ã¢ã«ã¬ã³ããªã³ã°ãšããããã¬ã³ãããæ¹æ³ã«èå³ããããŸãã
ç§ã¯WebVRãããžã§ã¯ãã«åãçµãã§ããŸããããDOMãœãªã¥ãŒã·ã§ã³ã¯ãªãã·ã§ã³ã§ã¯ãããŸããã§ããã ç§ã¯çŽç²ãªThree.jsã§HUDãè¡ãããšã«ãªããŸããã å¥ã®ã·ãŒã³ãäœæããå ã®ã·ãŒã³ã®äžã«ã¬ã³ããªã³ã°ããŸããã
ããã§å®éã®äŸãèŠãããšãã§ããŸãïŒ
http://codepen.io/jaamo/pen/MaOGZV
ãããŠãããã§ã®è§£æ±ºçã«ã€ããŠã®ããã°æçš¿ïŒ
http://www.evermade.fi/pure-three-js-hud/
ç§ã¯å®éã«webVRçšã®HUDããŒã«ã«åãçµãã§ããŸãã
ããã¯ãthree.jsã®äŸã«ããStereoEffect.jsã«åºã¥ããŠããŸãã
æåã®ã·ãŒã³ã®2ã€ã®éšåãã¬ã³ããªã³ã°ãã次ã«HUDã·ãŒã³ã®2ã€ã®éšåããPerspectiveCameraã§ããStereoEffectCameraã§ãªãŒããŒã¬ã€ããŠã¬ã³ããªã³ã°ããŸãã
ååç·ãšã·ãŒã³å
ã®ããã€ãã®èŠçŽ ãšã®çžäºäœçšãåãããã¢ããããŸãã
https://github.com/trinketmage/three.js-vr-hud/
ç§ã¯çŸåšãHUDã·ãŒã³ã®éå°å
ã§ãã©ãã«ãæ©èœã«åãçµãã§ããŸãããã³ããå©ããããã ããã°å¹žãã§ãã
ããããšã
誰ãããŸã é è¿æ³ã®ã·ãŒã³ã®äžã«ãªã«ãœã·ãŒã³ãã¬ã³ããªã³ã°ããæ¹æ³ãæ¢ããŠããå ŽåïŒãªããžã§ã¯ããäž/å·Š/å³/äžã®å¢çç·ã«æãããããã¯ã»ã«åäœã®ãµã€ãºã«ããããšãã§ããŸãïŒãããã«äŸããããŸããã
@ cecilemuller-ããªãã®ãããžã§ã¯ãã§ã¯åé¡ãéãããšãã§ããªãã®ã§ãããã«ã³ã¡ã³ãããŸãã ããã¯æ©èœããŸããïŒ http://jsbin.com/sisutopede/edit?htmlãjsãoutputïŒ$ïŒ$ let const
ãvar
ã«çœ®ãæããŸããïŒéãçããèŠããŸããããäœãèŠããªãããã§ãUIèŠçŽ ïŒ
@ trinketmage-çŽ æŽããããã¢/ãã©ã°ã€ã³ãäœæããåé¡1ã®èª¬æã«æéãå²ããŠããã ããããããšãããããŸããçŸåšãåé¡2ãç解ããããšããŠããŸãïŒ //github.com/trinketmage/three.js-vr-hud/issues/ 2-ããŒããŒãã䜿çšããŠãããšãã¯åé¡ãªãåäœããŸããã¢ãã€ã«ããã€ã¹/ Chrome Dev Toolsã䜿ãå§ããŠããžã£ã³ãããŠããåããã·ãã¥ã¬ãŒãããç¬éã§ã...
è£è¶³ãšããŠãã³ããŒïŒããŒã¹ãã§ååã§ããããã®ã¹ã¬ããã®ãã¹ãŠã®ç¥èãããã°ãããæç¹ã§ç¬èªã®ã³ãŒããèšè¿°ã§ããããã«ãªãã¯ãã§ã...
@ stefek99éãçã®äžã«è²ä»ãã®é·æ¹åœ¢ã衚瀺ãããŠããã¯ãã§ãã ChromeãšFirefoxã§jsbinãè©ŠããŠã¿ãŸãããã¹ã¯ãªãŒã³ã·ã§ããã¯æ¬¡ã®ãšããã§ãã
ã¯ããŸãããããªãã䜿çšã§ããããã«ããã€ãã®ES6ã¯ãã³ãŒãã«ç¹åŸŽãããããã«REPLãããããåäœããŠããªãå Žåã¯ES5ã«å€æããããšã
2020幎ã§ããããã€ããªãããŸãã¯å¥åŠãªæ¹æ³ã䜿çšããã«ãThreeJSå ã«2D HUDãªãŒããŒã¬ã€ãäœæããããã®æè¯ã®æ¹æ³ã¯äœã§ããïŒ çæ³çã«ã¯ãThreeJSå ã®PixiJSã®ãããªãã®ã«ã¢ã¯ã»ã¹ã§ããŸããïŒ
@sylwesterdigitalãã«ããå¿ èŠãªå Žåã¯ãthree.jsãã©ãŒã©ã ã䜿çšã§ããŸãã
ãã...ç§ã¯ããã«è¡ã£ãããšããããç§ã®ã¢ã«ãŠã³ãã¯ä¿çã«ãªã£ãŠããã®ã§ãã³ã¡ã³ãããããè¿ä¿¡ããããæ°ãããããã¯ãäœæãããããããšã¯ã§ããŸããã ThreeJSã³ãã¥ããã£ã¯ã©ãã«ãè¡ããŸãããã誰ããæ¯æã®æ¯æããããããã«f * Reactãã³ãŒãã£ã³ã°ããŠããŸããïŒ
äœå¹Žã«ãããã£ãŠåãåã£ãåŸãWebGLã§hudãå®è¡ãã絶察çãªæ¹æ³ã¯ãªããšæããŸããããã¯å®å šã«ãããžã§ã¯ãã«äŸåããŸãããç§ã®èãã¯æ¬¡ã®ãšããã§ãã
ãããã£ãŠãçµè«ãšããŠãç§ã®æèŠã§ã¯ãHUDããžã¥ã¢ã«ã³ã³ããŒãã³ãã¯ã蚱容ã§ããããã©ãŒãã³ã¹ã®ã³ã¹ãã«äŸåããå¿ èŠããããŸãã
æãåèã«ãªãã³ã¡ã³ã
ç§ã¯WebVRãããžã§ã¯ãã«åãçµãã§ããŸããããDOMãœãªã¥ãŒã·ã§ã³ã¯ãªãã·ã§ã³ã§ã¯ãããŸããã§ããã ç§ã¯çŽç²ãªThree.jsã§HUDãè¡ãããšã«ãªããŸããã å¥ã®ã·ãŒã³ãäœæããå ã®ã·ãŒã³ã®äžã«ã¬ã³ããªã³ã°ããŸããã
ããã§å®éã®äŸãèŠãããšãã§ããŸãïŒ
http://codepen.io/jaamo/pen/MaOGZV
ãããŠãããã§ã®è§£æ±ºçã«ã€ããŠã®ããã°æçš¿ïŒ
http://www.evermade.fi/pure-three-js-hud/