【WebAR開発】A-FRAME <a-camera>

A-FRAME

cameraを配置してみよう！

記事の内容

今回やること
今回のサンプル
<a-camera>の中身

今回やること

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

今回のサンプル

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

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

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <title>Cameraを配置してみよう！</title>
  </head>
  <body>
    <a-scene>

    <!- Boxを配置するコード->
        <a-box
            position="0 1.6 -3"
            height="1"
            width="1"
            depth="1"
            rotation="15 45 0"
            color="#4CC3D9"
        ></a-box>

    <!-Cameraを配置するコード->
        <a-camera
            position="0 1.6 0"
            far = "10000"
            near = "0.5"
            fov = "80"
            look-controls-enabled ="true"
            reverse-mouse-drag = "false"
            wasd-controls-enabled = "true"
        ></a-camera>

    <!-Skyを配置するコード->
        <a-sky
            color="#191970"
        ></a-sky>
    </a-scene>
  </body>
</html>

<a-camera>の中身

<a-camera>の中身をみていきましょう
今回使用してみた要素は以下の6つです

far	映し出す距離(奥側)　デフォルト値は10000
near	映し出す距離(手前側)　デフォルト値は0.5
fov	視界の広さ　デフォルト値は80
look-controls-enabled	視点の回転ができるかどうか　デフォルト値はtrue
reverse-mouse-drag	ドラッグした時に移動する方向を逆にするかどうかデフォルト値はfalse
wasd-controls-enabled	キーボードのWASDで操作できるかどうか　デフォルト値はtrue