AR.jsでAdobeの3Dモデルを使って遊んでみた

engineering

今回はAdobeで購入できる3Dオブジェクトを使って、AR.jsで表示させていきたいと思います。

使用する3Dオブジェクトはこやつです。

現生の動物群の中で鳥類とは進化系統上最も近縁の関係で、ともに主竜類に属する。なお、同じ主竜類中には絶滅した翼竜や鳥類の祖先である恐竜も含まれる。ワニ目は、恐竜(鳥類を含む)や翼竜が属する鳥頸類と並んで主竜類を代表する二大グループであるクルロタルシ類の唯一の現生動物である。(Wikipediaより)

うんうんなるほど、わからん。。。 つまり、ワニです(真顔)

この他に10体の動物の3Dオブジェクトを使用しました。

成果物はこんな感じになりました。

Markerを読み込むと、ワニが出現します。

表示した3Dオブジェクトに動きを加えることも、大きさを変更させることもできます。

表示されているワニの見た目が荒いのは、3Dオブジェクトのポリゴン数を減らしてオブジェクトファイルの大きさを軽くしているためです。

Blender でポリゴン数を減らすことができます。

使用したコードは以下になります。

marker.addEventListenerにmarkerFoundを設定することで、objを表示した瞬間に処理を発生させることができます。

表示したobjのidを取得できるので、実装次第で色々できそうですね。

終わりに

AR.jsを使えば簡単に3Dオブジェクトを表示させることができました。

マサ

文系出身のWEBエンジニア
メインの開発言語はPHP
リモートワークで旅をすることが夢です。

マサをフォローする
engineering
マサをフォローする
サーフエンジニアチャンネル

コメント

%d人のブロガーが「いいね」をつけました。