share facebook facebook twitter menu hatena pocket slack

2019.07.16 TUE

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

松本 勝年

WRITTEN BY 松本 勝年

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

元記事はこちら

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

松本 勝年

松本 勝年

フロントエンドに興味があるエンジニア

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。