Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
12
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@matsukatsu

A-FRAME: プリミティブ一覧

A-FRAMEを触り始めました。
3D空間が簡単に作れて楽しいです。

とりあえず形状を作成してクルクル回して楽しんでるだけなのですが、どんな形状があるのか公式ドキュメントをチラ見すると、ちょっと疑問を持ちました。

dodecahedron

なんだこれ??

circle とか box はわかるのですが、
dodecahedron これはパッとわかりません。

まず、A-FRAMEにおけるプリミティブを理解する為、
名称と概要の和訳の一覧を作成してみました。

直線平面

プリミティブ名 画像 概要の翻訳
a-triangle プリミティブ三角形は、三角形に設定タイプのジオメトリコンポーネントを使用して、三角形の面を作成します。
a-plane プリミティブ面は平面に設定タイプのジオメトリコンポーネントを使用して平坦な表面を作成します。
a-text テキストコンポーネントをラップします。
a-image 原始画像が平面上の像を示しています。
a-video ビデオプリミティブは、平面上のテクスチャとしてビデオを再生します。

直線多面体

プリミティブ名 画像 概要の翻訳
a-tetrahedron 四面体
a-box プリミティブボックスは、箱、立方体、又は壁のような形状を作成します。
a-octahedron 八面体
a-dodecahedron 十二面体
a-icosahedron 二十面体

曲線平面

プリミティブ名 画像 概要の翻訳
a-circle プリミティブ円は、円を作成する円に設定タイプのジオメトリコンポーネントを使用して表面。
a-ring プリミティブリングは、リング又はディスク形状を作成します。
a-link プリミティブリンクが似ているリンクを定義するためのコンパクトなAPIを提供します
伝統的なタグ。

曲面多面体

プリミティブ名 画像 概要の翻訳
a-cone プリミティブコーンは、円錐形状を作成します。
a-cylinder プリミティブシリンダは管と曲面を作成するために使用されます。
a-sphere プリミティブ球体は、球形または多面体形状を作成します。
これは、ラップ
球にその幾何学的プリミティブのセットとジオメトリコンポーネントを規定するエンティティ。
a-videosphere プリミティブvideosphereは、シーンの背景に360°のビデオを果たしています。

Videospheresは、内部にマッピングされた映像の質感を持つ大規模な球です。
a-sky 空プリミティブは、シーンに背景色や360度の画像を追加します。
スカイ
内部にマッピングされた色や質感のある大きな球です。
a-curvedimage プリミティブ湾曲した画像は、ユーザの周囲にその曲げ画像を作成します。
曲がりました
カメラの周囲に配置された画像は各ので視認性のために喜ばせることができます
ピクセルは、ユーザから同じ距離に位置します。
彼らは、より良い選択することができ
複雑なレイアウトのための角度のついたフラットな面よりも、彼らがスムーズに確保するため、
表面ではなく平面間の厄介な継ぎ目の一連。
a-torus プリミティブトーラストーラスに設定タイプのジオメトリコンポーネントを使用して、ドーナツまたはチューブ形状を作成します。
a-torus-knot トーラス結び目プリミティブはtorusKnotに設定タイプのジオメトリコンポーネントを使用して、プレッツェル形状を作成します。

インポート

プリミティブ名 画像 概要の翻訳
a-gltf-model 3D glTFモデルが3Dで作成したglTFモデルプリミティブを表示
モデリングプログラムまたはWebからダウンロードしました。
a-obj-model .OBJモデルプリミティブは、3D波面モデルを表示します。

シーンの設定などの形状以外

プリミティブ名 画像 概要の翻訳
a-camera 原始的なカメラは、ユーザーが見ているものを決定します。
我々変更することができます
カメラエンティティの位置と回転を変更することで、ビューポート。
a-cursor 原始的なカーソルはクリックして基本を可能にしたレチクルであります
ハンドコントローラを持っていないデバイス上のシーンとの対話。

デフォルトの外観は、リング形状です。
カーソルが通常のように配置されています
カメラの子。
a-light 光は、シーンのライティングやシェーディングを変更します。
a-sound 原始的な音は、音成分をラップします。

まとめ

各プリミティブを一通りレンダリングしてみました。
うまく動いていないところや良くわからない部分もたくさんあるので、もう少し詳しく各形状を見ていきたいと思います。

a-video-sphere ところどころ欠けてしまう
a-obj-model テクスチャが表示されていない
a-link カーソルを合わせなくても勝手に画面遷移する
a-torus-knot 何に使えばいいのかな、う○こかな

ほとんどわからないながらも、 a-gltf-model のようにどこかからパクってきたモデルが、簡単にブラウザ上でレンダリングできるのはすごく楽しいです。

参考

Sketchfab - Cathedral

12
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
12
Help us understand the problem. What is going on with this article?