プログラミング

【WebXR開発】 A-FRAME ~

A-FRAME

Boxを配置してみよう!

今回やること

今回はA-FRAMEを使ってWebAR空間にBoxを配置してみます

今回のサンプル

サンプルはコチラから実行できます

▼▽▼コードのサンプルはコチラ▼▽▼

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <title>Boxを配置してみよう!</title>
  </head>
  <body>
    <a-scene>
      <a-box
      position="0 1.6 -3"
      height="1"
      width="1"
      depth="1"
      rotation="15 45 0"
      color="#4CC3D9"
    ></a-box>

      <a-sky color="#191970"></a-sky>
    </a-scene>
  </body>
</html>

 

<a-box>の中身

<a-box>の中身をみていきましょう
今回使用している要素は以下の6つです
プログラムの知識がなくても
なんとなくわかるかも…?

position 位置 x軸 y軸 z軸 デフォルト値は中心
height Boxの高さ デフォルト値は1
width Boxの横幅 デフォルト値は1
depth Boxの奥行 デフォルト値は1
rotation 回転 x軸 y軸 z軸 デフォルト値は0 0 0
color マテリアルの色

position (位置)

WebXR空間は右手座標系の3次元空間です

分かりやすく言うと
上方向がx軸のプラス方向
右方向がy軸のプラス方向
手前方向がz軸のプラス方向になります

位置を指定するときは
x座標,y座標,z座標をそれぞれ指定する必要があります

指定していない場合はWebXR空間の中心、
すなわち[x , y , z]=[0 , 0 , 0]に配置されます

rotation (回転)

回転についてはそれぞれの軸に対して時計回りの回転になります

0~360の値を指定できます
円が1周360°だからですね!

指定しない場合は
[x軸の回転 , y軸の回転 , z軸の回転]=[0 , 0 , 0]
になります

位置と回転については慣れるしかないですね!
数値を変えてみていろいろ試してみましょう!

 

color (色)

colorですね!

これは簡単ですね

height , width , depth (高さ,横幅,奥行)

boxは直方体なので
“高さ”“横幅”“奥行”で大きさが決まります

WebXR空間では
heightはy軸方向の長さ(高さ)
widthはx軸方向の長さ(横幅)
depthはz軸方向の長さ(奥行)です

指定しないときは
heightもwidthもdepthもすべて1の立方体
になります

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA