プログラミング

【WebAR開発】A-FRAME

A-FRAME

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

WebARに限らず、3DCGの世界のカメラが映し出す映像は
図のような”錐台”の範囲に制限することができます

farはカメラからどれだけ離れているところまで映すか
nearはカメラからどれだけ近いところまで映すか
fov映し出す広さ(視野角)です
下記画像の台錐部分が映像として映し出される範囲になります

COMMENT

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

CAPTCHA