{"json_modified": "2016-03-28T08:50:50.626219", "uuid": "6857affb-526f-4730-8c53-e2b1c889c62b", "title": "Building up a basic demo with A-Frame", "url": "/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame", "tags": ["3D", "VR", "WebGL", "Web", "A-Frame", "Virtual Reality"], "translations": [{"uuid": "8a72a2a7-0c49-480b-8d38-22c5453c5f41", "title": "A-Frame\u3092\u4f7f\u3063\u305f\u57fa\u672c\u7684\u306a\u30c7\u30e2\u306e\u4f5c\u6210", "url": "/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame", "tags": [], "summary": "\u4e3b\u8981\u306a\u4f01\u696d\u304b\u3089VR\u30cf\u30fc\u30c9\u30a6\u30a7\u30a2\u304c2016\u5e74\u306e\u524d\u534a\u306b\u30ea\u30ea\u30fc\u30b9\u3055\u308c\u308b\u4e88\u5b9a\u3067\u3042\u308a\uff0c\u30d0\u30fc\u30c1\u30e3\u30eb\u30ea\u30a2\u30ea\u30c6\u30a3\u306f2016\u5e74\u306b\u898f\u6a21\u304c\u5de8\u5927\u306b\u306a\u308b\u3067\u3057\u3087\u3046\uff0e<a href=\"https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebVR\">WebVR</a>\u00a0\u306f\u3059\u3067\u306b\u305d\u306e\u8a87\u5927\u5e83\u544a\u306e\u4e00\u90e8\u3067\u3059\u304c\uff0c\u30c4\u30fc\u30eb\u3084\u30e9\u30a4\u30d6\u30e9\u30ea\u306f\u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u5185\u306b\u51fa\u59cb\u3081\u305f\u3068\u3053\u308d\u3067\u3059\u306e\u3067\uff0c\u30c7\u30e2\u3084\u305d\u306e\u4ed6\u306e\u5b9f\u9a13\u4f5c\u54c1\u3092\u3064\u304f\u308b\u3053\u3068\u306f\u307e\u3060\u8ab2\u984c\u3068\u306a\u3063\u3066\u3044\u307e\u3059\uff0e<a href=\"https://aframe.io/\">A-Frame</a>\u00a0\u306f\uff0c\u30b2\u30fc\u30e0\u958b\u767a\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u306e\u539f\u5247\u306b\u5f93\u3044\u3064\u3064\uff0cWEB\u958b\u767a\u8005\u3078\u4f7f\u3044\u3084\u3059\u3055\u3092\u3082\u305f\u3089\u3057\u307e\u3059\uff0e\u305d\u308c\u306f\uff0c\u30d7\u30ed\u30c8\u30bf\u30a4\u30d7\u3084\u30c7\u30e2\u3092\u8fc5\u901f\u304b\u3064\u4e0a\u624b\u306b\u69cb\u7bc9\u3059\u308b\u305f\u3081\u306b\uff0cWebGL(WebVR\u306fWebGL\u4e0a\u306b\u69cb\u7bc9\u3055\u308c\u3066\u3044\u307e\u3059)\u3092\u77e5\u308b\u5fc5\u8981\u306e\u306a\u3044\u958b\u767a\u8005\u306e\u305f\u3081\u306e\u69cb\u7bc9\u6e08\u307f\u306e\u30d6\u30ed\u30c3\u30af\u3067\u3059\uff0e\u5229\u7528\u53ef\u80fd\u306a\u3059\u3079\u3066\u306e\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u7528\u306b\u30d0\u30fc\u30c1\u30e3\u30eb\u30ea\u30a2\u30ea\u30c6\u30a3\u4f53\u9a13\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306e\u30de\u30fc\u30af\u30a2\u30c3\u30d7\u3067\u3059\uff0e", "localization_tags": [], "locale": "ja", "last_edit": "2016-02-26T06:13:20", "review_tags": ["technical", "editorial"]}], "modified": "2016-03-03T04:22:23", "label": "Building up a basic demo with A-Frame", "localization_tags": [], "locale": "en-US", "id": 177268, "last_edit": "2016-03-03T04:22:20", "summary": "The <a href=\"https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/WebVR\">WebVR</a> and <a href=\"/en-US/docs/Web/API/WebGL_API\">WebGL</a> APIs already enable us to start creating virtual reality (VR) experiences inside web browsers, but the community is still waiting for tools and libraries to appear, to make this easier. Mozilla's <a href=\"https://aframe.io/\">A-Frame</a> framework provides a markup language allowing us to build 3D VR landscapes using a system familiar to web developers, which follows game development coding principles: this is useful for quickly and successfully building prototypes and demos, without having to write a lot of JavaScript or GLSL. This article explains how to get up and running with A-Frame, and how to use it to build up a simple demo.", "sections": [{"id": "High_level_overview", "title": "High level overview"}, {"id": "Environment_setup", "title": "Environment setup"}, {"id": "HTML_structure", "title": "HTML structure"}, {"id": "Initializing_the_scene", "title": "Initializing the scene"}, {"id": "Adding_a_cube", "title": "Adding a cube"}, {"id": "Adding_a_background_Sky_box", "title": "Adding a background: Sky box"}, {"id": "Specifying_a_camera", "title": "Specifying a camera"}, {"id": "Adding_lights", "title": "Adding lights"}, {"id": "Adding_some_advanced_geometry", "title": "Adding some advanced geometry"}, {"id": "Defining_a_material", "title": "Defining a material"}, {"id": "Adding_some_JavaScript_to_the_mix", "title": "Adding some JavaScript to the mix"}, {"id": "Animation", "title": "Animation"}, {"id": "Rotation", "title": "Rotation"}, {"id": "Scaling", "title": "Scaling"}, {"id": "Moving", "title": "Moving"}, {"id": "Conclusion", "title": "Conclusion"}, {"id": "See_also", "title": "See also"}], "slug": "Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame", "review_tags": []}