Blenderã§ä½œæˆã—ãŸ3Dモデルをã€Three.jsã§è¡¨ç¤ºã—ãŸéš›ã®ã€Œè‰²å‘³ãŒé•ã†â€¦ã€ã®è§£æ±ºæ–¹æ³• | æ ªå¼ä¼šç¤¾LIG(リグ)｜DX支æ´ãƒ»ã‚·ã‚¹ãƒ†ãƒ 開発・Web制作ã“ã‚“ã«ã¡ã¯ã€‚フãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ã«ãªã‚ŠãŸã¦ã®ã¼ã“ã§ã™ã€‚ 最近プライベートã§Blenderを始ã‚ã¾ã—ã¦ã€ä½œã£ãŸ3DモデルをWeb上ã§æ‰±ã†ç·´ç¿’ã‚’ã—ãŸã‚Šã—ã¦ã„ã¾ã™ã€‚ ブラウザ上ã§3Dモデルを表示ã™ã‚‹ãŸã‚ã«ã¯ã€ã¾ãšä½œæˆã—ãŸ3Dモデルã®ãƒ‡ãƒ¼ã‚¿ã‚’gltf（glb）ã¨ã„ã†å½¢å¼ã§æ›¸ã出ã—ã€ãれをWebGL（Three.js）ã§èªã¿è¾¼ã‚“ã§canvasã«è¡¨ç¤ºã™ã‚‹ã“ã¨ã«ãªã‚‹ã¨æ€ã„ã¾ã™ãŒã€ã‚„ã£ã¦ã¿ã‚‹ã¨ã€Œã‚ã‚Œã€Blenderã§ä½œã£ãŸã¨ãã¨ãªã‚“ã‹è‰²å‘³ãŒé•ã†â€¦â€¦ã€ã£ã¦ã„ã†ç¾è±¡ã«é™¥ã‚‹ã“ã¨ãŒå°‘ãªããªã„よã†ã«æ€ã„ã¾ã™ã€‚ ã›ã£ã‹ãBlenderã§ã„ã„æ„Ÿã˜ã«èª¿æ•´ã—ãŸã®ã«ã€ã„ã–Three.jsã«æŒã£ã¦ããŸã¨ãã«è¡¨ç¤ºãŒå¤‰ã ã¨æ‚²ã—ã„ã§ã™ã‚ˆã。 今回ã¯ãã®å•é¡Œã‚’解決ã™ã‚‹ãŸã‚ã®å‚™å¿˜éŒ²çš„ãªè¨˜äº‹ã‚’書ã“ã†ã¨æ€ã„ã¾ã™ã€‚ 使用ツールã®ãƒãƒ¼ã‚¸ãƒ§ãƒ³ Blender： 2.93.0 Three.js： r135 ã¨ã‚Šã‚ãˆãšçµè«– Three.jsã«æŒã£
Blenderã®ãƒ™ã‚¤ã‚¯ã‚’完全ã«ç†è§£ã™ã‚‹ | 3DCG school
{{#tags}}- {{label}}
{{/tags}}