AR.jsでねこに転生したおじさん(夫)をごっこをしてみる。 #JavaScript

商業ディベロッパーに勤める非エンジニアです。
電子工作にハマっています。
今年の春から夫が単身赴任で青森にいき、一人暮らし中のため、離れていても夫と楽しく暮らすためのあれこれを作っています。

1.最近の癒し、それは「ねこに転生したおじさん」

Twitterで連載されているまんがやじま(@yajima_en)さんの「ねこに転生したおじさん」が最近の癒しです。

あらすじ

普通にサラリーマン生活を送っていたおじさんがある日、トラックに
ひかれ猫に転生する。体の軽さやかわいいと言われることに嬉しさがありながら、寝床がない、食べ物がねずみと、猫の生活に慣れない
中、サラリーマンだった頃にいつも怒られていた社長に気に入られ、一緒に暮らすというまさかの展開に…。

プンちゃんと名付けられたネコさんの背景に背後霊のごとくいるおじさん
表情豊かなおじさんも何故か最高にかわいい。
LINEスタンプも発売中です。

ちいさくてカワイイ生き物 × おじさん　
の組み合わせ最高なので私も作ってみようと思います。

1-1.実際に作成したものはこちら

プルプルしているところがなんか本当に背後霊みたい。

1-2.コード

A-Frameというフレームワークをベースに作っています。

作成したコード

<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ar.js/2.2.2/aframe-ar.min.js"></script>
<body style="margin : 0px; overflow: hidden;">
  <a-scene embedded arjs>
    <!-- hiroマーカーが認識されたら -->
    <a-marker preset="hiro">
      <!-- ボックスを表示します -->
      <a-entity
        position="0 -8 0"
        scale="5.5 5.5 5.5"
        rotation="270 0 0"
        opacity="0"
        gltf-model="./ojisan.glb"
     ></a-entity>
     <a-entity
        position="3 -3 0"
        scale="1.5 1.5 1.5"
        rotation="270 0 0"
        gltf-model="./fu.glb"
     ></a-entity>
            
    </a-marker>
    <a-entity camera></a-entity>
  </a-scene>
</body>

1-3.お試し用

うちの夫を背後霊にしたいときはお試しください。
QRを読み込んでHiroマーカーを読み込んでください。

2. 実装

ねこに転生したおじさんの醍醐味は、
実物のネコちゃんの後ろに常におじさんが浮いている
ことなので、ぬいぐるみの後ろにうちの夫が浮いている状態を目指します。

2-1. 今回使ったもの

ペイント３D　写真を３D画像に変換するのに使用します。
CodePen　HTLMのコードを書くのに使用します。
Netlify　デプロイするのに使用します。
マーカー 今回はHiroマーカーを使用しました。

2-2. 画像の3D化

使用する画像を用意して、３Dペイントに読み込みます。
この時、背景を透過しておくと加工が楽です。

新規作成を選択して、メニューから挿入を選択して、画像を読み込み

右側の３Dの作成ボタンを押す

これで3D画像の完成です！簡単！今回はgld

メニューから保存を選択して、3Dモデルで保存してください。

メインの画像以外に吹き出しも作りました。

2-3. ARの作成

script>でA-Framega実行できるようにしていきます。


<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ar.js/2.2.2/aframe-ar.min.js"></script>

Hiroマーカーが表示されたらARが表示されるという指示をします。

<body style="margin : 0px; overflow: hidden;">
  <a-scene embedded arjs>
    <!-- hiroマーカーが認識されたら -->
    <a-marker preset="hiro">
      <!-- ボックスを表示します -->

でオブジェクト(先ほど作った３D画像)の設定をしていきます。
AR空間にどのように配置するのかを指定していきます。
position=位置
scale=サイズ
rotation=回転

      <a-entity
        position="0 -8 0"
        scale="5.5 5.5 5.5"
        rotation="270 0 0"
        opacity="0"
        gltf-model="./ojisan.glb"
     ></a-entity>
     <a-entity
        position="3 -3 0"
        scale="1.5 1.5 1.5"
        rotation="270 0 0"
        gltf-model="./fu.glb"
     ></a-entity>

2-4. Netlifyでデプロイ

CodePenからエクスポートして、distフォルダーに作成た３D画像をいれたらNetlifyででプロして完成です。

3. 満足

opacity="0"で本当は夫の画像が透過される予定だったんですがうまくいかず、加工方法を色々試してみようと思います。

これで老後、本当の独り身になった時でもこれで楽しく暮らせるかもしれません。