A - frame (初心者向けガイド)


導入


Web開発は、インターネットのこの美しい世界に慣れている人々のための最も繁栄し、潜在的な市場の一つです.開発者としてAI、マシンの学習とバーチャルリアリティに焦点を当て.この技術は確かに将来に支払うことになる.今日はバーチャルリアリティであるVR技術の一つに基づいて物事を学びます.我々は、バーチャルリアリティ体験を構築するためのフレームワークフレームワークを使用するつもりです.

フレームワーク


A - Frameはバーチャルリアリティ(VR)体験を構築するためのWebフレームワークです.A -フレームはHTMLのトップに基づいています.しかし、フレームは3 Dシーングラフまたはマークアップ言語ではありませんコアは、宣言型、拡張性、および構成可能な構造を3つにする強力なエンティティコンポーネントフレームワークです.js
もともとMozillaの中で考えられて、現在スーパーメディアの中でA -フレームの共同クリエーターによって維持されて、A -フレームは、VR内容を開発する簡単で強力な方法であるように開発されました.独立したオープンソースプロジェクトとして、A - Frameは、最大のVRコミュニティの1つであるようになりました.ソース-フレーム

要件


  • Brackets
  • これは我々がこれを使用するつもりである機能を提供するシンプルでクリーンなテキストエディタです.
  • これは、環境を設定しながら非常に有用になるウェブサイトのライブプレビューの機能があります.
  • 外部データベースプログラムの必要がないので、作り付けのサーバーを持っています.
  • ウェブブラウザ
  • HTML 5をサポートするWebブラウザは素晴らしいでしょう.
  • 始める


    これは、Aフレームを使い始める初心者のための非常に基本的になるでしょう.このために、私たちはコードを書くつもりです、そして、私はあらゆるステップを説明します.
    <html>
      <head>
        <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
      </head>
      <body>
        <a-scene>
          <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
          <a-sky color="#ECECEC"></a-sky>
        </a-scene>
      </body>
    </html>
    
    基本的には、他のタグを持つHTMLファイルの基本的なアウトラインがあります.私はそれのすべてのステップを説明しようとして心配しないでください.
    <script></script>
    
  • 私たちは、彼らのウェブサイトで利用可能なAフレームのためにスクリプトを輸入しました.A - frameの最新リリースを使用してください.
  • <a-scene></a-scene>
    
  • これは、ウェブサイトで見られるすべての要素を含むタグです.
  • このタグをHTMLファイルのbodyタグとして見ることができます.
  • <a-box></a-box> and its attributes
    
  • これは、より正確に3 Dボックスをボックスに提供するA - FrameフレームワークのHTMLタグです.
  • 位置、回転、および色は
    ポジションは-ボックスまたは任意のオブジェクトの座標を表します.x,y,z軸の3値をとる.
  • 回転-位置と同じX、Y、Z軸の3値を取る.
  • color -名前としてのこの属性は、それが箱に色をつけることを示唆します.
  • <a-sky></a-sky>
    
  • これは、環境を作成するために使用されます.環境は色、画像、ほとんどの開発者は360度の画像を使用して作成することができます.
  • 実行


    プログラムのあなたの作品を書いた後、それはあなたの希望の場所に保存されていることを確認します.単にあなたの画面の右上隅に見つけることができるライブプレビューボタンをクリックします.

    これはどのようにウェブサイトを見に行くあなたのデフォルトのWebブラウザで新しいウィンドウを開きます.これはライブプレビューウィンドウで、コードの変更を行うときに変更されます.これは、位置、回転、他の属性のライブを変更するのに役立ちますし、保存して何度も何度もリフレッシュする必要はありません.
    出力

    あなたがすべてを正しくしたならば、あなたは上記の出力で終わります.
    それをリフレッシュ表示しない場合は、必ずあなたのコードが正しい場合に表示されます.

    ラストノート


    このフレームワークを使うだけでたくさんのことができます.あなたはそれについての詳細を知るために役立つ自分のウェブサイト上の例の多くを見ることができます.
    このテーマについてのプロジェクトをチェックしたい場合は、githubのリポジトリをご覧ください